Membuat Rolling Buku Tamu Sembunyi

Ok setelah kemarin membuat buku tamu sembunyi maupun buku tamu tanpa di klik. Sekarang tutorialnya sedikit berbeda sob meskipun masih dalam ruang lingkup buku tamu/guest book.

Untuk membuat rolling widget supaya bersembunyi, berikut adalah langkah-langkahnya:
1. Login ke blogspot kamu
2. Klik Rancangan
3. Klik Edit HTML
4. Centang kotak kecil html dan download html kamu untuk backup
5. Copy kode dibah ini dan letakkan tepat dibawah kode </head>

<!-- Mulai Rolling Widget -->
<style type="text/css">
#gb{
position:fixed;
top:10px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:none;
}
.gbcontent{
float:left;
border:2px solid #888888; /*warna bingkai*/
background:#F0F0F0; /*warna latar*/
padding:5px 10px 0px 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 style="text-align:center;"><a href="javascript:showHideGB()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="http://i563.photobucket.com/albums/ss76/peace_enes/guestbook.png" /></a></div>

Kode Shoutbox atau Buku Tamu

<script type="text/javascript" src="http://infonetmu.googlecode.com/files/rollingwidget.js"></script>
</div></div>
<!-- Selesai Rolling Widget -->

6. Save template kamu.
7. Setelah itu buatlah sebuah link untuk menampilkan rolling widget, seperti berikut :

<a href="javascript:showHideGB()">Buku Tamu</a>

Ente bisa menempatkan link ini pada navbar menu, sidebar, atau di tempat lain. Sobat juga dapat mengganti Buku Tamu dengan Guest Book, Chat Room, ShoutBox, atau Juga dengan gambar.
Ok sob sampai disini cara membuat rolling Guest Book, Semoga Bermanfaat!

Tags: trimudareog, telaga ngebel, cah ngebel, nurrohman,  cara buat buku tamu, cara membuat buku tamu melayang, cara membuat buku tamu rolling, cara membuat buku tamu sembunyi