Trik Membuat Buku Tamu Melayang

Buku tamu merupakan hal yang penting dalam blog, dikarenakan disinilah para blogger saling menyapa dan memberikan pendapatnya mengenai blog kita. Namun salah satu yang bikin masalah yaitu mencari peletakanya. Kadang - kadang para blogger binggung memasangnya dimana. Nah kalo masalah itu ada solusinya yaitu memasang Buku tamu yang melayang.
Buku Tamu tersebut melayang artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap nampak. Mau tahu caranya?

1. Sign in ke blogger dan silahkan Login dengan Account Anda
2. Pilih "Rancangan"
3. Klik "Tambah Gadget"
4. Pilih  "HTML/Javascript"
5. 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVIYuJBXSdvrp_HoeVAv6Wt2NIFy7Snyd0WhNqy5M01XXttDXkyUO-lDJnXe8p7XBWE8pGwBmi3Y6BoAY1jQddJeSaGHDJHldtllC6ZxLPkwewLz52sF_6k_9Nv2p3WctONUZx7zihNe8/') 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">

Ganti dengan kode yang anda peroleh dari ShoutMix.

         <br/>

         Anda ingin buat Buku Tamu seperti ini?<br/>
         Klik di
        <a href="http://www.sidoelblog.co.cc/2011/03/trik-membuat-buku-tamu-

         melayang.html">
         sini </a>

         <div style="text-align:right"> 

         <a href="javascript:showHideGB()">

         [tutup]

</a>

</div>

</div>

<script type="text/javascript">

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

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

</script>

Catatan : 

• Ganti kode yang berwarna merah dengan kode yang anda peroleh dari ShoutMix.
• SELAMAT MENCOBA.
  

Posted in: Blog