Cara membuat buku tamu/ Gustbook auto hide di blog

Apa kabar sobat blogger???  hampir seminggu kagak posting nih, gara gara kurang enak badan.
nah kali ini saya akan membagi kan widget Gustbook auto hide di blog.
lansung aja yeee.
tapi bagi agan agan yang belum mempunyai chat box, bisa daftar dulu disini :

1. Langkah pertama sobat masuk dulu ke link ini== CHATBOX GRATIS 2012
2. Setelah sobat masuk.. DAFTAR dulu.. jangan lupa di isi data-datanya sesuai perintah..
3. setelah data di isi full klik 'create my CBOX"
4. setelah sukses.. PILIH PUBLISH (letaknya sebelah home)
5. nah disitu ada KODE SCRIPTNYA.. 
6. Salin kode tersebut.. langkah selanjutnya.
7. Sign in di blogger.com / blogspot.com.
8. Di blog sobat, klik pada Desain .
9. Klik Tambah Gadget .
10. Pilih HTML / JavaScript , klik kotak konten dan paste kode sobat di dalamnya dengan menekan Ctrl + V.
11. Simpan perubahan.
12. jadi kan...... :D

selanjutnya.. ane akan memberi trik bagaimana mengubah EMOTICON STANDARNYA menjadi EMOTICON kesayangan sobat.. tapi untuk tutorial.. ane kasih pake EMOTICON KASKUS y..
lanjuTKAN..

1. langkah pertama.. masuk ke CBOX sobat..
2. lalu pilih menu OPTIONS pilih yang SMILES
3. nah.. di bawah itu tersedia URL EMOTICON standard.. ganti aja URL itu dengan EMOTICON kaskus di bawah ini ..

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDu4xfRnc6HgBzy8668X5fzrd15ct-HHofpXasM03ZVyiGrJ-rl1In-snN8K-F1113RF4Dy-jWAIhHqMSK-i_VnFCQto4AGT5dGa2hQzcZQ8tfu4S9QQR_RiZojHNXBQykMTbDJ_Oe5dz/
2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_nXUbK4-7ldnC8SBvfLhqERHaBGJel8LEx-ui8U7PrzLEt3BA2gQWqTgEmGmGrCWjlkeQBsJlwnk8o6PPOOwwMiFfiVpySA6KRY2CQvw0KkGF7TBLuIGDm5lcvoqAfQ54cVlfAhkmFWAx/
3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpiUWJh9wIeNM9V3bJYeOiB9-3K9o8FsonzSAmtCmFFYzpWnD5JGfZuOU3SaDyO-cGLauWFaWBfktb4-Brn-xdsRSn9CggGgqddQKu-yXB5zl6bYwamBXPF6wFQcWRDY5s3N4P6rMbU0f7/
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglAhY-JoRdVlmI7XTL8AtrmXmW_pOGfONA4Wz3iaySFnz7U4Tks-WnvlKTK9j8IA_nTrOoWec-VvvqCSu5wA5sA1sztLolCzqzMGoOsoP_BGOuCiekAZ-a6f50ahnzuMaY3GsGHGEqVm6x/
5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju2dtVk7zEzJR2hseHP06bNG2FIoiH-R4fzUTSUnfhJIjm7mkp8bHrCg_c2VihHOiH8wEeoJH9VWnyBxRwNQLMPJ-ZlXAQElFcHgbowoZi_NzwOGQbFRGFX671dhfa4ODTj4ozHO-UGU7i/
6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp_7ErPdmv3N037MPcFJu5p3brdV0TSCPqW9LS_PJmpkDbLKhQplhX6jeGmHnVUCn_783ellvXaPtUhq2uSma5c7mMaECxT8YvRG1ZqaWB9QOg2Nn4XANAbgl4jfWp-UQZBgzKx62d7HVw/
7. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnj6p7oBF3Ho2wGZfvqcyU6Q60qEJbPqtotczBucnBIhE8PHdqNiqHt6dsfgf89FvrJoaVyd7uMr3rtiPH7MXCFBtLznrEhyyz_0Cg4GSoUdBYMyNo7KuMF4u-m0Qef25L1JOMB0f7Y-Vf/
8. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihxqr1hJ0liQY1jA0u-FGsiTuRhjW14nR0y-lvSeR-YyRvxtBQPo0qcBlDDnJdQAFQbEwK6xKLTvv2-93u_Kmq1Bx9dPwXevYpHLLU1HlLIpKj3zddppLfLVzR_z1j9k3QNkb5Um4vwv9d/
9. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRnIXzz43Bk8qcOqGI0dSl43tNnvSUAkUimSu8rPfQG0YQCO3Dkq5Uji_7z4npez2CcU79Z-LTeH3uWxG31X91y9L4tqWg6vC5Y3IUNVAZllWmvXIlAuv-XiObjBMeNOnUrd7ObZC3wXIZ/
10. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBdy5QghTnpfJIWfWMExSJo8mdn-UJJGdWCePGHdj_GbwKBqpfwo5-PP6lcSJDCo6QLe47uGVtqt_2Ba9Bgewb8XAPkXZDNBh72C8_oWwafzPNx5Bn6qbj2aN3EXzS3IaFGjeclWN_xoWX/ (

 setelah terisi semua dengan URL EMOTICON KASKUS. jangan di save dulu.. 

langkah selanjutnya ganti KODEnya dengan ( :1: ) sampai ( :10: )
kalo udah, baru lanjutkan langkah di bawh ini :

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.

<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://i1108.photobucket.com/albums/h405/christian410/ghtrf.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="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div>

<div><iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></iframe></div>

</div>

<!-- END CBOX -->

<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.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>
 

Caranya :

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save 

Tambahan :
Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.