Cara Membuat ChatBox atau Buku tamu di blog dengan Emoticon GIF Keren

Hallo sobat FS, mungkin postingan saya kali ini agak menyimpang. hehehe......... Kali ini saya mau share Emoticon GIF yang mungkin agan-agan ingin menggunakannya di ChatBox Blog masing-masing. Seperti yang saya pakai di Buku Tamu sebelah kanan.

Ok langsung saja langkah-langkahnya ialah sebagai berikut:

1. Buat dulu ChatBoxnya dengan cara masuk ke http://www.cbox.ws/ atau langsung saja klik di SINI
2. Buat akun sobat dengan cara klik SIGN UP
3. Kemudian isi borang pendaftarannya. (FREE GAN)
4. Jika sudah, Klik CREAT MY CBOX!
5. Aturlah Cbox sesuai keinginan agan. dari ukurannya, temanya, dll.
6. Jika sudah, Lalu Klik Publish.
   Selanjutnya tinggal di pasang di blogger agan.
7. Copy Scripnya, (disana tersedia 4 type scrip, saya sarankan yang INLINE (DEFAULT))
8. Sekarang agan masuk ke Blog sobat, lalu
9. Pilih Layout / Tata Letak
10. Lalu Tambah Gadget / Add a Gadget
11. Pilih HTML/JavaScript
12. Lalu letakkan scrip berikut ini.

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9fzrai64GCiAHHziqPlCdLPjCJqp-j6i_CLqAHI7H9L7qNgSrDO_Zoq3t9EoOJzYIGTiDYGzZ-WTxUjfrPi_1PCafzYYElWAROA688IaQ45VjA8eikdxFV-letS9DWyi8fv5MOaT9xtA/s1600/bukutamu2.gif') no-repeat; } .gbcontent{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </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">

LETAKKAN KODE CHATBOX YANG SUDAH AGAN COPY TADI KE SINI!

</div> </div>  <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

Keterangan:

Yang berwarna Merah bisa agan ganti dengan yang di bawah ini :

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf_LZZa06k3y4sBfKWpXzhync5JfcQvy3Cr41qIicqdyhPmbM1TdexoOhkdc8wSSuedrNJu8bLz9ivR2uWtd33XF_RvKaM3lq3NrJZJ2hsQGJBBKTjMIkXfPdg7H-oFd4AJ7ILNBOiLA0/s1600/Chatbox.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEins94nyRBwdGj8ILddgcmUz-SuAzUjAbXoXu3mziXnvXrm9YrLySbngWLE6sMRD2a0sUFETpN7IoGIOz-f_vctyko-SO1Cjmp-qmo4WYTAETcX3h6yLMxL5dLttyyLiobnBq2BHXfZATk/s1600/Bukutamu3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9fzrai64GCiAHHziqPlCdLPjCJqp-j6i_CLqAHI7H9L7qNgSrDO_Zoq3t9EoOJzYIGTiDYGzZ-WTxUjfrPi_1PCafzYYElWAROA688IaQ45VjA8eikdxFV-letS9DWyi8fv5MOaT9xtA/s1600/bukutamu2.gif
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHAPBsDWVoHspuXBrUQnqQZmjOAn1CunyHYGK9r-uUftQzAnZxjaozjUTPfZLRF4kD6Qw9cNRmRkw6qyRcrLL8Ob2NuKHtSIyD1e9UcfVTm2Cnuk_ebhUK8bfMPbCk2aLZgQQsPYFv6k/s1600/bukutamu5.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDW5jUZvwthubufwaiZXhpuV9IwFyydyXO2KJ-38sU2pmmAC6ZJNTgAkXPzmlnfo3j5_kkoHqT2Hayl7cDOqrsgG8Pf2EeutY_Ww4v66pzEV3dfgaMR_uV5BKAGs3lH-3n1fgPenBeaDA/s1600/2131wkl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDEUE3zJ6jMc3gRi2YHCZ09hKgmJiESet1kjkVEoa-MiT8zrjSXrDkmQudhLY2ry_hT1fwTkMAqcotYYb7gbU5vDIaLYxACv1MIxruMeYuAMOBCbtsPc5C-ii9lHxRUuxDu2U4x1p5cZc/s1600/bukutamu4.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-g64SfRe_QCfvZ3gviNBfbCKpzmKAFd3cazhA4joa4s3CR9piRiqXb1bDqVhAESezNYxhwRGWEfUlZrj-yGyXX2MirXGbrjYDCh-I0S9SNQf5jO2AThJ3ohs-vWT6aFUKpWUK0n81AGA/s1600/BukuTamu1.png

Agan tinggal pilih mana yang agan suka.

Selanjutnya Cara menambah Emoticon di Bawah ini ke Emoticon CheatBox: 

1. Klik kanan pada gambar di bawah ini, lalu
2. Klik "Copy Image Location"  
3. Lalu di halaman setting Cbox agan pilih "Options --> Smilies-->New Row"
4. Paste Image Location pada Kolom URL, tunggu hingga gambarnya tampil di sebelah kiri.
5. Masukkan code dan alternatif code sesuai dengan keinginan agan.
6. Jika sudah klik "save changes"
7. DONE

 

 

 

Terima Kasih atas Kunjungannya

Semoga Bermanfaat ^_^

Read More