Cara Membuat Buku Tamu Keren

Setelah kemarin telah di buat cara membuat cbox, kini aku akan membagikan tips bagaimana cara menyembunyikan cbox itu menjadi sebuah buku tamu yang keren. Mau tau cara nya? Yo langsung ke tips nya ^_^v

1. Login dahulu ke blogger kamu.

2. Pilih Rancangan >> klik Elemen Laman >> Tambah Gadget >> pilih HTML/Javascript.

3. Copy kode di bawah ini ke HTML/Javascript tadi.

<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://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIhq5GI0z6jlTP_l5dOFZHPl_rci6tBk7Auk8LyANqTlma-AXuZCjYiedz-fSpM9xwxvZKqoYr3oIQqDT1z-tSie4cQpfecAri3yeIfTVACgEHRPPnHa_fSzHFknq6mXsrtgZWauiYfuDm/s1600/api.gif) 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>

Kode Cbox kamu

<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr />
<div style="text-align:right"> <font size="2"><a href="http://besttaufiqblog.blogspot.com/2011/04/cara-membuat-buku-tamu-keren.html"target=_blank"><div style="color: #ffffff;">
<span style="font-size: xx-small;">:: Get This Widget! ::</span></div></a></font></div>
</center>
</a>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>

4. Simpan dan lihat hasil nya.

Selamat Mencoba