Membuat Widge Chat Box Pada Blog

| Assalamualaikum Wr. Wb . Pada Kesempatan ini saya akan me share-kan tutorial membuat chat box . Ok Langsung Saja kita mulai. Berikut ini adalah cara-cara nya :

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/AVvXsEgF628Y7BldP94ZWD1dwi_Vh3Hkw5NN841S9Mj6zUGSlUPgC0eHCOmOrpshwbDG2iibNPZnvJtabRZUkdtw58MF2uDdwccK0er9nrEaUHgzR6kgxyzaDUkOXPCamxOEZ7HLF_AQeIvZTQA/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">


<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>

<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()">
[by :sasaha33]
</a>
</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.

untuk ganti gambar Tombol Chat Box nya, ikuti cara-cara dibawah ini :

1). Cari kode background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF628Y7BldP94ZWD1dwi_Vh3Hkw5NN841S9Mj6zUGSlUPgC0eHCOmOrpshwbDG2iibNPZnvJtabRZUkdtw58MF2uDdwccK0er9nrEaUHgzR6kgxyzaDUkOXPCamxOEZ7HLF_AQeIvZTQA/s1600/Bukutamu6.gif') .

2). Lalu Kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF628Y7BldP94ZWD1dwi_Vh3Hkw5NN841S9Mj6zUGSlUPgC0eHCOmOrpshwbDG2iibNPZnvJtabRZUkdtw58MF2uDdwccK0er9nrEaUHgzR6kgxyzaDUkOXPCamxOEZ7HLF_AQeIvZTQA/s1600/Bukutamu6.gif , ganti dengan kode-kode dibawah ini :

Url Gambar Lainya:

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieG2hlzDqpU_hCQstJjLGvLf5UDIv3VodhD2aHNEGiQwA_eSo7_yUyUeb9YJdyaV7Mj2DvHKVTXAbJVRC9Zl0b-KSEzeINANVazZAhyphenhyphenQImy25jcp-accfnjnVaN1u5H0HSV7HD1Gp4amI/s1600/Chatbox.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeYA1Oett6pncfhOX0RHDSN7e_e9cKiEMIt3XLRUxo0GfyoZ13hVqajW3U2SQvpM84PO0KquNoyF97tiU7EehtG457cmBE7dJN1oixmX73nitfVlA5Sl_E-0gCcxu2vVuKE27VLiV1HU/s1600/Bukutamu3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieiQWpS3GL9KZuRF-p0lR9BaKC_B4Li2U3CN1QVnkXAQqR2Cw2ft_3j9O80FDQeWejTLLtdMji0gbxD711VvGHnUQ6j448rzbgmzicqyvR5xblFu75uQGYROj7e2j64zTA71qEbs9z240/s1600/bukutamu2.gif
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPz5PvthL9aahSPPXTlwFE4GFQ0saAaKzkPK1V7sOj51jra3AXs5BhLKpgAnEZCqbLab07gUuJ0Csg5L8qS3odO463-qrGyUlU0izrbiZhKTbt7gz9Z9F1CqUI-1SVsJo9mie45jVKu88/s1600/bukutamu5.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEu53iL5rAKPnKbus0DsyIa0FerRtmLBPSeqxUiwGGrxIyqaeqJLK5gtEwXXkrCxIoXWihTbSltXiXhcJ0LEf2sBzzI4yKPKsmFWpyoVzlRC4cxp3SVAI1xmgHXoNu98ZAYB3WpQ7toq0/s1600/2131wkl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMelx6zGX_Y0Qtq_rRbTDVJqlWdkqUSnMkShafcCNzY6-HdpvBdzTkqaGa2GqIStRwwoZYrFqKkkOUcCQH-pZbLS4CwV37VkOeVDoRRo6XGEXqLSpb3tl6aK_sYv8x90PxRy32dX5bjG4/s1600/bukutamu4.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt9r5Fmu50NqItjy_k4z-d6x0FAoiZRm2dSsQO09pjzpIUrT9T8GHnejQefL_fBo8JTfEXdpl3cega3aA3ec59MsmFQu_F5O2GKYs3zDQ1LbnSHnTvIAqvPXc8NeG5lCdfE6OOR-8JYfM/s1600/BukuTamu1.png

Sobat tinggal pilih mana yang sobat suka. Jika selesai lihat hasilnya, semoga info ini bermanfaat dan mudah-mudahan berhasil.

0 komentar:

Poskan Komentar

- See more at: http://regibrader-free.blogspot.com/2013/02/cara-memasang-widget-chat-box-yang_18.html#sthash.KsMJKhoE.dpuf

Url Gambar Lainya:

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieG2hlzDqpU_hCQstJjLGvLf5UDIv3VodhD2aHNEGiQwA_eSo7_yUyUeb9YJdyaV7Mj2DvHKVTXAbJVRC9Zl0b-KSEzeINANVazZAhyphenhyphenQImy25jcp-accfnjnVaN1u5H0HSV7HD1Gp4amI/s1600/Chatbox.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeYA1Oett6pncfhOX0RHDSN7e_e9cKiEMIt3XLRUxo0GfyoZ13hVqajW3U2SQvpM84PO0KquNoyF97tiU7EehtG457cmBE7dJN1oixmX73nitfVlA5Sl_E-0gCcxu2vVuKE27VLiV1HU/s1600/Bukutamu3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieiQWpS3GL9KZuRF-p0lR9BaKC_B4Li2U3CN1QVnkXAQqR2Cw2ft_3j9O80FDQeWejTLLtdMji0gbxD711VvGHnUQ6j448rzbgmzicqyvR5xblFu75uQGYROj7e2j64zTA71qEbs9z240/s1600/bukutamu2.gif
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPz5PvthL9aahSPPXTlwFE4GFQ0saAaKzkPK1V7sOj51jra3AXs5BhLKpgAnEZCqbLab07gUuJ0Csg5L8qS3odO463-qrGyUlU0izrbiZhKTbt7gz9Z9F1CqUI-1SVsJo9mie45jVKu88/s1600/bukutamu5.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEu53iL5rAKPnKbus0DsyIa0FerRtmLBPSeqxUiwGGrxIyqaeqJLK5gtEwXXkrCxIoXWihTbSltXiXhcJ0LEf2sBzzI4yKPKsmFWpyoVzlRC4cxp3SVAI1xmgHXoNu98ZAYB3WpQ7toq0/s1600/2131wkl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMelx6zGX_Y0Qtq_rRbTDVJqlWdkqUSnMkShafcCNzY6-HdpvBdzTkqaGa2GqIStRwwoZYrFqKkkOUcCQH-pZbLS4CwV37VkOeVDoRRo6XGEXqLSpb3tl6aK_sYv8x90PxRy32dX5bjG4/s1600/bukutamu4.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt9r5Fmu50NqItjy_k4z-d6x0FAoiZRm2dSsQO09pjzpIUrT9T8GHnejQefL_fBo8JTfEXdpl3cega3aA3ec59MsmFQu_F5O2GKYs3zDQ1LbnSHnTvIAqvPXc8NeG5lCdfE6OOR-8JYfM/s1600/BukuTamu1.png

kalian tinggal pilih mana yang kalian suka.

3). Klik Simpan & Lihat Hasilnya

~~Catatan :~~ Kode Yang Berwarna Merah ganti dengan kode Chatbox yang punya kalian

Sekian dulu dari saya, semoga info ini bermanfaat dan mudah-mudahan berhasil.

Sholahuddin Blog

Other Menu

6/24/2013