Tulisan Dika

nih sob cara bikin buku tamu alias guest book untuk blog anda dulu pernah saya jelaskan kan...
nah sekarang saya ingin menjelaskan cara membuat buku tamu yang bisa bersembunyi niihhh... kurang lebih seperti di gambar samping...

naah kelebihan dari buku tamu yang bisa bersembunyi ini adalah untuk menghemat tempat di blog anda dan untuk merapikan blog anda juga agar tampilannya tidak acak-acakkan

jadi jika anda ingin memunculkan buku tamunya anda tinggal klik saja dan jika anda ingin menutup buku tamunya tinggal anda klik lagi, simple aja kok gunainnya sob, hehe sekarang langsung saja yah kita belajar cara membuatnya

• jika anda belum mempunya buku tamu/ acount buku tamu anda baca dulu artikel saya tentang membuat buku tamu
• nah jika anda sudah mempunyai buku tamu langsung saja anda login di blogger anda
• lalu pilih menu rancangan
• terus, anda pilih elemen halaman
• lalu klik add widgets/tambah gadgets dimanapun anda mau
• pilih HTML/javascript
• dan masukkan kode script dibawah kedalam area kotak konten yang disediakan

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:160px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i915.photobucket.com/albums/ac357/adiluvdv/buku-tamu_03.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00ff00;
background:#969ffa;
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 KODE BUKU TAMU ANDA DISINI !!

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

• SAVE

dan selesai deh sob..
oiya keterangannya:

• Ganti kode bewarna merah dengan kode script buku tamu yang anda miliki
• ganti pula kode script yang bewarna biru dengan URL gambar untuk tombol buku tamu yang anda inginkan

naah sudah deh, gampang sob???
hehe jika anda mengalami kesulitan silahkan saja anda komentar yah, agar anda semua mempunyai buku tamu yang bagus di blog anda