tutorial : hide shoutbox

assalammualaikum...

hai semua..

tetiba je pulak nina rasa macam nak buat tutorial tengah2 malam ni..

ok nina nak buat tutorial macam mane nak sorokkan shoutbox kat tepi..

mungkin ada yang tau dan ada juga yang tak tahu... ok jom ikot ni..

mule2 mesti lah kne sign in blogger.com dulu..

design > add gadget >  HTML/JavaScript

and then kopipes link kat bawah ni..

<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>

yang warna biru tu... tukar kan dengan code shoutbox korang..

yang nina kaler kan wane merah tu bole tuka ikut korang punye suke gambar... contoh2 gambar bole di ambil kat bawah ni... kalau da ambil comment kat bawah...

 

http://i1165.photobucket.com/albums/q587/zatochoc/Untitled-8.png 

 

http://i1165.photobucket.com/albums/q587/zatochoc/Untitled-9.png

 http://i1165.photobucket.com/albums/q587/zatochoc/Untitled-7-1.png

http://i1165.photobucket.com/albums/q587/zatochoc/Untitled-3.png

 http://i1165.photobucket.com/albums/q587/zatochoc/Untitled-2.png

 akhir sekali save kan kerja korang...

sekian itu sahaja dari nina... jangan lupe komen ok.. ;)