Autohide shoutbox atau chatbox milik anda

Anda masih baru dalam membuat laman blog sendiri? So, apa yang menariknya dengan autohide2 ni? Menyusahkan je, nk edit2, dan memeningkan kepala dengan kod2 entah hape2... jangan risau, terdapat cara dan jalan yang mudah..

Langkah-langkah:

1. Dashbord>Layout>Page Element>Add a gadget>HTML Java Script.(Anda boleh memilih kotak Add a Gadget dari mana-mana sudut @ ruang bar)

2. Copy semua code dibawah dan paste ke dalam kotak 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/AVvXsEhJNS8gAokKquUIdtYr9n0Ud477EW8g5KKi5LH04LCFvxcu7iJp1CdH8xHMEy1BZwSAYOV9lcE3iyFsJ0kF3Wyb6zbhr9gN7VVk4PDxvPaeNQLKuDWkUHvVH8CNyrxwdYLuFwVFR9WUE6E1/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">

GANTIKAN DAN PASTE CODE SHOUTBOX ATAU CHATBOX ANDA DI SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
3.Terpulang kepada anda untuk meletakkan TITLEnya atau tidak. Saya sarankan supaya anda tidak meletakkannya. (Anda boleh melihat perbezaannye selepas selesai semua langkah nanti)

4.Copy kod shoutbox or chatbox milik anda. (Untuk yang belum ada, anda boleh mendapatkannya dari mana2 laman web lain)

5.Gantikannya pada arahan berwarna merah pada kod yang telah dimasukkan ke dalam HTML Java Script tadi (cuba perhatikan semua kod bar di atas, terdapat tulisan berwarna merah)

6.Tekan save dan lihat hasilnya.

Selamat mencuba.