Tutorial : Sembunyikan Shoutbox Blog

    Hye!! Acano semua?!!  sihat tak?? Ika arap koorang semua sihat, maklumlah ini kan musim deman.Apa2 pown hari ini Ika nak ajar koorang macam mana nak sembunyikan Shoutbox.Pada kebiasaanya shoutbox ini menyemak je kat blog.So, kalau kitew sembunyi kan die, mybe nampak kemas kan? sapew nak tau cara2 die ikut Ika step by step.Mudah je!! ^__^

1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.

2. Copy dan paste kod berikut ke ruangan html/javascript

<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('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.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">

KOD SHOUTBOX DISINI

<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<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>

 

Nota: Gantikan "KOD SHOUTBOX DISINI" dengan kod shoutbox anda.

3. Save dan lihat hasilnya.:)