Another Best Social Bookmarking Widget To Add in Blogger

Today i am going to add on more social bookmarking widget in our blogger widgets tally. In the series of Best Social Bookmarking Widget for Blogger, lets add one more fascinating social bookmarking widget which will change look and feel of your blog.

To Add this widget in your blog you need to add only 3 things and that are HTML, CSS and jQuery. You need to simply hover over the social media icons too see the beautiful effect of the widget which uses jQuery for the animation.





Steps to Add Social Bookmarking Widget in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML.





#Step 2. Copy below code and paste it just before the ]]></b:skin> code.
/* SOCIAL ICONS - GENERAL */
.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.delicious { background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8cdnx7YI/AAAAAAAAAtI/4lzCME9fcUY/s1600/delicious.png")
; }
li.digg { background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8c2wEyXI/AAAAAAAAAtM/WQUfe6znmj0/s1600/digg.png"); }
li.facebook {background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8dZwO-kI/AAAAAAAAAtQ/Whtv_zNLofc/s1600/facebook.png"); }
li.flickr {background-image:url("http://1.bp.blogspot.com/_1fRuBdlSpLw/TMW8eTEiAwI/AAAAAAAAAtU/jQ4fxlw0eKo/s1600/flickr.png"); }
li.linkedin { background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8fVKKnbI/AAAAAAAAAtY/-qs_FjN-_ok/s1600/linkedin.png"); }
li.reddit { background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8f8Dn6-I/AAAAAAAAAtc/T8KBql6pMDg/s1600/reddit.png"); }
li.rss { background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8hHH2V1I/AAAAAAAAAtg/FuSsgE0pBpI/s1600/rss.png"); }
li.twitter {background-image:url("http://1.bp.blogspot.com/_1fRuBdlSpLw/TMW8hoex5WI/AAAAAAAAAtk/3Pk8a39FEgg/s1600/twitter.png");}

#Step 3. Copy below code and paste it just before the </head> tag. ( No need to add

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
&lt;script type='text/JavaScript'&gt;
$(document).ready(function()
{
// Hide all the tooltips
$(&amp;quot;#jquery li&amp;quot;).each(function() {
$(&amp;quot;a strong&amp;quot;, this).css(&amp;quot;opacity&amp;quot;, &amp;quot;0&amp;quot;);
});

$(&amp;quot;#jquery li&amp;quot;).hover(function() { // Mouse over
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 0.2);

$(&amp;quot;a strong&amp;quot;, this)
.stop()
.animate({
opacity: 1,
top: &amp;quot;-10px&amp;quot;
}, 300);

}, function() { // Mouse out
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 1);

$(&amp;quot;a strong&amp;quot;, this)
.stop()
.animate({
opacity: 0,
top: &amp;quot;-1px&amp;quot;
}, 300);
});
});
&lt;/script&gt;

- No Need to add jQuery in above code (first line in above code) if you are already using it.

#Step 4. Now Save the template and navigate to Design > Page Element.

- Click on Add a Gadget where ever you want to put your social bookmark icons and choose HTML/JavaScript.

- Paste the below code in the HTML/JavaScript Gadget and save the template.
<ul class='social' id='jquery'>
<li class='delicious' style='opacity: 1;'><a href='http://www.delicious.com/'>
<strong style='opacity:0; top: -1px;'>Delicious</strong></a></li>
<li class='digg' style='opacity: 1;'><a href='http://digg.com/'><strong style='opacity:0;'>Digg</strong></a></li>
<li class='facebook' style='opacity: 1;'><a href='http://www.facebook.com/'><strong style='opacity:0;'>Facebook</strong></a></li>
<li class='flickr' style='opacity: 1;'><a href='http://www.flickr.com/'><strong style='opacity:0;'>Flickr</strong></a></li>
<li class='linkedin' style='opacity: 1;'><a href='http://www.linkedin.com/'><strong style='opacity:0;'>LinkedIn</strong></a> </li>
<li class='reddit' style='opacity: 1;'><a href='http://www.reddit.com/'><strong style='opacity:0;'>Reddit</strong></a></li>
<li class='rss' style='opacity: 1;'><a href='http://feeds.feedburner.com/BestHowToBlogger'><strong style='opacity:0;'>RSS</strong></a></li>
<li class='twitter' style='opacity: 1;'><a href='http://twitter.com/'><strong style='opacity:0;'>Twitter</strong></a></li>
</ul>
#Step 5. Finally Save template and done!.

If you need any help please Leave a response.