Banyak manfaat yang kita peroleh ketika terdapat kotak chat di blog. Seperti tanya jawab, atau sekedar memberikan sapaan ketika seseorang mengunjungi blog anda. Bagi anda yang ingin menambahkan widget kotak chat di blog (seperti gambar dibawah). Kali ini saya akan memberikan tips, cara menambahkan kotak chat di blog. Silahkan anda ikuti tutorialnya berikut.
1. Masuk ke dashboard blog anda
2. Pilih Tata Letak, lalu klik Tambah Gadget. Lalu masukkan kode HTML java sript berikut
<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4M0q0VK0HWccgQZlDsUA7cEwSWEwk93K3yqa2sRcB6RVJ7jkDNAajgT6Jp3VPxCzDxsFM8Q7EqSing4M7eW6iXqFATJ9hoK0PGvax8zxW6CtzFSYho1V9apq2j2uq7joloOqYZMTGlab/s320/tabs.png') no-repeat; } .gbcontent{ float:left; border:2px solid #666666; background:#F5F5F5; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <!-- Start HTML Code --><iframe title="Shoutbox" WIDTH="160" HEIGHT="400" src="http://shoutbox.widget.me/window.html?uid=qwx8n" frameborder="0" scrolling="auto"></iframe><br><a href="http://shoutbox.widget.me">Shoutbox</a> by <a href="http://cheatersnakcagak.blogspot.com/">[C] [N] [C]</a><br><!-- End --> <div style="text-align:right"> <a href="javascript:showHideGB()"> [close/tutup] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script> |
3. Dan klik save.
Kemudian lihat hasilnya