Membuat Guestbook / Shoutbox Auto Hide

Kali ini dunia gue akan memberikan tutorial membuat autohide shoutbox..

untuk contoh silahkan anda klik disini

jika link itu anda klik maka akan muncul jendela shoutbox di sisi kanan blog...

anda ingin mempunyai buku tamu seperti itu ini dia caranya...


Silahkan Anda ikuti langkah-langkah berikut ini.
>> Login Blogger
>> Klik Rancangan/Design
>> Tambah Gadget / Add a Gadget

>> Anda pilih HTML/javascript

Kemudian Copy paste kode di bawah ini di dalam Html/javascript tadi.

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRKMC-0PxhNBB-EPWqWdyrYiB-CkFr4ErZ4VXNr-Ut1JwGu-nvenfejU1ZlgIxFv-46pmiGiCQ2q-rnOlzTLi-np6K_l5p6jERaePcoEZ6kEj248yMMrGzEAMQxxsrv83DapzhyLVD01Ir/') 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">

Letakkan disini kode Shoutbox, Iklan, Menu Dll
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>



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

 keterangan :

url https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRKMC-0PxhNBB-EPWqWdyrYiB-CkFr4ErZ4VXNr-Ut1JwGu-nvenfejU1ZlgIxFv-46pmiGiCQ2q-rnOlzTLi-np6K_l5p6jERaePcoEZ6kEj248yMMrGzEAMQxxsrv83DapzhyLVD01Ir/ adalah gambar tab yg ada di sisi kanan blog anda anda bisa merubahnya sendiri...


Selamat Mencoba !!

Salam DG