Beragam Pilihan Tombol Chatbox + Cara Memasangnya

Oke sobat blogger, kali ini saya akan share artikel tentang cara pasang chatbox di bagian sisi kanan/kiri blog dengan beraneka ragam jenis pilihan model, berikut langsung saja saya jelaskan langkah-langkahnya:

1.  Login ke dashboard blogger
2.  Pilih tata letak
3.  Add/tambahkan gadget
4.  Klik html/javascript
5.  Masukkaan kode script berikut ini: 

<style type="text/css">

#gb{
position:fixed;
top:150px;
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/AVvXsEinrvIwYTcJVXMwjW4wnEn-VKpntoDq6hR2IZJJ518IGJmpXwelpt3VfhRfmz6vJvIS7z3AwJQiyVmLzPTQ9EGu2KBFkODMreApP-TfbgBUy_YVePKGy7xITGLgWoRCnHcpjlcsqCzZIls/s400/cbred-LEFT.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">


KODE CHATBOX


<br />
<div style="text-align:center">
<span style=" color:#000000;">Get your <a target="_blank"href=" http://dhanynurdiansyah.blogspot.com/2012/12/cara-pasang-chatbox-banyak-pilihan.html ">own widget here! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>








CATATAN: 




1. untuk kode warna pink merupakan jarak chatbox dari atas, bisa diganti sesuai kebutuhan
2. untuk kode warna kuning merupakan pilihan tombolnya, silahkan diganti sesuai dengan kebutuhan, berikut saya berikan beberapa kode warna lainnya, silahkan dipilih sendiri
3. untuk warna biru, silahkan diganti dengan kode chatbox sobat
4. untuk kode warna hijau merupakan arah kemunculan chatbox, bisa kamu ganti dengan right bila chatboxnya kamu letakkan menempel di sisi kiri blog
5. untuk kode warna merah merupakan letak chatbox nya bisa kamu ganti dengan left jika ingin meletakkannya di sisi kiri blog







https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinrvIwYTcJVXMwjW4wnEn-VKpntoDq6hR2IZJJ518IGJmpXwelpt3VfhRfmz6vJvIS7z3AwJQiyVmLzPTQ9EGu2KBFkODMreApP-TfbgBUy_YVePKGy7xITGLgWoRCnHcpjlcsqCzZIls/s400/cbred-LEFT.png









https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrG9ylp7yKjS3z_YVIF7CLPhhfOcuZkkaW7rpwd1EGUOo9sjavVpB3l8mRUfqCnVxGk9oBXP6_oeBZbft7Hc-_oOM14JlwVQs_hyphenhyphenlkVTKSZ_n9HlzYjDtaMl5VEHstzTkpoeYhvSpbGrqO/s320/tabs.png















http://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgURQsvlFafb81QpVejS1s-zuBMfPguJKG8HB4NabdxKLEt1g4NYqfVOpQcU6TaR-GXmcLoY87CfcoBcbGmimGlTqdPkUpV96tIbFt87aOd_-Ztm9oWkdbouULj5yf1CKeHhGl53OhdpmT/









https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEduxZC8qv7CgcF4olRh29XRtJIsWPolg4_cPDPgmTrLjQ19Fd9Z-uajmxYsI1t2o9fBZwwek5Bg-I9-RwtVse8Zy2CjMbl-wEYYQ0sJiVxRe3M3r6GsIMbpHnXbNef4sWscu2ZmTiy0s/s1600/guest-book.png











https://sites.google.com/site/mujijayaganesha1/img/CHATBOX.png















https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmauOzLJrvfe-fB-VPDqeM2Dgjb-WXGDHqEGW02Cd0xeL2MeEsqtUgfe7njsrZtyzh90L-H4JjI0bffoDtSIn8A6-vWtrF2yKUe1uHdHGa4IS-6hZc3NQApLqddJGMZq9gNOGh9aIgpo8/s400/cbblue.png

https://lh4.googleusercontent.com/-zLl0PK2efX0/TgWyhYOla2I/AAAAAAAAARo/UQ80xw59L2M/CHATTING.png

http://i997.photobucket.com/albums/af96/fauzan_zifa/Untitled-1-11.png











https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqcEfeiDlR_KCEuPVXcDEejWFCWFo2gSuJey-pOoWr3qIxwELKR7WvMeOSMBtWbJTfhDQNjxq0M1b_PJD8WRW0YMNIR3CcB99PYu89CC-v4f5JnZSjOnoMHy49PceRUaGHshDAG19WLZOl/s1600/chatbox.png











http://i1244.photobucket.com/albums/gg561/ekhopalopo44/Guestbook_zps6d0e3aa6.png











https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFSt7lFkmJLgh7tu8svt-Uq_8CMSFNN5aVNQkJBDil175H2_JhDiLn3aWZiU4jRrNJ9O_iiPq9jm-7AK2z_FVSKpCTf7Fl3Mz0MskHX8flac3x57UIALY-4kaegY0zvRU1qAwYCITmbegJ/s1600/Tombol+Buku+tamu+keren.png

























https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYzqQnRFA7NYXIRtB40n1DL-ZSSlR3djX8T7mHCMdXDrr1BAdVgbwNp4iho0Ptf4MoEios-xzAybxfE6VcTqEFjdS8ruvAVvDNCtGZJwQXmNH3NC6cOvpKki4XuRHUrTAkrZATWWWRgNU/s1600/Teoringeblog-buku+tamu+3+(+64+x+244+).gif

SEKIAN SOBAT BLOGGER, SEMOGA BERMANFAAT

Share this post