Membuat Buku Tamu Tersembunyi

Bosan dengan Tampilan widget buku tamu mu yang tampil di side bar???? atau kamu ingin berkreasi dengan menyembunyikannya di sisi blogmu???? bisa... Caranya???? Lihat dibawah ini yaaa..!!!

Untuk membuat widget buku tamu tersembunyi, sebenarnya kita hanya perlu menambahkan beberapa kode-kode HTML/Javascript pada kolom widget. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

• Buat Buku tamu mu sendiri, jika belum punya. tinggal daftar di www.shoutmix.com
• Setelah daftar dan bla..bla...bla... kamu pasti akan mendapatkan kode HTML/Javascriptnya. Nah simpan atau copy-paste dulu dah di aplikasi Notepad atau sejenisnya biar mudah.
• Login ke akun Blogger mu
• Masuk ke menu Rancangan>elemen laman>Klik Tambah Gadget (pada kolom sidebar)>Pilih HTML/Javascript
• Jika sudah, copy-paste kode di bawah ini di Konten HTML/Javascript.

<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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/

HshHClEVcvY/tabs.png') 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">

"LETAKKAN KODE HTML/JAVASCRIPT SHOUT BOX (BUKU TAMU MU DISINI)"

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

• Ganti Tulisan berwarna merah itu dengan kode shoutbox (buku tamu) mu
• Setelah itu, Klik Simpan dan lihat Hasilnya dech....
• Buku Tamu mu akan ada di samping kanan blog.

Contoh bisa dilihat di blog ku aufasyafiq.blogspot.com

Semoga bermanfaat....... and Happy Blogging