Menambahkan Chatbox

Pererat komunikasi Anda bersama visitor, dengan menambahkan sebuah chatbox. Fitur satu ini akan sangat bermanfaat, terutama bagi anda yang memiliki blog yang ramai dikunjungi.

Chatbox memang bukan lagi hal baru di kalangan para blogger. Namun, chatbox ini memiliki sedikit keunikan bila dibandingkan dengan chatbox-chatbox umum lainnya.

Chatbox disini dapat disembunyikan ketika tidak sedang digunakan. Chatbox disini juga dapat digunakan tanpa perlu melakukan registrasi sehingga lebih memudahkan siapa saja untuk langsung menggunakannya.

Sediakan sebuah file gambar yang akan digunakan sebagai tab chatbox terlebih dahulu. Anda dapat membuatnya sendiri dengan file tipe GIF, PNG atau sejenisnya.

Bila anda belum ingin membuatnya sekarang, berikut contoh gambar untuk chatbox :

Kemudian upload file tersebut di penyedia hosting gratis dan catat URLnya. Setelah chatbox tersedia, mari kita mulai pemasangan chatbox.

1. Kunjungi Tata Letak. Pilih Tambahkan Gadget, kemudian HTML/Javascript. Anda bebas memilih bagian manapun karena letak chatbox juga tidak ditentukan dari letak petak yang dipilih.
2. Copy Kode : <style type="text/css"> #hitsukeFX{ position:fixed; top:150px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:300px; width:30px; float:left; cursor:pointer; background:url('URL tab') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #2389ba; -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+")", 5);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent">
   
   
   <!-- Start HTML Code --><iframe title="Shoutbox" WIDTH="160" HEIGHT="260" src="http://shoutbox.widget.me/window.html?uid=2e0xj" frameborder="0" scrolling="auto"></iframe><script src="http://shoutbox.widget.me/v1.js" type="text/javascript"></script><br><a href="http://shoutbox.widget.me" title="Shoutbox Widget">Shout</a><a href="http://shoutbox-tutorials.blogspot.com" title="Shoutbox Tutorials">box</a><br><!-- End -->
   
   
   <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script></div></div>
   
   Ganti tulisan berwarna merah dengan URL file gambar yang akan dijadikan tab chatbox. Angka warna biru berfungsi untuk mengatur seberapa tinggi letak chatbox.
   Kode warna ungu adalah kode yang menentukan warna border. Sesuaikan dengan tema desain yang diterapkan pada blog Anda. Demikian juga kode warna hijau yang berfungsi menentukan warna background.
   
   
    Paste - kan seluruh kode yang telah disesuaikan kedalam kolom HTML/Javascript.
   
   
   Simpan perubahan.
   
   

   Daftar Pustaka

   Lea Willsen. 2013. 50 Trik Modifikasi Blogger-Blogspot. Jakarta: PT Elex Media Komputindo.