Cara membuat widget CHATBOX di samping kanan blog

kali ini saya akan share cara membuat widget CHATBOX di samping kanan blog. yaudah gak usah basa basi yang gak penting :D langsung aja nih

>


1.klik TATA LETAK / LAYOUT
2.klik Tambahkan Gadget (terserah kalian mau di tambahkan di kolom mana saja), Lalu klik  HTML/ JavaScript.
3. Copy paste code di bawah ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:120px;
width:40px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQVUvq8uDq2TB7MgHnOduPiBYdAM3hYOhSmzdM91_x5XEayF-Oey255n8E5GAAKm9d9-1GouRPJCiEdD-O8aq5sWPzVp9qq8U6xNBIm8Z4T1wGIcqb2t36gskhADGr6eQiAbbRLdI3CKs/s1600/Chatbox.png')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="325" src="http://www4.cbox.ws/box/?boxid=4154762&amp;boxtag=r18a70&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4154762" style="border:#14FF3E 1px solid;" id="cboxmain4-4154762"></iframe></div>
<div><iframe frameborder="0" width="250" height="75" src="http://www4.cbox.ws/box/?boxid=4154762&amp;boxtag=r18a70&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4154762" style="border:#14FF3E 1px solid;border-top:0px" id="cboxform4-4154762"></iframe></div>
</div>
<!-- END CBOX -->
<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 :famzjunior.blogpsot.com]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

4.klik simpan dan lihat hasilnya

Untuk ganti gambar tab CHATBOX nya ikuti cara di bawah ini

• Cari code background:url ( tulisan berwarna biru ) ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQVUvq8uDq2TB7MgHnOduPiBYdAM3hYOhSmzdM91_x5XEayF-Oey255n8E5GAAKm9d9-1GouRPJCiEdD-O8aq5sWPzVp9qq8U6xNBIm8Z4T1wGIcqb2t36gskhADGr6eQiAbbRLdI3CKs/s1600/Chatbox.png')
dan code tersebut ganti dengan gambar yang kalian inginkan , berikut code2 untuk gambar lainnya :

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQVUvq8uDq2TB7MgHnOduPiBYdAM3hYOhSmzdM91_x5XEayF-Oey255n8E5GAAKm9d9-1GouRPJCiEdD-O8aq5sWPzVp9qq8U6xNBIm8Z4T1wGIcqb2t36gskhADGr6eQiAbbRLdI3CKs/s1600/Chatbox.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Uq9niUqh9s4GyJ-2TmmbnAxU6BkFOQxAvdYimMjl7lBnzTeHyHHezFoQ-dw9ERdnIeUUYZkIcd49DsWYqCy9pRK6g_uoe9aPcHPo1nOcDJBjZ3UrPuVcwY0tOX2A8yuv8I_dlaEL6Ds/s1600/Bukutamu3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJt7Eu-xgzssrFovkYEzh4GtNRp7bYLjiKs-ZzGZCvNIN2IYPAiDw-b6Filg05gjJ8h6ugqnrReBGSxO4EBJU9fA0MTxSN7HEZunb-6ax7FXJh6GfxUGro6DkQ98o6sB_K4kngE9rpI14/s1600/bukutamu2.gif
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBWH9abjnNiiofHhEAMqAwgB0B2yABvLAumxtvmk9ECbwqZuHwNRgRMfH3U0-9eXtgr7h0ZZ6WDRSNBwOO2OA2pb9j8mgFyZV6k7OztdjFU8O0zQAm9TzeqsXL-WofFVkqorPdoFPWyA/s1600/bukutamu5.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2txxrQFMccnuz4EepkNMskXyj16AWcxH7MTRkElNVt_baJs20y7byv2noobKciREvA6Y2fkj25R0ufobmT1QveoXjGcOpSt5Aqq8E3sIlb1-PbqUxghmHeP31JV0-L7E8d_B4IpE1iM/s1600/2131wkl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmDMG4fnwX_7tsdQcBWnc8ElxpUZrGgiEzEW7HkV1bw7Hfz-xe6cqv1nwZdWKoi6sbzT1Cf0tt1JSFQSfNkPoYOBJmZzkd8CNYmpA_kFj8a2gevtJNWVLSw-lqylgZGpTdNb0QMNkaB4Y/s1600/bukutamu4.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnP8Amk8GUysDxxZ7o3ck-3gCi8a2ybKbIE3lBaX86AuuDUCqKCpQcnl1WB-M5qfd_jhVaAKF3DxQm36jRi3lq0Q7O4AnWbPgISl7A43QKVCjjsA6uTEz1l9EJnrYWyECF7T4QZy96XYA/s1600/BukuTamu1.png

Catatan : Untuk code yang berwarna MERAH , ganti dengan code Chat box punya kalian :)
    Untuk code yang berwarna HIJAU itu resolusi untuk tab tulisan chat box , bisa kalian ganti resolusi nya apabila tulisan chatbox tidak sepenuhnya kelihatan di samping kanan blog kalian.

Mohon maaf bila ada salah kata, namanya juga manusia :P , semoga post saya kali ini membantu , good luck !