Membuat GuestBox / Shoutmix Tersembunyi

widget buku tamu tersembunyi seperti contoh buku tamu yang mungkin pernah anda lihat di Blog orang,, Tepatnya ada di samping sisi kanan/kiri. Dengan trik ini kita dapat menghemat tempat dan menambah keindahan blog kita.
Sebenarnya trik ini bukan hanya buku tamu yang dapat anda tampilkan, tapi bisa berupa image atau widget lainnya. Silahkan anda pilih mana yang menurut anda paling sesuai untuk ditampilkan.

oke para sobat berikut ini langkah2nya ;

# Masuk ke Blogger dengan ID anda.
# Pilih Tata Letak.
# Pilih Elemen Halaman.
# Klik Tambah Gadget.
# Klik tanda + pada HTML/JavaScript.
# Copy kode dibawah ini kemudian paste pada kolom yang tersedia.

<style type="text/css">

#gb{

position:fixed;

top:25px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:30px;

float:left;

cursor:pointer;

background:url('http://i629.photobucket.com/albums/uu13/akubsaputra/guestbook.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #1300F2;

background:#FFFFFF;

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

MASUKAN KODE BUKU TAMU/WIDGET DISINI

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





* Klik tombol Simpan.

* Lihat Pemapilan Blog anda sekarang.

Keterangan :

1. height:150px; merupakan tinggi dari widget, silahkan anda atur.
2. width:30px; merupkan lebar dari widget, silahkan anda atur.
3. border:2px solid #1300F2; merupakan ketebalan dan warna garis/border, silahkan anda ganti.
4. background:#FFFFFF; merupakan latar belakang widget, silahkan anda ganti.
5. background:url('http://i629.photobucket.com/albums/uu13/akubsaputra/guestbook.png') dapat anda ganti dengan image hasil kreasi anda sendiri.
6. MASUKAN KODE BUKU TAMU/WIDGET DISINI merupakan tempat meletakan kode buku tamu maupun kode-kode lainnya yang ingin anda tampilkan.
7. [close] dapat anda ganti dengan kata tutup atau kata apa saja yang searti.

Oke selesai!!! Bagaimana?? Berniat UUntk Mencoba??