Membuat widget vertical sliding Info Panel di blog

    Setelah beberapa waktu yang lalu, saya sudah share tentang Rahasia Memilih Keyword Posting Yang Tepat, sekarang saya ingin share tentang Membuat sliding Info Panel di blog. Tutorial ini, saya ambil dari blog kelima saya. Jika berkenan, silahkan kunjungi di http://infoiki.blogspot.com. Widget satu ini bermanfaat untuk menaruh pesan yang ingin anda sampaikan (Semacam amanat) atau bisa juga menaruh profil data diri anda. Berikut screenshotnya :

Live DEMO

1. Login blog.
2. Template -> Edit HTML.
3. Lanjutkan -> Centang Expand Template Widget.
4. Gunakan CTRl dan F atau F3.
5. Lalu, cari tag ]]></b:skin>
6. Tepat diatasnya, copy paste kode berikut :

 .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 #666;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px 30px 30px 100px} .panel p{color:#fff;margin:0 0 15px;padding:0} .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0} .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;margin:0;padding:0} a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-9_rubUkTkl4TpBrHAismXwNzNeZBfo92gjOwtIjPebojzcfjOVPYEnNGi7lMSw1CcyThQakvuJJ3rl8jurTHq4ddkmMMkiXzLZLDowhFlBFbg13EYIRHIecrbr4Dsa_7YdsztrICbE/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-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:10px 35px 10px 10px} a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-9_rubUkTkl4TpBrHAismXwNzNeZBfo92gjOwtIjPebojzcfjOVPYEnNGi7lMSw1CcyThQakvuJJ3rl8jurTHq4ddkmMMkiXzLZLDowhFlBFbg13EYIRHIecrbr4Dsa_7YdsztrICbE/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-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:10px 40px 10px 10px} a.active.trigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3tsyymqE5FQcM9FAVOrLL1YWakhAjoDhG6ET2HM-aJB7R5llXDZLe6IBrzbLOdFHIu2GZ7SWfCkUMfqKTdrvbWW_bG-eanXF_3ShzCU9nKicmsPWv2HwG5viZD96WnIhEey95I7djsM0/s320/minus.png) 85% 55% no-repeat} .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px} a:focus{outline:none} .panel img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px} .panel h3{border-bottom:1px solid #666;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#fff;font-size:13px;font-weight:700} .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

7. Selanjutnya, cari tag </head>
8. Copas kode berikut tepat diatasnya.

<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;.trigger&quot;).click(function(){

$(&quot;.panel&quot;).toggle(&quot;fast&quot;);

$(this).toggleClass(&quot;active&quot;);

return false;

});

});

</script>

9. Klik Save template.

   Sekarang, anda hanya perlu menambahkan beberapa kode untuk menampilkan widget ini. Caranya sebagai berikut :
1. Tata letak.
2. Klik Add Gadget.
3. Klik HTML/Javascript.
4. Copas kode dibawah :

<div class='panel'>

<center><font size="1"><a href="http://myblogger-tutorials.blogspot.com/2012/09/buat-sliding-info-panel-di-blogspot.html"target=_blank"><div style="color: #444444;">

<span >make own</span></div></a></font></center>

<h3>KATA SAMBUTAN</h3>

<p style="text-align:justify">Salam Blogger | KATA - KATA YANG INGIN ANDA SAMPAIKAN

<br/>

<a title="NAMA ANDA DISINI" target="_blank" href="http://www.blogger.com/profile/08113139411481282535">Selengkapnya tentang saya</a></p>

<h3>Author..</h3>

<img width="73px" height="73px" alt="Nama Anda Disini" src="URL Foto profile anda disini" />

<p>Nama anda disini

<br/>

Caritakan Tentang anda</p>

<div class='columns'>

<div class='colleft'>

<h3>FIND ME ON..</h3>

<a href="feeds/posts/default"><img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6EIwYatskSBB-wIc0U2HL_H7N0Ud90JRHur8_QbXSorxV59vb-rrLkWvMkwVrEa7CkRaDOW1p49ubL5FZN3ngGEcB2I1j1LbbqOlRifLpLWcMwIPAljvXF2108-88u8exA02Q3JeCoLg/s320/r.png" /></a>

<a href="http://www.mybloglog.com/buzz/members/08113139411481282535/"><img alt="mybloglog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA-LunYWkZXUurApBVEIZJjY9uWqYF0WF4ptuZfSQXy5BHJsMB56ItiKzEiEOaMGnOMdlMRg0H8ds9IxEZ47sHtBQ7JturPUkxSiJkr2JOWmOUG5YUv4I6Gke68dli4BJe0UZfljuVj4c/s320/l.png" /></a>

<a href="https://twitter.com/#!/yustin_annisa"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNaBOjJ4dKzd-hd2ebkqfMKZQAzB8bxFskHF6cd-dSviCyaG7QW7i_8poy_kZqMRpq0C25sCxA6kzTni5ojQA3ZrpQar-5hvfaFkW6TVbyr1_1m5n7K0Jg4wUBfOMhhZq9_d4IZbR_Ld0/s320/t.png" /></a>

<a href="http://www.facebook.com/yustin.annisa"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm0l0AZuGML8CbTrEyL5kQs1hFi-NVwdcZlh-FRePMSQoLvDXb51r2YQt-0ZZG68DvQdwhBLTVlwb8zIXi1c5iVwLpJa5lMqZC_9ujyyl6GuI3mWK04RQMuiTlmqbAmPT9jo56eeSI8LI/s320/f.png" /></a>

<a href="http://infoiki.blogspot.com"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvZiwzEMF-1yvCrTZx93b3DhaUao6pRd-xSAf3x9ttuSvlLMCaCt7A9uOKEDjb1h5wUoZZFAdBpabruoz0dZ3rE9bfy54Nye4OUyfDJpPUPVIU_ipsvHW39Aft3kW4QvD6GNkpit2V8oc/s320/b.png" /></a>

</div>

</div>

</div>

<a class='trigger' href='#'>Info</a>

Keterangan,,..........
a). Ganti kode yang saya beri blok merah dengan url profile blogger anda.
b). Ganti kode berwarna hijau dengan url website dan jejaring social anda.

5. Terakhir, klik save & lihat hasilnya.

  Terimakasih sudah membaca posting diatas sampai habis. Komentar anda sangat dibutuhkan. Salam Blogger!