Auto Hide widget at blogspot like feedjit, chat box

copy code kad bawah ni

pergi kat blog, klik
1- dashboard
2- design
3- add gadget
4-  html/java script
5- paste
6- save

click at right monitor to see sample


<style type="text/css">#gb{
position:fixed;
top:-100px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:800px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrUPpRY5i8YSuqZ4CKzd-iBBG2272AlK6Nzpcnjvlf6z2Vt8bO_iAg_vhwtmbnhS6bugWKJ_iH8XGG8MXysGlgyLBOKTt4ptLJRTw500EtplIfdl7_lXZvzXO-tCP9HmerGDkhVsMlR10D/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F7FAE2;
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">

<center><span class="Apple-style-span"  style="color:#00000;"><b>
</b></span></center>

<div style="border: 0px solid rgb(204, 204, 204); padding: 1px; overflow: auto; width: 200px; height: 600px; background-color: #00000;">

<div class="separator" style="clear: both; text-align: left;">

<a href="http://inkjet-printers-price.co.cc/">World News</a>

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULkCWvFoQnaj20bkUupGmKh1Jtxmc03bWx8BayAkxquH7J9YALEhi0Ovz67qvHEsH8dSpcNYXhdUBKC0cDoqiXrWfjaFGUoUGmSyev5kZj4gjpTGV55A1wsqCB4CGjZ4ZhafdZmawY9Q/s1600/Capture1.PNG" imageanchor="acne treatment" style="margin-left: 0em; margin-right: 1em;"><img alt="acne treatment" border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULkCWvFoQnaj20bkUupGmKh1Jtxmc03bWx8BayAkxquH7J9YALEhi0Ovz67qvHEsH8dSpcNYXhdUBKC0cDoqiXrWfjaFGUoUGmSyev5kZj4gjpTGV55A1wsqCB4CGjZ4ZhafdZmawY9Q/s200/Capture1.PNG" width="200" /></a></div>



<script type="text/javascript" src="http://feedjit.com/serve/?vv=538&amp;tft=3&amp;dd=0&amp;wid=d8ccdeece28272f9&amp;pid=0&amp;proid=0&amp;bc=FFFFFF&amp;tc=000000&amp;brd1=012B6B&amp;lnk=135D9E&amp;hc=FFFFFF&amp;hfc=2853A8&amp;btn=C99700&amp;ww=ffffff&amp;went=255"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>



</div>

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