Need a DEMO? Now, if you want to try hide show social bookmarks for your blog, just follow the steps below.
1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Then add the code below, don't forget to customize the links
<div id="Layer3">
<ul id="menu">
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/delicious_48.png" alt="Delicious" width="60" height="60" title="Delicious" />
<span><br />
<b class="h2">Delicious</b><br />
Add to delicious
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/twitter_icons_48.png" alt="Twitter" width="60" height="60" title="Twitter" />
<span>
<br />
<b class="h2">Twitter</b><br />
Retweet the Article
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/mixx_logo_48.png" alt="Mixx" width="60" height="60" title="Mixx" />
<span><br />
<b class="h2">Mixx</b><br />
  Mixx it
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/rss-icon.png" alt="RSS" width="60" height="60" title="RSS" />
<span><br />
<b class="h2">Dreamcss </b><br />
Subscribe Us
</span>
</a>
</li>
<li>
<a href="#nogo">
<img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/Google.png" alt="Google" width="60" height="60" title="Google" />
<span><br />
<b class="h2">Google</b><br />
Bookmark the Article
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/facebook_48.png" alt="Facebook" width="60" height="60" title="Facebook" />
<span><br />
<b class="h2">Facebook</b><br />
Add to Facebook
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/stumble-upon.png" alt="Stumble Upon" width="60" height="60" title="Stumble Upon" />
<span><br />
<b class="h2">Stumble Upon </b><br />
  Review or thumb-up
</span>
</a>
</li>
</ul>
</div>
<style text-type="CSS">
#menu {
margin:0;
padding:0;
width: 50em;
height: 4.5em;
overflow:hidden;
}
#menu li {
display:inline;
list-style-type:none;
}
#menu li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#menu li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#menu li a span {
display:none;
}
#menu li a:hover {
background:transparent;
}
#menu li a:hover span {
width:10em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1.25em;
border:0;
}
</style>
<ul id="menu">
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/delicious_48.png" alt="Delicious" width="60" height="60" title="Delicious" />
<span><br />
<b class="h2">Delicious</b><br />
Add to delicious
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/twitter_icons_48.png" alt="Twitter" width="60" height="60" title="Twitter" />
<span>
<br />
<b class="h2">Twitter</b><br />
Retweet the Article
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/mixx_logo_48.png" alt="Mixx" width="60" height="60" title="Mixx" />
<span><br />
<b class="h2">Mixx</b><br />
  Mixx it
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/rss-icon.png" alt="RSS" width="60" height="60" title="RSS" />
<span><br />
<b class="h2">Dreamcss </b><br />
Subscribe Us
</span>
</a>
</li>
<li>
<a href="#nogo">
<img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/Google.png" alt="Google" width="60" height="60" title="Google" />
<span><br />
<b class="h2">Google</b><br />
Bookmark the Article
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/facebook_48.png" alt="Facebook" width="60" height="60" title="Facebook" />
<span><br />
<b class="h2">Facebook</b><br />
Add to Facebook
</span>
</a>
</li>
<li>
<a href="#nogo"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/stumble-upon.png" alt="Stumble Upon" width="60" height="60" title="Stumble Upon" />
<span><br />
<b class="h2">Stumble Upon </b><br />
  Review or thumb-up
</span>
</a>
</li>
</ul>
</div>
<style text-type="CSS">
#menu {
margin:0;
padding:0;
width: 50em;
height: 4.5em;
overflow:hidden;
}
#menu li {
display:inline;
list-style-type:none;
}
#menu li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#menu li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#menu li a span {
display:none;
}
#menu li a:hover {
background:transparent;
}
#menu li a:hover span {
width:10em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1.25em;
border:0;
}
</style>
5. Click SAVE TEMPLATE