Membuat Buku Tamu Melayang Dibloger

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.


Salah satu keuntungnya yaitu ini akan mengikuti letak kusor, naik maupun turun. Tapi di setiap keuntungan ada kerugian, kerugianya adalah aga lambat dalam meload. Maka dari itu sebelum memasang ini harus diperhitungkan juga masalah kecepatanya.

•  Login ke Blogger Account Anda, pilih "Layout" kemudian "Page Elements",
• Klik "Add a Gadget" boleh di element manasaja, pilihlah "HTML/JavaScript",
• Copy code berikut dan paste ke Notepad:

<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://i581.photobucket.com/albums/ss258/daenkrhapy/BT.jpg') 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 ini dengan kode buku tamu Anda -->

<blink>

<font size="2"><a href="http://daenkblog.blogspot.com/2009/08/cara-sembunyikan-shoutbox-buku-tamu.html">^÷•db•÷^</a></blink>

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

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

[close]

</a>

</div>

</div>

</div>

<script type="text/javascript">

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

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

</script>

 
Sebagai Contoh Saya akan Ganti

<!-- Ganti ini dengan kode buku tamu Anda -->  dengan buku tamu saya :

<!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe scrolling="auto" width="220" frameborder="0" src="http://www2.shoutmix.com/?kedome" height="400" title="kedome">

<a href="http://www2.shoutmix.com/?kedome">View shoutbox</a>

</iframe>

<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br/>

<!-- End ShoutMix -->

• selanjutnya Sobat juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah Anda.
• Atau Anda Juga Mau Rubah Gambar http://i581.photobucket.com/albums/ss258/daenkrhapy/BT.jpg  sesuai selera, silahkan bikin dulu dengan Photoshop atau corelDRAW, Lalu simpan di photobucket dan gantilah gambar tersebut sesuai alamat penyimpanan.
• Jangan Lupa disimpan

Selamat mencoba........


SUMBER  :

 M-Creatif