Make Auto Hide Widget

sometimes we confused with our long blog, but we are minimizing the use of widgets that do not need, and what to do to tidy up the blog is too long?

following I try to give a solution to sort out your blog but do not leave the beauty and function of the widget will be made.

The solution is to add a script of how the widgets we will post, the script will make auto hide our widget.

This widget will be active if we have a blog visitor clicks


1. Login with the blogger in your ID
2. Click the Layout
3. Click Page Elements
4. Click Add a Page Element
5. Click ADD TO BLOG on the menu HTML
6.Copy paste code below :

<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/AVvXsEhH_CSvT9kJN3VZjlvpqy0N3kzBSdZqad5oLbLdG8NOGPuCotT8G_5v0262MjoZBES8SKOt8EzESOdcMptTlGhoT_GF8YS8v5izyesGZX9G9d_1QyZIdy-z7YYj8DwNbhgdT1jAc8uFzNdQ/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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">

[ Place the widget code here ]

<div style="text-align:right">
<a href="http://www.kriep2.co.cc/2009/08/make-auto-hide-widget.html">
[Get Widget]
</a>|<a href="javascript:showHideGB()">
[X]
</a>
</div>

</div>



<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Note : change the text color red with the widget code
change the text color blue with image that matches your widget

Related Article for this post :