Cara Memasang Widget Chat Box Di Blog

Hai sobat bloger..
pasti kalian penasaran dengan tombol chat box yg muncul pada bagian kanan blog yg tersembunyi.
baiklah kali ini saya akan mengeshare tutorial Cara Memasang Widget Chat Box Di Blog.  berikut tutorial Cara Memasang Widget Chat Box Di Blog :

1. Masuk akun Blogger
2. Masuk pada bagian Tata Letak.
3. Klik tambah gadget di posisi mana saja.
4. Pilih HTML/Javascript.
5. Masukan kode html 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/AVvXsEi3h3iR3HGc7CSnBCRX8J9uTpxpqxAohVEzktz6t3snmQ13pPkT9Bg7jd7KchF3YYTmn8rI1YGiX66GUwF4pm5r-VbLjNvIti0G0vzl6RwRTYQDZGeql4ZjyQMdZgP8WlOk2xU623jTlI0/s1600/Bukutamu6.gif') no-repeat;}.gbcontent{ float:left;
border:2px solid #A5BD51;
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">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="250" height="305" src="http://www7.cbox.ws/box/?boxid=761843&amp;boxtag=82bgvx&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-761843" style="border:#DBE2ED 1px solid;" id="cboxmain7-761843"></iframe></div>
<div><iframe frameborder="0" width="250" height="75" src="http://www7.cbox.ws/box/?boxid=761843&amp;boxtag=82bgvx&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-761843" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform7-761843"></iframe></div>
</div>

<div style="text-align: center;">
<span style="font-size: 10px;"><span style="font-family: "trebuchet ms",sans-serif;"></span></span></div>
<div style="text-align:right">
<a href="#">
[by :indonesiabloginf.blogspot.com]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

6. Ganti URL gambar pada kode warna ungu dengan gambar yang sobat inginkan. Namun bila sobat tidak menggantinya hasilnya akan seperti berikut.

Url Gambar Lainya:

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwt9xoO_EhG9UuNo8aMGuaDIAMlexpzGhmRLJewqFQATCINpSvLe14hJ2JMZAuh1IUUC1KgcJAAETumflg_m32UB5ML6wxzynpnEnXkwwGANGTYTfatRm6Yv6-gX1bC7ClPEZ48OsyHN8/s1600/Chatbox.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUYoBjOaCE5-Mr0PqXmPT6k8H-4qz3PWt01YY3f8dpOh-kdIFeuaOLFFFj0H8soEyGqnU8bSidXMVVdC2S4vShgbD7u-KIJtz15fLF0I2h3LwBvBfIRrfd7wLF8yHXJCY_SC-7n9tkuRs/s1600/Bukutamu3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZhI9-VGagf6sUI7Yxyjp36VJXwGfiWQCq16HUcjDsCZWx9E94G9Dq0jFpJ5KgIFZBSQ09MvQV9APv2-zdI_NyQgZ0XHVUBhpk1IoO3v0ws3hyphenhyphen7Dt62qJRRy8wo_coqwG8yG6gHA0G22M/s1600/bukutamu2.gif
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIDD0bZZyC_VA_ekW-xtaFOmmXu9gPrzbSqr85NKEP8iqvph8rxy6K0lgWDdTShn7qc-tNa1L03XubOvPaRV4x3wmKPUuzBWvlzr7eWVWAv80NTAHdAHhIk442Py3ddZKxo5jFXGYuzlI/s1600/bukutamu5.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjng0bD3TdBirjV5Ti-EQFfy3XyJZO8h9keDANGkF7a9uLMBKcvXdAQf1nNI4T9F82BkIEi0QGIuVSU3x8cdTc1sa1xKVrVshlHCW5BhO0ErrYhfvoehz3PunyGTPlrYGmfajySvvWZ7c8/s1600/2131wkl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNlez1dB3i-E2vVsLjYP6uyQDlhlmU_6uQcUuwzbHgWAMKhIZyO6tJD1EpgXRydeCHdGDgHybhQtDv2dLo_H6AgdPQhWXz0hZPMIilIIUw1D_tQsaWUgiXR-uk7o5Ha9Wmtel1iYUmcjk/s1600/bukutamu4.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWkQ7IPqda4SMVEoue5lHzwN7zh2EZ7_LY27Uno_ajZOWwpoP9L2HWRGAv_Oj6aBB0TIA_epIPqKS_oE93YYfY3k-b6Ni_XPzV7-hIc6UqPyHiZaCv0w7tF_ykuSSmT5AEypJN0QLdQw/s1600/BukuTamu1.png

7. Klik Simpan dan selesai. Lihat Hasilnya.
Sekian dari saya &Selamat menjalankan ibadah puasa >Semoga bermanfaat ia gan^^