Cara Membuat Chatbox/shoutmix bisa hide and show

Hy sobat IT kali ini admin mau ngeshare trik dalam ngeblog yaitu cara membuat chatbox atau shoutmix bisa show and hide. ShoutMix atau yg lebih di kenal dengan Chatbox ,sobat pasti sudah tau dgn Gadget yg satu ini. Bila sobat belum tau apa itu Chatbox silahkan lihat pada kanan blog saya , ada yg namanya chatbox bukan ? Nah kali ini saya akan menjelaskan cara membuatnya , so cekidot..

ShoutMix / Chatbox , jelas dari namanya saja sobat pasti sudah tau fungsinya bukan ? Yap ,benar sekali..widget ini berfungsi sebagai Chatbox bahasa gaulnya sih buku tamu ,hehe . Fungsinya ? Supaya para visitor/pengunjung blog sobat bisa berchat ria atau sekedar request dan meninggalkan jejak..hehe

Kenapa Hide and Show ? Chatbox disini melayang , bisa di tampilkan juga di sembunyikan ,hho

Contohnya ? Sobat bisa lihat punya saya , hehe . Langsung aja kali yah ? Oke deh berikut langkah-langkahnya..

• Pertama, silahkan sobat login ke akun sobat blogger masing-masing.
• Di bagian dashboard klik menu Design/Tata letak.
• Tambah Gadget.
• Kemudian Copy-Paste kode berikut di gadget baru yang telah anda buat tadi.

<!-- Begin Show Hide Floating - http://blog-techno-wld.blogspot.com--> <style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:550px; width:35px; float:left; cursor:pointer; background:url('http://i1233.photobucket.com/albums/ff398/Proid321/Chatbox.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent"> <!-- Kode Shoutmix mu Disini -->MASUKKAN KODE SHOUTMIX DISINI <div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [HIDE] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

Pada "MASUKKAN KODE SHOUTMIX DISINI" silahkan sobat ganti dengan kode ShoutMix punya anda.

Untuk tulisan yg saya beri warna MERAH bisa sobat edit/rubah sesuai keinginan sobat .

Example : "http://i1233.photobucket.com/albums/ff398/Proid321/Chatbox.png" bisa sobat ganti dgn gambar/icon Chatbox milik sobat. Dan pada "HIDE" silahkan sobat ganti dgn kata / bisa juga dijadikan gambar yg sobat mau..

Selamat mencoba...

Posted in: