Cara Membuat ChatBox Autohide di Blog Anda

Artikel terkait : Cara Membuat ChatBox Autohide di Blog Anda

chatbox,tutorial,blog,blogger
Chatbox atau biasa kita sebut buku tamu merupakan widget yang penting untuk kita pasang pada blog kita. Penggunaan Chatbox atau buku tamu adalah untuk memberi jejak bagi pengunjung yang mengunjungi blog kita. Nah, kali ini saya akan membahas total tentang Cara Membuat ChatBox Autohide di Blog Anda  atau buku tamu yang bisa Autohide hanya dengan dilewati oleh pointer mouse. Untuk demo anda bisa klik link dibawah ini.


Mau tau cara membuatnya? Lansung saja kita simak.
  1. Login ke akun Blogger anda.

  2. Pilih Blog yang anda ingin edit.

  3. Nah, setelah itu klik Tata Letak (pada tata letak ini anda akan mendapatkan layout tata letak blog anda, silahkan anda pilih dimana letak yang cocok untuk Chatbox ini)
 tutorial blog,chat box,buku tamu,widget blog

Catatan : Jika memakai Blog Wordpress anda hanya perlu membuka Dashboard >>> Appearance >>> Add Widget, nah setelah itu silahkan untuk menaruh Chatbox dilayout yang anda inginkan

4. Setelah itu klik tombol Tambah Gadget, gadget yang ditambahkan adalah gadget tipe HTML/JavaScript

5. Nah, tinggal masukkan kode scriptnya aja. Berikut adalah kodenya.
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://3.bp.blogspot.com/_GmDoFC87tnc/S9mFR0N8DLI/AAAAAAAAAfk/HRgxuRNSsWk/s1600/cbblue.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()">
 </div>
<div class="gbcontent">
<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www4.cbox.ws/box/?boxid=4158960&amp;boxtag=3zc3hr&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4158960" style="border:#ababab 1px solid;" id="cboxmain4-4158960"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4158960&amp;boxtag=3zc3hr&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4158960" style="border:#ababab 1px solid;border-top:0px" id="cboxform4-4158960"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://tutorkeren.blogspot.com/2012/12/cara-membuat-chatbox-autohide-di-blog.html"> widget! </a></span>
</div>
</center>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>
Catatan :
a. Kalimat yang diberi warna oranye, bisa anda ganti dengan URL gambar anda sendiri.
b. Kalimat yang diberi warna merah, silahkan anda ganti dengan kode script milik Chatbox anda.


6. Terakhir tinggal klik Save

Berikut adalah cara-cara untuk membuat Chatbox Autohide pada blog. Saya berharap artikel Cara Membuat ChatBox Autohide di Blog Anda dapat bermanfaat bagi kita semua. Happy Blogging !!!!

Artikel Tips Optimasi Blog | Cara SEO Web | TUTOR KEREN Lainnya :

