Cara Membuat Buku Tamu Melayang

Ada request ini dari temen ku si Sinta. kemaren malem dia abis nanya tentang cara bikin buku tamu yg di klik terus muncul itu loh yang ada di pinggir kanan.
rencana mau ane remote biar tau cara bikinnya. eeehhh koneksi tak bersahabat dengan kita. ya g sint ??? heheheh....
terus, mau ane posting tuh tutorial, eee lagi males :D
nonton TiPi deh. terus kagak tidur sampek pagi ini.
mumpung nganggur, plus bete, nulis tutorial deh buat temen-temen dan terkhusus dari yang request.

langsung saja masuk ke dasboard blogspot kalian. baca nih petunjuknya, jangan sampek kelewatan ya.
1. Pilih Rancangan
2. Elemen Halaman
3. Tambah Gadget
4. Pilih HTML/JavaScript
5.Terus untuk Judul g usah diisi, untuk konten silahkan isi sourcecode berikut ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUuHdBo2s-gqNoC0lEzSw05Qg4E6oR_OI_eyAtyunjF4HSW3-yAozskUvdTe-rwc1R3RStBLm8eFQNXY9ZUba3uyROmDtl0nKhCuZGXdMVtXbyacJT_8AmCO_ZskWWRsiFFop8rab2HY_/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 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+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div><iframe frameborder="0" marginheight="2" marginwidth="2" height="350" src="http://www3.cbox.ws/box/?boxid=3031749&amp;boxtag=8848&amp;sec=main" id="cboxmain" style="border: 1px solid rgb(218, 218, 218);" scrolling="auto" width="95%" allowtransparency="yes" name="cboxmain"></iframe></div>
<div><iframe frameborder="0" marginheight="2" marginwidth="2" height="95" src="http://www3.cbox.ws/box/?boxid=3031749&amp;boxtag=8848&amp;sec=form" id="cboxform" style="border-style: none solid solid; border-color: -moz-use-text-color rgb(218, 218, 218) rgb(218, 218, 218); border-width: 0px 1px 1px;" scrolling="no" width="95%" allowtransparency="yes" name="cboxform"></iframe></div>
<!-- END CBOX --></center>

<br/>
<font color="00000">
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://hanifspd.blogspot.com/2010/11/cara-membuat-buku-tamu-melayang.html">
sini </a></font>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :
Untuk Kode yang berwarna merah

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div><iframe frameborder="0" marginheight="2" marginwidth="2" height="350" src="http://www3.cbox.ws/box/?boxid=3031749&amp;boxtag=8848&amp;sec=main" id="cboxmain" style="border: 1px solid rgb(218, 218, 218);" scrolling="auto" width="95%" allowtransparency="yes" name="cboxmain"></iframe></div>
<div><iframe frameborder="0" marginheight="2" marginwidth="2" height="95" src="http://www3.cbox.ws/box/?boxid=3031749&amp;boxtag=8848&amp;sec=form" id="cboxform" style="border-style: none solid solid; border-color: -moz-use-text-color rgb(218, 218, 218) rgb(218, 218, 218); border-width: 0px 1px 1px;" scrolling="no" width="95%" allowtransparency="yes" name="cboxform"></iframe></div>
<!-- END CBOX -->


ganti dengan SourceCode Shoutbox kalian.
untuk daftar shoutbox silahkan baca artikel yang ini.

buat sinta, semoga sukses ya.
kalo masih bingung silahkan tanya lagi.

jangan lupa komentarnya kawan...