cara memasang buku tamu melayang

Klik Di Sini untuk Merperjelas Gambar/ Memperbesar

Kali ini saya mau post lagi tentang Blog tutorial, yaitu tentang cara memasang buku tamu melayang, contohnya seperti di atas, jika anda berminat Langsung saja ke tutorialnya ya !!

1. Daftar dulu ke CBOX,
2. Jika anda belum tau bagaimana cara membuat CBOX kunjungi aja ke cara-membuat-cbox
3. Sign in ke blogger dan silahkan Login dengan Account Anda
4. Pilih Rancangan/Tata letak
5. Pilih Page Elemen/Elemen Halaman
6. Klik Add a Gadget/Tambah Gadget
7. Lalu pilih "HTML/JavaScript"
7. Kemudian Copy-Paste kode di bawah 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('http://i37.tinypic.com/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:3px solid #00FF00;
background:Transparent;
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">

LETAKKAN KODE SHOUTMIX/CBOX ANDA DI SINI

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

_______________________________________________________________________

Note :
- Yang Berwarna Hijau Itu Gambar Buku Tamunya
- Yang Berwarna Biru Ganti Dengan Kode Cbox Kamu

8. Selesai Deh, Cukup Mudah Bukan ?? Kalo Masih Ada Yang Bingung Komentar Aja :p