Membuat Vertical Sliding Info Panel Dengan JQuery

Membuat Vertical Sliding Info Panel Dengan JQuery, itulah yang akan saya share pada kesempatan kali ini. Setelah kemarin blogwalking kesana-kesini, ada beberapa sobat blogger yang menanyakan bagaimana sih caranya membuat menu Info Panel, seperti menu dipojok kiri atas blog sobat?? Selagi saya sempat dan bisa, pasti saya buatkan tutorialnya, ini juga saya cari sana-sini koq. cuman untuk CSS dan tambahan menu, saya modifikasi sendiri. dan pastinya untuk kode CSS-nya lebih simple.
Untuk lebih jelasnya silahkan sobat lihat gambar/demonya dibawah ini.

Sceenshot/Demo Vertical Sliding Info Panel Dengan JQuery

Kiranya seperti gambar diataslah yang kali ini akan saya share.
Berikut langkah-langkah membuatnya:

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode: ]]></b:skin>

7. Taruhlah kode CSS berikut tepat diatas kode: ]]></b:skin>

.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/AVvXsEgK2ZBWeeXKQsflfXTzYwZqa2RCvGIsg_wTNwL6MlBumIHDGEUn4ZlpYGErB4mb3pM6ViIevETl-VNR1TbmKP5ehzS8TsxztRctdzaOeje63BEPW0M2_j0rd9hYCKn0koQwGU1rfN0I0mE/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/AVvXsEgK2ZBWeeXKQsflfXTzYwZqa2RCvGIsg_wTNwL6MlBumIHDGEUn4ZlpYGErB4mb3pM6ViIevETl-VNR1TbmKP5ehzS8TsxztRctdzaOeje63BEPW0M2_j0rd9hYCKn0koQwGU1rfN0I0mE/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/AVvXsEhwwb_0HdGxOdofKO1hs3sYFCL2TSF3F2t1fGRS9vNPSuhcRG6a8_0B__8HoMMsMESnc6Be1d_6btppGoFlRFsfIpN8wtyP2yY506rRpEyI4mahe_c7P-ZJR9ocJQPuB-d8osAtrSbFghQ/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}

8. Kalau sudah, cari kembali kode: </head> dan taruh kode JavaScript 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. Simpan/Save Template.

Langkah terkahir, agar menu Info panel-nya bisa nongol di blog sobat,
Masuk ke:
> Tata Letak/Rancangan
> ADD New Widget
> Tambah Gadget
> Pilih HTML?Javascript

Kemudian Masukan kode dibawah ini:

<div class='panel'>
<center><font size="1"><a href="http://kode-blogger.blogspot.com/2011/05/membuat-vertical-sliding-info-panel.html"target=_blank"><div style="color: #444444;">
<span >make own</span></div></a></font></center>
<h3>Selamat Datang Di Kode Blogger [Dofollow]</h3>
<p style="text-align:justify">Salam Blogger | Senang rasanya sobat blogger sudah bersedia singgah disini. semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya, dan apabila berkenan silahkan berkomentar dan follow blog saya, dengan harapan kita sebagai sesama blogger bisa menjalin silaturohmi antar sesama blogger.
<br/>
<a title="Viyan Pradita" target="_blank" href="http://www.blogger.com/profile/08113139411481282535">Selengkapnya tentang saya</a></p>
<h3>Sekilas tentang penulis</h3>
<img width="73px" height="73px" alt="Viyan Pradita" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeStBu9mWja7VolwU8-74eaOiSXaOL0RzVeKghViqa40Ec87XU036ZxYeFnK90fALxPy4MMdB4-1RRbxFsVxNnHSQ0Uxgt2apB_Ak_H9Tg_5DfDfmMfTop3Mn3cq7d-yTvFcvrM9o2cIQ/s320/pepenk.jpg" />
<p>Nama Saya Yus Aviyan
<br/>
Saya seorang mahasiswa disalah satu perguruan tinggi di Yogyakarta</p>
<div class='columns'>
<div class='colleft'>
<h3>Social Stuff</h3>
<a href="feeds/posts/default"><img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOsflWn2eHpr_tJpkogBS2kiMdB38Ync5C6mB6dAeUeC_6Rek8I4LtxoqspL8jDqEdm5-px_N9hmngxGffUjOD1VNtZVVARuClPwLv9XwOsm4ahoupDWB-g6Z4YQGwESe573o4i1U4eg/s320/r.png" /></a>
<a href="http://www.mybloglog.com/buzz/members/08113139411481282535/"><img alt="mybloglog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAjIDrBAHqsNtJRbDGYuU88aK3X5h3OkuUReqU8nUz7bMM61Gjc14lxC5lXHjcnZj8khyW7fwJ7gNL1Pijbb_iLsBNGMt3ECSAqpHaLWoT9Ld95EzsGx8s45x9JFusMnvjCZTiIEqVHhg/s320/l.png" /></a>
<a href="https://twitter.com/#!/viyan_padita"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0k7YZKjzF5rZToQQOPzJ6QGPb_tBdVolmA4ZpTSKkPvcMDIc9my1uImxcafiFX-lOKPjNUtjSfjC9LR2-GhJ4lR02Y22KaAgUj7Iuc4cq1jAIHR-dqywyRvGgXMFlpHmQ5FQ3OMxgkU4/s320/t.png" /></a>
<a href="http://www.facebook.com/fiyant"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyPjWLgykwb_3JqKflVBXYdFwm4_KH1IEpD-y2CLiEZR-r1Lmd92pnd9wc64qTH847falZd2Y5IDf5uiC8llodo1nFGK9QTrRq-PdYFm1QtWxkuMDXWSqC2RFgCBna7xHZCgylWkuxV5A/s320/f.png" /></a>
<a href="http://kode-blogger.blogspot.com"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5S64jcOy0q9GI91szVbxK_1HhHEIqLizlfTIEE3YzLwef5IZBLJPxj6APqa3-oUvm0eNT4U5Q0EW3rN3AAshDY7IUhOWPspqvDScxoOkjGG1YX4hD7e7aTc-WUbHuJ-ZJ33jGL6NlR0/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a>

Seppp sampai disini selesai sob, Simpan dan lihatlah hasinya.
Eittt... tunggu dulu, sebelum menyimpannya harap rubahlah untuk kode widget ditas, sebab nanti prifile sayalah yang keluar diblog sobat. hehehe :p


Tambahan:
BIla dalam pemasangan Info panel di blog sobat bermasalah? ini bisa dikarenakan kode.js di template sobat double, dan mungkin diblog sobat sudah tepasang kode jquery-1.3.2.js atau semacamnya. Untuk itu hapuslah salah satu kode.js tersebut.
jadi bila ditemplate sobat sudah terdapat jquery-1.3.2.js, maka sobat tidak perlu lagi menambahkan kode.js tersebut.
Ok... Selamat mencoba, dan semoga bermanfaat.