Membuat Panel Info Dengan Jquery

Panel Info merupakan widget yang digunakan sebagai media informasi kepada pengunjung tentang blog ataupun tentang author blog, didalamnya dapat juga disisipkan link menu, dan link kategori dari blog tersebut, dalam cara kerjanya, panel info ini dikemas dengan efek sliding menggunakan jquery, sehingga kesan dinamis yang dihasilkan lebih menarik dan juga akan tetap tampil melayang di sisi kiri blog, jadi tetap terlihat saat pengunjung melakukan scroll ke atas maupun ke bawah, untuk lebih jelasnya lihat screenshot berikut :

Untuk memasangnya ikuti langkah-langkah berikut :
1. Login ke blogger dengan akun anda.
2. Kemudian klik rancangan
3. Pilih Edit HTML, centang "Expand Template Widget"
4. Cari kode berikut ]]></b:skin> gunakan CTRL + F untuk mempermudah.

5. Kemudian copy kode dibawah dan letakkan 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 #444;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:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;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://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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: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://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

6. Selanjutnya cari kode </head> dan letakkan kode script berikut 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>

7. Terakhir cari kode </body> dan letakkan script berikut di atas kode tersebut :

<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Tentang Blog</p>

<h3>Author</h3>
<img height='73px' src='Url Foto Atau Gambar' width='73px'/>
<p>Tentang Author Blog</p>

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

<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>

<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/#!/nthoeng_twit' title='Twitter'>Twitter</a></li>
<li><a href='http://www.blogger.com/profile/xxxxxxxxxxxxxxxxxx' title='About Me'>About Me</a></li>
<li><a href='mailto:contoh@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

Pengaturan :

Teks warna biru : script jquery 1.2.6, jika di template Anda telah terdapat script tersebut maka tidak di pasang kembali.
Teks warna merah : Silahkan Anda sesuaikan sendiri, sesuai kebutuhan dan keinginan.

Semoga Berhasil !!!