cara membuat chatbox slider

cara membuat chatbox buka tutup slideshow , untuk demo dan contohnya bisa  dilihat sendiri di samping kanan bagastrickblogger ini. oke langsung saja kita bahas bersama tentang cara membuat chatbox buka tutup slideshow di blogger


1.) Baca basmallah
2.) Buat akun chatbox dulu, bisa menggunakan beberapa jasa chatbox seperti cbox,chatbox,atau jasa chatbox yang dikenal sobat
3.) Setelah itu daftar saja di salah satu jasa tersebut
4.) Setelah mengikuti beberapa langkahnya, sobat akan mendapat kode Chatboxnya, contohnya seperti milik bagastrickblogger :
5.) Setelah itu login ke akun blogger > Rancangan > Edit tata letak > tambah Gadget > Html/Text Javasript
6.) Masukkan kode ini di tempat kosong yang tersedia

<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/AVvXsEiJYRXmsoL14wTRQHHoFGwMDHXJJhUy93H4c3zxd3g4Y4vDf8DC0CXx_ga_RThPr-OB9_M0IlIos_dPjmGDdSjgWuXuhKDV-wgVlz9BJlGLr_BPw29sFU-Qn_LlT0J2z1eQbVoq91iQWNgM/s1600/cbblue-2.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">

GANTI KODE INI DENGAN KODE CHATOBOX SOBAT !!!!

<div style="text-align:right">

<a href="javascript:showHideGB()">

[tutup]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

7.) Ganti tulisan ganti tulisan chatbox disini dengan kode chatbox yang didapatkan sobat tadi setelah itu klik Simpan
8.) Lihat hasilnya
Berikut beberapa url gambar varian warna chatbox :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJYRXmsoL14wTRQHHoFGwMDHXJJhUy93H4c3zxd3g4Y4vDf8DC0CXx_ga_RThPr-OB9_M0IlIos_dPjmGDdSjgWuXuhKDV-wgVlz9BJlGLr_BPw29sFU-Qn_LlT0J2z1eQbVoq91iQWNgM/s1600/cbblue-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFZEnQUu64yHmDwGG-ThKkxLxPaEb8a9NOrL4I3mQMXU26fLuxLZJyIePBEy587pZWKOuGTSvou9XfTpHr9eBUCl8iM3mGjek_rnsj7qOM0RGxo_WEs4K6c_SCew-KnuN32hxl0nuYRRn/s1600/cbblue.png%20

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg687G9UdGt70CEfpO8vqMn887OZg1updt1rxwkibVxDklCKzN3MZHsj9ap5gyONf_HDsOTbyLDwX4vsRjX4Lw2JiZULKERUB86R8XNdbTE7gN_Avi-10hP01GoftlclcoDXw0DHfRJP7Ym/s1600/cbgreen.png%20

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwXwF0VbKGjZYcfaaLqzwsxyhKcUw2j_bDdq62HkA4YfgotrmmNiE8-Sm5PF4x_9oTYcCRvCyU1oAlc2_R8Bg90oGS826_BQu8ZBOAENZmhEJX0L2GDyfn9-jNahfm1zuquwLPF4DnF2Aa/s1600/cbyellow.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh52U7mjEcuMEjYzdDqvzHpyW2UAkPqw0sJpOp24OTVKCTsOg8dvenpa-DEld4JBZePN3qpzmzHyVyPceoqOwkd09Khsl5iKOgApJfketxzfeqaVn8u5bvgMAMf9cRpEKLtVecP_1AQ5Nrc/s1600/cbred.png%20

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNzKBlNj9KbWYzvn6wOoWMxw4VpZn0XZnnIUBm3UnQbc90yLMC9zDpCbkoUY1DRSH-lel55O92tqFFeGocU9ql_b017JtBZXcJ3nr9QpzdjpJtJXjASaav6R77XlXlKYc8yulREd_-lS9r/

