Membuat Chatbox Vertical Sliding Panel

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode seperti ini </head>
    Lalu taruh Script Javascript dibawah ini tepat diatas </head>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

7. Lalu cari kode ]]></b:skin>, dan letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

.panel{position:absolute; top:50px; left:0; display:none; background:#000; border:1px solid #111; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; width:330px; height:auto; padding:30px 30px 30px 130px; filter:alpha(opacity=85); opacity:.85}
.panel p{margin:0 0 15px 0; padding:0; color:#ccc}
.panel a, .panel a:visited{margin:0; padding:0; color:#9FC54E; text-decoration:none; border-bottom:1px solid #9FC54E}
.panel a:hover, .panel a:visited:hover{margin:0; padding:0; color:#fff; text-decoration:none; border-bottom:1px solid #fff}
a.trigger{position:absolute; text-decoration:none; top:80px; left:0; font-size:16px; letter-spacing:-1px; font-family:verdana,helvetica,arial,sans-serif; color:#fff; padding:20px 40px 20px 15px; font-weight:700; background:#333 url(images/plus.png) 85% 55% no-repeat; border:1px solid #444; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; display:block}
a.trigger:hover{position:absolute; text-decoration:none; top:80px; left:0; font-size:16px; letter-spacing:-1px; font-family:verdana,helvetica,arial,sans-serif; color:#fff; padding:20px 40px 20px 20px; font-weight:700; background:#222 url(http://i785.photobucket.com/albums/yy131/djnand/plusbutton.png) 85% 55% no-repeat; border:1px solid #444; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; display:block}
a.active.trigger{background:#222 url(http://i785.photobucket.com/albums/yy131/djnand/minusbutton.png) 85% 55% no-repeat}
.columns{clear:both; width:330px; padding:0 0 20px 0; line-height:22px}
.colleft{float:left; width:130px; line-height:22px}
.colright{float:right; width:130px; line-height:22px}
ul{padding:0; margin:0; list-style-type:none}
ul li{padding:0; margin:0; list-style-type:none}

8. Jika sudah, anda bisa meletakkan HTML dibawah ini pada Add Widget di Elemen Laman atau anda bisa meletakkannya diatas kode </body> di Edit HTML

<div class="panel">

Letakkan Script ChatBox Anda/ Bisa Diganti Dengan Tulisan Dan Widget Lain

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

9. Save

NB: Anda bisa membuat dan mendaftar ChatBox di Shoutmix

Good Luck

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post