Cara membuat buku tamu melayang

Buku tamu melayang ialah salah satu widget menarik di mana buku tamu itu seolah olah melayang di halaman blog kita
Masih bingung ???? liat profil blog saya trus di bagian kanan ada tulisan guest book nah itulah yang namanya buku tamu melayang

Nah sekarang saya akan memberikan tutorial membuat buku melayang pada halaman blog anda


1. Login ke Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2.  Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:30px;

float:left;

cursor:pointer;

background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #FFFFFF;

background:#FAFD03;

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">

PASTE KODE BUKU TAMU DISINI YAA...

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></center></div></center></div></div></div>

    Border         : untuk memberi warna pada border konten
    Background : untuk memberi warna pada background konten
    PASTE KODE BUKU TAMU DISINI YAA.: pastekan script buku tamu anda seperti Cbox atau      shoutmix
   
   Contoh :

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:30px;

float:left;

cursor:pointer;

background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #FFFFFF;

background:#FAFD03;

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">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="200" height="305" src="http://www2.cbox.ws/box/?boxid=2165762&amp;boxtag=gpy3ts&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#EAB412 1px solid;" id="cboxmain"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www2.cbox.ws/box/?boxid=2165762&amp;boxtag=gpy3ts&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#EAB412 1px solid;border-top:0px" id="cboxform"></iframe></div>

</div>

<!-- END CBOX -->

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></center></div></center></div></div></div>

3. Lalu Save pekerjaan anda 

SELAMAT MENCOBA....

Bagaimana menurut anda ???

Jangan Lupa beri komentar ya :)