Cara Membuat Buku Tamu Auto Hide Keren Di Blog

Caranya :

1. Buat akun dulu di cbox dan login dengan akun anda tadi
2. Pilih menu Publish!
3. Klik Copy to clipboard dan paste di notepad/gedit
4. Login ke blogger
5. Pilih Tata Letak
6. Kemudian klik tambahkan gadget dan pilih HTML/JavaScript
7. Masukkan kode di bawah ini :
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrpoeGwjr-I1-cFnTb7wAdG9_mjLqpwHXBz4txAVAskzF5urYbVhEKRWlg0M0iIBuYwCR5T2wnngqu7e_axfwFL0ajd9_sQB1TWWHKJu_RyNvEe4Ei1d0is_JgUpmuRKE98G3HeSh0RRGc/s1600/chatbox.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=4137964&amp;boxtag=nq1w2e&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4137964" style="border:#ababab 1px solid;" id="cboxmain4-4137964"></iframe></div> <div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4137964&amp;boxtag=nq1w2e&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4137964" style="border:#ababab 1px solid;border-top:0px" id="cboxform4-4137964"></iframe></div> </div> <!-- END CBOX --> <br /> <div style="text-align:center"> <span style="float:right; color:#000000;">Get this <a target="_blank" href="http://varozi.blogspot.com/2013/05/cara-membuat-buku-tamu-keren-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>
8. Ganti kode yang berwarna biru dengan kode buku tamu milik anda sendiri di notepad/gedit anda tadi
9. Simpan gadget anda
10. Untuk demo sudah saya terapkan di blog saya ini

Semoga bermanfaat, selamat mencoba...