50 komentar:

  1. warna icon chatbox nya tetep hitam putih ya??bisa diganti nggak??

    terima kasih atas petunjuknya gan ^_^

    ReplyDelete
  2. bisa kok gan, itu agan cari aja kode warna yang tertera(contoh: #00000) baru agan ganti sesuai keinginan.

    ReplyDelete
  3. Thanks gan mampir ke blog ane
    http://onlyreadourblog.blogspot.com/

    ReplyDelete
  4. mampir lapak ane min :D <a href='exactx2.blogspot.com>exactx2</a> skalian kalo boleh backlinkan? kalo boleh shout di buku tamu ane gan :D

    ReplyDelete
    Replies
    1. yoi gan, makasih dah mau berkunjung.

      Delete
  5. I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often. United Gold Direct , a company who will assist and guide you through the investment process and make some productive results in your investments. If you are still trying to look for an investment company who will make your investments productive, then you shall not look anymore, because United Gold Direct is here to provide the ultimate service you deserve.

    ReplyDelete
  6. manatap gan,.. ane coba dah,.
    kunjungan balik ya http://rifnotes.blogspot.com/

    ReplyDelete
    Replies
    1. makasih gan. silahkan dicoba kalo ada masalah komentar balik aja gan.

      Delete
  7. Mantab gan, ...ditunggu komenttarnya gan di blog saa

    http://seo-etc.blogspot.com/

    ReplyDelete
  8. Thaks atas infonya gan :)

    mampir yah >>>> http://projectfamily42.blogspot.com/

    ReplyDelete
  9. keren gan .
    kunjungin balik ya .
    inspirasi-software.blogspot.com

    ReplyDelete
  10. Ane coba ya gan.. makasih bnyak sharenya keren abis..

    mampir ya ke blog ane masih baru sepi pengunjung hahaha

    http://terasbursasaham.blogspot.com/

    ReplyDelete
  11. gan kok udah langsung ada tulisannya sih gan
    bisa di ganti gak supaya gak tulisannya ?

    ReplyDelete
  12. @dafi kodenya yang saya tandai warna merah itu agan ganti dengan kode cbox agan sendiri, dapatkan kode tersebut di www.cbox.ws

    ReplyDelete
  13. kunjungan siang bolong gan... Follow - Join this site back yaa....
    http://lipuuhulondalo.blogspot.com/

    ReplyDelete
  14. bagus postingannya, main ke sini dong sapa tau mau putih wajahnya www.creamputih.blogspot.com

    ReplyDelete
  15. makasih gan.......
    ditunggu kunjungan baliknya
    http://gilangfirdauz.blogspot.com/

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. ijin copas gan mantap cbox media silahturahmi gan



    untuk semua butuh aplikasi kunjungi http://agribusinees.blogspot.com/2013/09/hirens-boot-cd-152.html

    ReplyDelete
  18. Terima kasih banyak gan !!! sangat bermanfaat bagi ane :D
    mampir ke blog ane gan " relent.blogspot.com "

    ReplyDelete
  19. blogwalking sob :D visitback www.imamaprilianto.blogspot.com ok?

    ReplyDelete
  20. jadi bagus posisi chat boxnya kalo pake auto hide. terimakasih admin jadi tertolong saya. karena mau pasang chat box juga.

    blog saya : http://infoloverz.blogspot.com/2013/11/Camera-co-id-Toko-Kamera-Murah-di-Indonesia.html

    ReplyDelete
  21. sangat membantu, sudah terpasang rapih diblog saya http://bakkalolo.blogspot.com/

    ReplyDelete
  22. mantap gan infonya!
    kunjung balik yah http://candramargarena.blogspot.com

    ReplyDelete
  23. This comment has been removed by a blog administrator.

    ReplyDelete
  24. This comment has been removed by a blog administrator.

    ReplyDelete
  25. hmmzz,,,,pozang ne,,,,masukin kode scriptnya sndiri tu maksudnya gmn,,,?????
    bantu donk,,,

    ReplyDelete
    Replies
    1. script cbox yang anda dapat dari cbox.ws copy terus paste untuk menggantikan kode yang berwarna merah.

      Delete
  26. udah nyobain,bagus dan bermanfaat banget
    terimakasih

    ReplyDelete
  27. ane coba gan, terimakasih sharing nya

    kunjungi blog ane donk http://tvcendol.blogspot.com/

    ReplyDelete
  28. Sip gan Maju terus Kunjungi blog ane gan www.serbaguna00.blogspot.com thanks :)

    ReplyDelete
  29. saya coba kok gk bisa ya gan, di sini sudah lengkap saya isi scriptnya http://prntscr.com/4r8f11
    tapi di blognya nggak muncul chatboxnya http://gretonganforex.blogspot.com/
    atau karena pakai template dynamis jadi gk bisa ya?

    ReplyDelete
  30. Penjelasannya bagus dan detail menyertakan berbagai sumber yang terpercaya

    Info untuk menghasilkan uang (memonetize) dari blog, website dan bisnis online bisa belajar dengan mengklik link di bawah ini

    http://www.asianbrain.com/letter.html/903484

    ReplyDelete
  31. sangat membantu
    Visit Us : http://www.printerinstalls.com/

    ReplyDelete
  32. sangat membantu
    Visit Us : http://www.printerinstalls.com/

    ReplyDelete
  33. makasih mas, jadi tinggal ganti sama script chatbox doang ya.. sangat membantu
    http://herbalkuacemaxs.com/

    ReplyDelete
  34. salam kenal tutor keren dari bisnis abe..


    http://kokareyan.blogspot.com/2015/02/bisnis-abe.html

    ReplyDelete
  35. Thanks Gan atas infonya. Sudah saya aplikasikan di blog saya http://www.modalbiz.blogspot.com

    ReplyDelete
  36. trims.... gan,

    Mau nanya nie, kalau chatbox nya inginnya keluar dari sebelah kiri gimana caranya ???

    ReplyDelete
  37. thx infonya,kunjungi balik ya http://koekuy.blogspot.co.id/

    ReplyDelete
  38. Oooo, githu toh caranya. dasar saya emang GAPTEK. Tepok jidat. Malu, tutup muka dalam Mukena aja akh... dasar aku ndesooo

    ReplyDelete
  39. Waduh, kyk gini aja saya gak bisa... tak minum Susu Kambing dulu, biar tambah paham...
    Terimakasih manfaat banget artikelnya

    ReplyDelete

Berkomentarlah yang baik dan sesuai dengan isi artikel. Komentar yang berisi link aktif dan SPAM akan dihapus. Terima kasih atas perhatian anda.

Copyright © 2015 Tips Optimasi Blog | Cara SEO Web | TUTOR KEREN Artikel Inspiratif