Membuat Vertical Sliding Info Panel Dengan JQuery (Update)

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 (oEmar, & kawan2nya) 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.

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(http://3.bp.blogspot.com/-xVriNomN0QM/TcGZYgBZBhI/AAAAAAAAAo0/Eq6W8TAcO8U/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(http://3.bp.blogspot.com/-xVriNomN0QM/TcGZYgBZBhI/AAAAAAAAAo0/Eq6W8TAcO8U/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(http://4.bp.blogspot.com/-7z5GA-G6HtE/TcGaZLSwjiI/AAAAAAAAAo8/hoiwsj5T1aA/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

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 :

<div class='panel'>
<center><font size="3"><a href="http://www.olenc.co.tv"target=_blank"><div style="color: #7FFF00;">
<span >OlenC'z</span></div></a></font></center>
<h3>Welcome to my blog, I hope you are interested to visit again</h3>
<p style="text-align:justify">Regards Bloggers | It was nice to bloggers are willing to stop here. hopefully you can get what you need of this my blog. Thanks Has Visited In my blog, and if acceptable please comment and follow my blog, with our expectations as a fellow blogger can establish silaturrahmi among fellow bloggers.
<br/>
<a title="Cheliel Rahman" target="_blank" href="http://www.blogger.com/profile/01688679903745808485">Learn more about the author</a></p>
<h3>Overview of the authors</h3>
<img width="73px" height="73px" alt="OlenC'z_MATsDA" src="http://i1096.photobucket.com/albums/g337/Vilza_Net/FunPhotoBox062205s3wlbwuz.gif" />
<p>My name is Chaliel_Rahman<br/>
I am an operator in Vilza.net Kangenan Pamekasa, SMK MATsDA Year 2011 Graduates</p>
<div class='columns'>
<div class='colleft'>
<a href:"http://www.olenc.co.tv/2011/06/membuat-vertical-sliding-info-panel.html/">Klik Disini untuk mendapatkan widget ini</a>
<h3>Social Stuff</h3>
<a href="feeds/posts/default"><img alt="RSS" src="http://3.bp.blogspot.com/-76Zucz4bky8/Tc21ra3-lwI/AAAAAAAAArM/13nkYhZZWZ4/s320/r.png" /></a>
<a href="https://twitter.com/#!/DeOlenczaiv"><img alt="twitter" src="http://2.bp.blogspot.com/-KEgIbUnk2tw/Tc21rS3d0bI/AAAAAAAAArE/vJHksxtWCMk/s320/t.png" /></a>
<a href="http://www.facebook.com/DeOlenCz9BLenK4lWayZ"><img alt="facebook" src="http://2.bp.blogspot.com/-bcyUWAsCaxM/Tc21rDJyJiI/AAAAAAAAAq8/nIKR08D7G70/s320/f.png" /></a>
<a href="http://www.olenc.co.tv/"><img alt="HOME" src="http://4.bp.blogspot.com/-44mliT_w4HI/Tc21rDFEeoI/AAAAAAAAAq0/tAbFk-lDbKg/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.