Cara Membuat Buku Tamu Terselip di samping

Cara Membuat Buku Tamu Terselip di samping  - Mungkin bagi anda yang aktif melakukan blogwalking sangat senang meninggalkan jejak pada buku tamu atau shoutbox seperti yang tersedia di shoutmix.

Kadang disaat kita mengunjungi suatu blog kita menjumpai buku tamu itu bisa terselip di samping halaman blog dan saat kita klik tombol keterangan buku tamu itu langsung timbulah shoutbox tsb, seperti buku tamu milik saya ini...heheheheh (*pamer).

Baiklah tanpa basa-basi lagi berikut saya berikan caranya :

* Masuk Ke Blog anda > Dasbor 

* Pilih Rancangan > Tambah Gadget > HTML/JavaScript

* Lalu Copy-kan Code di bawah ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:200px;
float:left;
cursor:pointer;
background:url('http://i901.photobucket.com/albums/ac220/chukie_chukie/bukutamu.png')
no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
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">
<div>
<span class="Apple-style-span" style="font-size: x-small;">Tinggalkan Pesan Anda di Sini!</span>
</div>
<a href="http://fieroe-fieroe.blogspot.com/"><span class="Apple-style-span" style="font-size: x-small;">Selamat Datang..</span></a>
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="chukie_chukie" src="http://www6.shoutmix.com/?chukie_chukie" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?chukie_chukie">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 -->
<div>
<span class="Apple-style-span" style="font-size: x-small;">Pengen Tau Tips Menarik Tentang IT
</span></div>
<a href="http://fieroe-fieroe.blogspot.com/">baca tutorialnya! di sini</a>
<br />
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

* Silahakan beri nama sesuai keinginan anda pada kolom Judul, 

* Kemudian pada Tulisan yang berwarna merah silahkan ganti dengan code Shoutmix anda sendiri

* pada Tulisan yang berwarna biru silahkan ganti dengan tombol yang sudah anda upload di photobucket, tetapi anda bisa juga menggunakan punya seperti saya dengan cara tidak mengganti tulisan tsb.

* Lalu tulisan yang saya beri warna hijau itu adalah ukuran untuk tombol buku tamu, anda bisa kreasikan sendiri.

* Jika sudah klik Simpan, dan Selesai..!!

Semoga bermanfaat