Blogger9:- Add super social widget on your blogger add now. 0

Now we share this super widget for your blogger blog this widget has most popular social network share button.
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.

* Go to your blogger Dashboard.

* Now click Design tab And click EDIT HTML.

* Click to box to Expand your template.

* With CTRL+F find  <data:post.body/>

*Now copy below code and paste before  <data:post.body/>

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

* Now again find this code ]]></b:skin> 
 
*Now copy Below code and paste before ]]></b:skin> 

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

* Now Save your remplate now you are done

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: Blogger9:- Add super social widget on your blogger add now. ~