ChatBox Slide Vertical dengan jQuery pada Blog

Tidak sengaja saya jalan-jalan ke salah satu blog sobat blogger Creating Website, dan saya tertarik dengan ertikel beliau yang menjelaskan tentang tips untuk membuat ChatBox Slide Vertical pada Blogspot.com. Tips ini berisi tentang cara membuat Chatbox/ShoutBox, atau dalam istilah gampangnya adalah buku tamu pada blog di sembunyikan dengan versi Slide Vertikal dengan menggunakan jQuery.

Mungkin supaya lebih jelas, bisa sobat blogger lihat seperti gambar di bawah ini:

Preview ChatBox Slide Vertical

Setelah melihat gambar di atas, mungkin sobat blogger sudah lebih mengerti dengan tujuan tips kali ini. Nah jika sobat blogger ingin menampilkan buku tamu anda sesuai dengan tips ini, pastinya sobat harus mengikuti langkah-langkah berikut ini:

1. Login ke blogger dengan account anda.
2. Pada dasbor blog sobat, silahkan beralih ke Edit HTML
3. Jangan Lupa Expand Template Widget
4. Cari kode ]]></b:skin> dan jika sudah ketemu, letakkan kode CSS berikut di atasnya.

.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}

5. Setelah itu, cari kode </head> dan letakkan kode berikut ini di atasnya.

<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/> 

Jika anda telah memasang script jQuery ini sebelumnya, silahkan lewati langkah no. 5
6. Kemudian, letakkan kode JavaScript berikut ini di bawah kode jquery tersebut.

<div class="panel">

Kode script ChatBox Anda atau bisa diganti dengan kode widget atau apa sajalah terserah.....

</div>
<a class="trigger" href="">ChatBox</a>

7. Setelah itu, silahkan Simpan Template blog anda, dan lihat perubahannya.
Semoga berhasil, dan mohon maaf jika ada kesalahan. (Jkt/2012)