Membuat Vertical Sliding Info Panel Dengan JQuery

Membuat Vertical Sliding Info Panel Dengan JQuery, yaitu kita bisa menulis info tentang blog dan penulis blog (yang membuat blog).. sepeti yang ada di blog ini, di sebelah kiri atas,
Untuk lebih jelasnya silahkan anda lihat gambar dibawah ini.

Sceenshot Vertical Sliding Info Panel Dengan JQuery

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/AVvXsEjY2mFVtYJJFtEWgNE2mslCyPxrE47hpkDO6znVO6ylprHQuc9BIBrjqMQakxQXXxJqcUQ5Gtxz-VDDYmnypEKm5C4wJZI89iVWyITCvHso8mGwhF8ewGlbSsbyWxfYCb6xgn2UAN2105g/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/AVvXsEjY2mFVtYJJFtEWgNE2mslCyPxrE47hpkDO6znVO6ylprHQuc9BIBrjqMQakxQXXxJqcUQ5Gtxz-VDDYmnypEKm5C4wJZI89iVWyITCvHso8mGwhF8ewGlbSsbyWxfYCb6xgn2UAN2105g/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/AVvXsEgHK5c6GZCB05Wfd9XqDUUcSTP-nBNrMTVAhobicBc5gaOjU8I3weMi5zi_twdIyave1mDGYUmWbhiXL3SMvCCEfRyk1SOVRCWTXIYMchEJmqXgSFy5NEp4iBY4MicjDf9TCvAFnUi-9P4/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://boyrohman.blogspot.com"target=_blank"><div style="color: #444444;">
<span >boyrohman.blogspot.com</span></div></a></font></center>
<h3>Selamat Datang Di Blog ini</h3>
<p style="text-align:justify">Salam Blogger | Senang rasanya sobat blogger sudah bersedia berkunjung kesini. Semoga saja Blog ini bermanfaat bagi kalian dan semoga kalian mendapatkan apa yang kalian cari di Blog ini. Terima kasih Telah Berkunjung Di Blog ini, silahkan tuliskan Komentar atau Kritik dan Saran anda terhadap Blog ini, Thanks.
<br/>
<h3>Sekilas Tentang Penulis</h3>
<img width="73px" height="73px" alt="Abdul Rohman" src="http://i1223.photobucket.com/albums/dd504/boyrohman/S4020414453.jpg" />
<p>Nama: Abdul Rohman, biasa di panggil BOY/Rohman
<br/>
Saya adalah seorang pelajar,  jurusan TKJ di salah satu SMK di BEKASI</p>
<div class='columns'>
<div class='colleft'>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a>

Silahkan anda rubah tulisan yang berwarna kuning di atas sesuka anda, karena kalau tidak di ganti, maka yang akan keluar adalah info tentang saya, dan tulisan/link yang berwarna pink itu adalah URL foto yang akan tampil pada info, ganti URLnya dengan URL foto anda...

Selamat Mencoba dan semoga berhasil