Hide Show Social Bookmarks with Hover
Hi, friends! How are you? Now we gonna try to create Hide Show Social Bookmarks with Hover . This Social Bookmarks have very nice effect. W...
https://iskablogs.blogspot.com/2011/05/hide-show-social-bookmarks-with-hover.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
5. Click SAVE TEMPLATE
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 />
  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 />
  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 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 />
  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 />
  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