How To Add Best Social Bookmarking Widget For Blogger

How To Add Best Social Bookmarking Widget For Blogger

1.Login to your blogger dashboard--> desing- -> Edit HTML

2.Scroll down to where you see <div class='post-header-line-1'/> tag.

3.Copy below code and paste it just before the <div class='post-header-line-1'/> tag.

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

4.Scroll down to where you see ]]></b:skin> tag.

5.Now replace it with below 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>

6.Now clik on "Save template" you are done.

Cheers.!