Cara Membuat ChatBox di Blog

Assalamualaikum Wr.Wb 

Hai para blogger sekarang saya akan share cara membuat ChatBox.

Untuk mempercantik tampilan blog nah bagi yang ingin tau cara nya 

ikuti lah tutorial ini ya :D
Ok ..

Cekidot... XD :D

1). Login dulu ke blogger.com
2). Di dashboard kalian klik Tata Letak / Layout

3). Klik Tambahkan Gadget, lalu klik add HTML/Javascript. 
4). Copas ( Copy Paste) kod dibawah ini :

<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/AVvXsEi-xznDn-jWymOTXEuO88bnc6m6K0lDDZ0mrv26ELshYg2xFOkh-rwArtGW-OR_hhAjvgbUPiNuJZ__47bY5rTZ_eyyYNesCd3di2FIxuaePnnB1Emtbsv2_zktQgn5cttUV1SvO2EiW1w/s1600/Bukutamu6.gif') no-repeat;}.gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style><br /> <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><br /> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <br /> <!-- BEGIN CBOX - www.cbox.ws - v001 --><br /> <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&boxtag=82bgvx&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&boxtag=82bgvx&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> <br /> <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="javascript:showHideGB()"><br /> [by :sasaha33] <br /> </a><br /> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script></div>

 5). Klik Simpan & Lihat Hasilnya.

Ok semoga bermanfaat.

Sumber : http://sasaha33.blogspot.com/2013/03/cara-membuat-widget-chat-box-di-samping-kanan.html