Cara Mudah Membuat Show Hide Shoutbox (Buku Tamu) Di Blogg

Cara mudah membuat show hide floating shoutmix/shoutbox/cbox, kali ini saya menshare cara pembuatan nya contohnya punya saya yg berada di pojok kanan atas ada tulisan buku tamu,
oke langsung simak saja

1. Senyum, mudah gan santai aja
2. Tentunya teman-teman sudah mendaftar di cbox/shoutbox/shoutmix banyak tutorialnya di google saya belum ada posting, buatnya 5menit tergantung koneksi
2. Login di blogger dengan ID anda
3. Klik menu Layout/rancangan
4. Klik Page Elements/Elemen laman
5. Klik Add a Page Element/tambah widget
6. Klik ADD TO BLOG pada menu HTML/tambah HTML
7. Lalu Copy kode berikut dan Paste-kan Pada kotak HTML



<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/AVvXsEgOLZSkBGj823gMmch7_96w6S4mfChFKOMVJpOYJpnEaYXJORskvraFa_h_YOol6MXK1S8D4mOlSAU2Z1jdydc6UBaBu6NB7L3pzd_poZdmDpM5ejvfcUPDJvI-KlQR_6KNZrPAdmNT7iyz/') 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">
<Letakan Code ShoutMix/Shoutbox Kamu Disini>
<div style="text-align:right">
<a href="http://www.herihalik.com/2011/07/cara-mudah-membuat-show-hide-floating.html">
[Pasang Widget]
</a>|<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>



8. Ganti tulisan yang bewarna merah & bergaris bawah dengan code shoutmix/shoutbox/cbox sobat!
9.Klik Save..
Selesai, mudahkan,,


Sumber : http://www.herihalik