Best Social Bookmarking Widget for Blogger (With Counter Button)

Having a social bookmarking icons on a blog is almost necessary for every blogger users in present. There is a booming demand in the market to have a Best Social Bookmarking Widget for Blog.

Two most beautiful features of this Social bookmarking widget are:

• Sleek icons (Best to fit anywhere on the page)

• Counter buttons (User can have idea about the posts popularity by showing the counter numbers)

After reading below given article, you will know that how you can add a Sleek or a Small Social media Icons as a social bookmarking widget in your blogspot blog

To add this Social Bookmarking widget in your blogger blog, you just need to follow the simple steps given below to. This Sleek social media icons include a digg button, re-tweet button, face-book share button, stumble upon button and a cute email this post link button.

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 and checked the Expand Widget Templates Check box.

#Step 2. Find this code:

<data:post.body/> and replace it wit this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='social'>

<b class='si'>Spread it!</b>

<div class='social_button dg'>

<a class='DiggThisButton DiggCompact'/><script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>

</div>

<div class='social_button tm'>

<script type='text/javascript'>

tweetmeme_style = &quot;compact&quot;;

</script>

<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>

</div>

<div class='social_button fb'>

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

</div>

<div class='social_button su'>

<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>

</div>

<div class='social_button buzz'>

<a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>

<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>

</div>

<div class='social_button em'>

<a expr:href='&quot;mailto:?subject=Sharing:&quot; + data:post.title + &quot;&amp;body=I wanted to share this with you. Thought you might enjoy it:%0A%0A&quot; + data:post.url' target='_blank' title='Email This'>Email This</a>

</div>

</div>

<div class='clear'/>

</b:if>

<data:post.body/>

#Step 3. Find this code:

]]></b:skin> and replace it with this code:

.social { border: dashed #ddd; border-width:1px 0 1px 0; margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }

.social .social_button {float: left; display: inline; overflow: hidden; height:22px; }.social .si { float:left;padding-top:3px;}

.social .social_button.dg { margin: 0px 0 0 30px ; padding-top: 2px;}

.social .social_button.tm { margin: 0px 0 0 32px; padding-top: 4px;}

.social .social_button.fb { margin: 0 0 0 15px; padding-top:3px;}

.social .social_button.su { margin: 0px 0 0 25px; padding-top: 2px;}

.social .social_button.em { margin: 0 0 0 25px; padding-top: 3px;}

.social .social_button.buzz { margin-left:30px ; padding-top: 3px;}

.social .social_button.em a{background:#eee url(http://img180.imageshack.us/img180/1989/emailj.gif) 3px 50% no-repeat; padding:2px 3px 2px 22px; font-size:10px; border:#ddd 1px solid; text-decoration:none; -moz-border-radius: 3px; -webkit-border-radius: 3px;}

.social .social_button.em a:hover {background:#ddd url(http://img180.imageshack.us/img180/1989/emailj.gif) 3px 50% no-repeat}

.social .social_button a img { border: 0; padding: 0; }

.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#555;}

.clear{clear:both;}

]]></b:skin>

#Step 4. Save template and done!.
If you have any query then just leave a comment, i would love to help you

Goog Luck !!

Baca Juga