Cara Membuat Sliding Info

Hallo sahabat bloggers...
Judul postingan kali ini yaitu bagaimana Cara membuat Sliding Info seperti gambar disamping.

DEMO

Jika tombol tersebut di klik maka akan muncul sliding info tentang penulis dimana konten didalamnya berisi ucapan selamat datang,foto,dan tombol sosial media dll.

Sliding Info ini tidak akan mempengaruhi loading blog kita karena sudah saya buktikan sendiri.

Menurut saya kelebihan Sliding Info ini dapat menghemat space yang ada di sidebar karena biasanya untuk info penulis akan diletakan di sidebar atau di footer dll.

Sekian dulu basa-basinya,langsung saja ke TKP :

Login ke blogger dengan akun masing-masing.
Pilih menu "Template".
Jangan lupa untuk backup template anda sebelum melakukan edtting.
Klik "Edit HTML" kemudian "Lanjutkan".
Centang Cekbox "Expand Template Widget".
Kemudian cari kode ]]></b:skin>
Kemudian copy kode dibawah dan letakan tepat di atas kode ]]></b:skin>

/* SLIDE INFO*/

.panel{
position:fixed;
top:20px;
left:0;
background:#000;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
border:1px solid #ffff01;
width:330px;
height:auto;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;
display:none;
padding:30px 30px 30px 100px}

.panel p{color:#ffff01;margin:0 0 15px;padding:0}

.panel a,.panel a:visited{color:#c2c202;text-decoration:none;margin:0;padding:0}

.panel a:hover,.panel a:visited:hover{color:#ffff01;text-decoration:none;margin:0;padding:0}

a.trigger{
position:fixed;
text-decoration:none;
top:25px;
left:0;
font-size:16px;
letter-spacing:-1px;
font-family:verdana, helvetica, arial, sans-serif;
color:#c2c202;font-weight:700;
background:#000000 url(http://i49.tinypic.com/3148m13.gif) 85% 55% no-repeat;
border:1px solid #ffff01;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;
-webkit-border-bottom-left-radius:0;
display:block;
padding:15px 40px 15px 15px}

a.trigger:hover{
position:fixed;
text-decoration:none;
top:25px;
left:0;
font-size:16px;
letter-spacing:-1px;
font-family:verdana, helvetica, arial, sans-serif;
color:#ffff01;
font-weight:700;
background:#000000 url(http://i49.tinypic.com/3148m13.gif) 85% 55% no-repeat;
border:1px solid #ffff01;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-bottomleft:0;
-webkit-border-bottom-left-radius:0;
display:block;padding:15px 40px 15px 15px}

a.active.trigger{background:#000000 url(http://i50.tinypic.com/mcg27q.gif) 85% 55% no-repeat}

.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}

a:focus{outline:none}

.panel img{background-color:#000000;border:1px solid #ffff01;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px dotted #ffff01;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#ffff01;font-size:12px;font-weight:700;}

.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

/* END SLIDE INFO */

Setelah itu cari kode </head> kemudian copy kode berikut tepat diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); }); </script>

Terakhir cari kode </body> dan copy kode dibawah tepat diatasnya.

<div class='panel'>
<h3>SOFTWARE DAN BLOG</h3>

<p style='text-align:justify'>Selamat datang di blog saya yang sangat simple ini , semoga blog ini dapat memberikan informasi yang bermanfaat bagi pembaca dan selalu memberikan informasi yang terbaru.
Mohon dukungannya.</p>

<h3>TENTANG PENULIS</h3>
<img height='110px' src='http://i46.tinypic.com/2vxnevb.png' width='80px'/>

<p>
<br>[ Eka Arimika ]</br>
<br>[ 15 Desember 1990 ]</br>
<br>[ STMIK Stikom Bali ]</br>
</p>

<div style='clear:both;'/>

<div class='columns'>
<div class='colleft'>

<h3>SOCIAL MEDIA</h3>
<ul>

<li><a href='http://twitter.com/arimika90' target='_blank' title='twitter'><img alt='Twitter' src='http://i48.tinypic.com/34goyvs.png'/></a></li>
<li><a href='http://www.facebook.com/arimika.huhu' target='_blank' title='facebook'><img alt='Facebook' src='http://i48.tinypic.com/2ajytr5.png'/></a></li>
<li><a href='http://www.arimika90.blogspot.com/' title='home'><img alt='HOME' src='http://i45.tinypic.com/2ibhklc.png'/></a></li>

</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>More</a>

Silahkan kalian edit sesuai dengan keinginan kalian seperti "Url foto" , "Url Sosial Media" , atau CSS nya untuk merubah warna tulisan , border dll.
Kemudian klik simpan dan lihat hasilnya.

Perhatian : Jika ada pertanyaan silahkan berkomentar yang sopan.

Terus Mencari Ilmu dan Berbagi Ilmu.