Membuat Buku tamu melayang Pada Blogger

19.07 | Posted in Tips Blogger

Bagi Rekan-rekan Blogger yang blognya sudah terlalu banyak pernak-pernik dan kesulitan untuk menambah widget baru lagi, padahal sangat bermanfaat untuk blog, ini ada cara menyembunyikan Buku tamu atau shoutbox seperti tampilan pada kanan pojok blog ini, bila ada pengunjung yang mengkliknya maka buku tamunya akan terbuka. Smart dan indah, lumayankan dari pada berantakan dan membuat tampilan blog jadi amburadul. Oke ini dia caranya Sembunyikan shotbox atau Buku Tamunya seperti ini.

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:

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

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>

<blink>

[close]

</a>

</div>

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

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

</script>

Sebagai Contoh Saya akan Ganti

dengan buku tamu saya :

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

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