Tutorial: Cara Membuat Shout Box Tersembunyi

Membuat Shoutbox tersembunyi bukan sahaja dapat menjimatkan ruang malah dapat meringankan loading blog anda. Untuk membuatnya tidak perlu edit pada kod html dan anda cuma perlu pergi kt design >> add a gadget dan cari html/javascript..

masukkan kod di bawah ini :

<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/AVvXsEidCgxfnwXXwza6Yji96SEmoaYe_EEX2Usl1NHO6omAUQm8KTvYZ8iCa3h7KLh3H-zK6ZTL9jcfrIc_b1NStJEZpixArBtiBzmScOkAyjGwD4cHSy_0FhMvgIjz16yTCjjJB2cElqTh_4dq/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">
MASUKKAN CODE SHOUTBOX KORANG KAT SINI
<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>