Cara Membuat Buku Tamu Tersembunyi

Apakah kalian sudah memasang buku tamu di blog? Jika belum, silahkan baca Cara Membuat Buku Tamu Shoutmix di Blog . Sekarang saya akan share sedikit trik Cara Membuat Buku Tamu Tersembunyi di blog. Trik ini berguna sekali bagi kalian yang ingin memasang buku tamu, tapi tidak memiliki ruang yang cukup. Dengan script ini, buku tamu kalian akan tersembunyi, yang berada tepat di samping kanan. Berikut screenshotnya :

Gambar Blom dibuka

Untuk membukanya, klik saja gambar buku tamunya, maka buku tamunya akan tampil secara slide ke kiri (Lihat Screenshot berikut)

 Gambar setelah dibuka

Jika kamu tertarik silahkan lihat tutorialnya dibawah ini :)

1. Siapkan dulu sob, script buku tamu kalian. Bisa Shoutmix, bisa Cbox.
2. Daftar untuk mendapatkan script Buku Tamu Anda di Cbox

3. Login ke blogger, lalu klik Rancangan, Add Widget, HTML/Javascript ( Tips : Tempatkan widget di samping kiri dan jangan diberi judul)

4. Copy paste script berikut :

<style type="text/css"> #gb{ position:fixed; top:23px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis93XAr3EL2KkcubPdMZPDLRZaZkTMxKVD9ANW7_yU0rhIpJpt7ieUIMXaPj_5kbE-9iq1mHroKMBezgiOE91Za2fYT2rsimzNXDLI1PzJ8Wgb_HHLvzkb_nSpRrj4JMPnBfqFvL9QBSnB/') 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"> ( Tempatkan Script Buku Tamu kalian disini) <br/> <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>

Keterangan:
- silahkan ganti kode ( Tempatkan Script Buku Tamu kalian disini)  dengan kode buku tamu kalian.
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis93XAr3EL2KkcubPdMZPDLRZaZkTMxKVD9ANW7_yU0rhIpJpt7ieUIMXaPj_5kbE-9iq1mHroKMBezgiOE91Za2fYT2rsimzNXDLI1PzJ8Wgb_HHLvzkb_nSpRrj4JMPnBfqFvL9QBSnB/ bisa ganti sesuai keinginan kamu. jaka tidak mau dirubah tidak apa-apa :)

nah sekarang save dan lihat hasilny
selamat mencoba semoga bermanfaat :)