http://i971.photobucket.com/albums/ae193/Zendrymaulana/Wallpaper%20For%20Template%20Blogger/Bukutamu6.gif

https://lh4.googleusercontent.com/-28NQT1tb3KA/T1dub83RP0I/AAAAAAAABVM/nFXGjaGiZrY/s800/Buku%2520Tamu%2520Biru.png

https://lh4.googleusercontent.com/-zBcQkdEpXkM/T1dub8XRthI/AAAAAAAABU8/rvj9VHOO3ig/s800/Buku%2520Tamu.png

https://lh3.googleusercontent.com/-
Z1fxhlvqeOM/T1ducoHlDLI/AAAAAAAABVE/AFtwHTnN9Hk/s800/buku%2520tamu.gif

https://lh6.googleusercontent.com/-6qlXHYzWTMU/T1duc2xbQhI/AAAAAAAABVI/NE_nP1mMakE/s800/bukutamu.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1qyke1LySMNKwkXVFws9ZYQXyfhMHs-jgiljhgBqt21Zsfz2YrtOo7hmQbdXBbPP9mNIzI9KCmirQRqj8ItJt6nhLMOy-1r1J4LDwahiFKIcs-IthwROVaG4zVf3yn52mAILWcSlrpd_J/s1600/cb2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKj0vHx3DOQIcaadgAk8Lx4k7W6crBO_KoweofCG2Xr4TOUx4-NiPI5U39zJr03NGhwYyLbJhPyMNy4l6wVdSIY9PPxrtzFtRnGSvewAmvC0QwxRKf7ggonNEgqkdBBLJqD6Uc8giVzLD/s1600/cb.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWoFZS3l88md7iaA4zRkjdgi2hFZHqoFBHgw_LSau45TCy3rpjh1nNryDU2zMSBFmoBGLlo7PUs1dFCaSQ18IfVTHUAbRj260DNahngBCTTxxMqdlaaGaYBEniprQGqRwGJzf2YpOcZYqw/s1600/buku+tamu.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7iWP8Ufkz9TZy-AXQ9S4bffUPVsQCbaxjywYL-6HvUimPx4UEiNwuqhB2a5pXTzO5NV9SoQer5-Sia9P4nawJnyAebivHXULlzk-Oy1Bhyih1CYl5MhMkeWRV5MOTD7JEnNhIXoAglfg/s1600/Chatbox.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmmn9DFCtRtiP1m5kXk8d4kEK4bhchg2o15DIv-xnrXUub0S4SmtoRXW73DMuVtGcWjrkC4mAx1RBF00m28SP8cV03HfZXnn5sWbZbRjoFEx4DVWQENC6Fou7RWYQq7mg2j0yeuleYF8E/s1600/2131wkl.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzyqCa6GvRl3FtjrshkSMTilclHgcaNJMjll5w9fl7fqHUhViBlWrofKj-tCzD2N-Gl_ppyshT6YPcQEqeGPpBWzxAoHD0MGNwL9UKjJrxTco_e24jCKcpaqm7OFVdXc5W3K3JI7u5SOc/s1600/bukutamu4.png

http://i1220.photobucket.com/albums/dd444/septia_mujizat/blog/ButtonChatbox.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFhdJrHZvv1O2gEv1IRrFUA4aJkNPRXrrIH5o8cZeyXW5xNCm7uu4fjt8dWr91vStyqopFfJcXdrk6CM2xULhG5C8BXdVeRuBc3pysChUSWbuUFJz5t9Dh26Rw5j3kKTDeI0qCr7Squg/s128/guest-book.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3V0RGc3BRHyNzbGSzzkxSSBG_KbCPoQNfo9NcAy4pP9Glb_5sqNrvlXNYsXQQylZ6db9jfbJ3a3ixMPFCw27uRCmiwN5pJZtwHx1roYHxGbwbcEYkq4dMcpNuXQYg9Ef-o_Ld8PvePOo/s1600/bukutamu.png

Posted in: Blogger Trick