Cara Memasang Chat Box Di Blog

Guys Apa Kabar Gimana baik kabar Blogger nya nih gw akan share sedikit nih untuk para Blogger yg mau memasang Chat Box Di Blog (Buku Tamu) mari kita silahkan pergi ke TKP untuk melihat postingan gw...

1. Buka Blogger anda

2. Blogger Dashbord>Tata Letak>Add Gadget>HTML/Javascript

3. Copy/Paste Html Ini 

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje6fbtFVcc-QlZf0WCcYDBoJQFrbMZY9_nd-gEZ_4hblElyD0Ccld50MSD7NsoLwteqzuxQkOWkJkBrOfGkYNcEYFaYaKU5bfE7C0wQMYaDXw1wOZVgPddSPzqP5ZmqLSRNEfsAh017hyJ/s1600/cbblue.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()">
 </div>
<div class="gbcontent">
<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www4.cbox.ws/box/?boxid=4158960&amp;boxtag=3zc3hr&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4158960" style="border:#ababab 1px solid;" id="cboxmain4-4158960"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4158960&amp;boxtag=3zc3hr&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4158960" style="border:#ababab 1px solid;border-top:0px" id="cboxform4-4158960"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://tutorkeren.blogspot.com/2012/12/cara-membuat-chatbox-autohide-di-blog.html"> widget! </a></span>
</div>
</center>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

4. Silakan ganti-ganti sesuka anda yg udah saya warnain

5. maaf kalo ada yg kelewatan ^_^

6. Enjoy....

Sekian Dulu Dari Saya Semoga Bermanfaat Artikel ini Dan Bisa Menambah Wawasan Anda Terima Kasih Telah Mengunjungi Blogspot Saya Wassalamualaikum Wr Wb