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.

Best Social Bookmarking Widget To Add in Blogger

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.

Social Bookmarking Button Demo

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.

Design Edit HTML

#Step 2. Copy below code and paste it just before the ]]></b:skin> code.
.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;
// 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
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 0.2);

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

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

$(&amp;quot;a strong&amp;quot;, this)
opacity: 0,
top: &amp;quot;-1px&amp;quot;
}, 300);

- 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.

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>

#Step 5. Finally Save template and done!.

If you need any help please Leave a response.

9 Responses to "Another Best Social Bookmarking Widget To Add in Blogger" - Leave a response

  1. Beben November 10, 2010 at 10:40 PM
    very useful blog my friends...
    salam blogger from Bandung blogger
    salam blogger \m/
  2. Piyush - Admin @ Blogger How To Tips November 21, 2010 at 2:21 PM
    @Beben, thank you very much for appreciating my work :)
  3. scarves January 21, 2011 at 2:13 PM
    Scarves Scarves
    Lovely idea!! I always enjoy the posts! Looking forward to many more (:
  4. Anonymous February 5, 2011 at 12:47 PM
    Nice blog!

    I like the tips here. Need to apply some on my blog
  5. fufu February 9, 2011 at 12:16 AM
    guys, I want to ask, this comment column look awesome. to admin blue, while others are gray. how to make it?

  6. Piyush - Admin @ Blogger How To Tips February 16, 2011 at 10:16 PM
    @sharon_flavia, which kind of help ?

Post a Comment

^ Scroll to Top