Cara Membuat Buku Tamu Keren dengan CBox

Udah lama nih ngak posting tentang tips blog. Kali ini saya akan memberikan tips cara membuat buku tamu atau lebih tepat nya menyembunyikan cbox. Cara nya cukup mudah.. 

Ikuti langkah-langkah berikut : 

1.  Login ke blogger.com
2.  Pada Dasbor >> Rancangan >> Elemen Laman
3.  Klik Tambah Gadget, kemudian pilih bagian HTML/Javascript
4.  Copy kode di bawah ini dan paste pada form HTML/Javascript tadi 

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px dotted #ff0000;
background:url(http://i51.tinypic.com/rcq4b7.gif) #000000 repeat-y center;
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">


 Copas Kode Cbox Anda disini


 </div>
</div>
<br />
<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" alt="close" title="Click here to Close Cbox" /></a></div>
<div align="right"><font size="2"><a href = "http://riyadi-rodriguez.blogspot.com/2012/07/cara-membuat-buku-tamu-keren-dengan.html" target=_blank"><div style="color: #fff;">
<span style="font-size: x-small;">:: Get This Widget!! ::</span></div></a></font></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<br/>
<div style="display:scroll;position:fixed;top:100;right:0;"><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i1165.photobucket.com/albums/q588/Riyadi_Rodriguez/animated-gifs-guestbooks-20.gif" alt="cbox" title="Click here to open Guest Book/ChatBox" /></a></div>

• Ganti tulisan berwarna merah dengan kode cbox anda 

    5.  Simpan. Kemudian refresh blog anda.

Selamat Mencoba, semoga berhasil :)

Artikel Terkait: