Buku Tamu Terselip di samping

Buat kamu yang suka, dengan blogwalking pasti senang banget kalo di blog yang kamu kunjungi mempunyai shout box/chat mix atau buku tamu. Di sini kamu bisa meninggalkan jejak berupa link blog/website kamu dan juga pesan untuk si empunya blog.

Dengan memanfaatkan ruang kita bisa membuat widget buku tamu terselip di samping. Jadi singkatnya kamu bisa menghemat ruang yang ada di blog kamu. Gimana yah kira-kira caranya membuat buku tamu menjadi terselip di samping blog?. yuk mari kita buat tutorialnya bareng-bareng.

Langkah pertama yang harus kamu lakukan adalah kamu harus memiliki kode shoutbox untuk buku tamu kamu. sebelumnya lihat dulu dafar shoutbox gratis rekomendasi dari saya dan juga cara membuat shoutbox.

Kalo kamu sebelumnya sudah punya ga masalah di manfaatkan aja.

1. Login ke dasbor blogger kamu.
2. KLIK Rancangan/Tata Letak --- Tambah Getget --- HTML/JavaScript+.
3. Copy-Paste-kan Code di bawah ini :

<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://i827.photobucket.com/albums/zz194/depalpiss/bukutamu5.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 Kamu di Sini!</span>
</div>

<a href="http://piss-blogger.blogspot.com/"><span class="Apple-style-span" style="font-size: x-small;">Salam Blogger Mania Indonesia</span></a>

Masukkan Kode ShoutBox Kamu disini!

<div>
<span class="Apple-style-span" style="font-size: x-small;">Pengen Punya Widget kaya gini 
</span></div>
<a href="http://piss-blogger.blogspot.com/2010/06/buku-tamu-terselip-di-samping.html">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>

4. Hapus kata Masukan Kode shoutbox Kamu di sini!(yang saya bold merah di atas), ganti dengan kode Skhoutbox yang Kamu punya dan Simpan. Kamu Juga Bisa mengganti design tombol buka/tutup widget buku tamu kamu dengan tombol, design buatan saya sendiri di bawah ini. Caranya : Perhatikan Kode yang saya bold warna biru di atas. Ganti kode Direct Link-nya dengan kode Direct Link dari gambar design saya di bawah. Note : Tanda  '   ' (petik) pada awal dan akhir kode jangan sampai hilang.

http://i827.photobucket.com/albums/zz194/depalpiss/bukutamu5.png

http://i827.photobucket.com/albums/zz194/depalpiss/bukutamu7.png

http://i827.photobucket.com/albums/zz194/depalpiss/bukutamu6.png

http://i827.photobucket.com/albums/zz194/depalpiss/bukutamu8.png

http://i827.photobucket.com/albums/zz194/depalpiss/bukutamu2.png

http://i827.photobucket.com/albums/zz194/depalpiss/bukutamu9.png

http://i827.photobucket.com/albums/zz194/depalpiss/bukutamu10.png



Yap! oke kah! widgetnya, jadi hemat ruang.. he he he! well enjoy.. salam...