Memodifikasi tampilan buku tamu pada blog

Cara memodifikasi buku tamu pada blog, cara menyembunyikan buku tamu, pada lazimnya, buku tamu yang kita ambil dan langsung kita pasangkan pada blog mungkin terlihat biasa biasa saja, bagi kita yang ingin benar benar memanfaatkan ruang pada blog, memodifikasi tampilan buku tamu agar tampak tersembunyi bergeser ke kanan, tentunya akan menguntungkan. Berikut ini kita akan berbagi tentang cara memodifikasi buku tamu pada blog.

1. Langkah pertama yang harus ditempuh, adalah kita membuat shoutbox, mengenai caranya, bisa dilihat disini

2. Selanjutnya Login ke BLOG - RANCANGAN - EDIT TATA LETAK - pilih HTML/Javascript, masukkan kode script berikut ini ke dalamnya


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:125px;
width:32px;
float:left;
cursor:pointer;
background:url('http://i1151.photobucket.com/albums/o640/dhlondhenk/th_DANNY.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">
MASUKKAN SCRIPT KODE SHOUTBOX ANDA DISINI
<br/>
</a>
<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></div></div>

Keterangan ;
Pada tulisan berwarna biru, tampilan gambar ( tulisan GUEST BOOK ) bisa kita modifikasi sendiri, dalam format .png tentunya, sesuaikan tinggi dan lebar menurut selera kita

Pada tulisan berwarna merah, ganti dengan kode script shoutbox milik kita

Untuk warna ungu, sesuaikan dengan keinginan kita, kalau ingin agak kebawah, ya tinggal diganti, misal jadi 90px. Semoga bermanfaat....salam hangat.