Hide Show Social Bookmarks with Hover

Hide Show Social Bookmarks with Hover | http://tipsandtricksfor.blogspot.com/2011/05/hide-show-social-bookmarks-with-hover_21.html

Hi, friends! How are you? Now we gonna try to create Hide Show Social Bookmarks with Hover. This Social Bookmarks have very nice effect. When we put our cursor, the social bookmarks will be slide and show the hidden-text. This is the picture

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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 />
&nbsp Mixx it
</span>
</a>
</li>
<li>
<a rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 />
&nbsp 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

Loading Related Posts