Sleek Social Media Icons for Blogger

efore I started using Thesis WordPress theme for my blog I have to customize the theme a lot for a better look. It was really a challenging job for me. I have to make it look unique and also attractive with the Thesis theme coding and hacks which was totally different than customization in other wordpress themes. In the process I added the Sleek social media Icons in the theme just below each posts title which makes the Social Sharing much easier and also attractive. I got lots of requests from my blogger readers regarding this social bookmarking icons widget and so I am now here.

Well, Sleek Social media Icons is the social bookmarking widget for the Thesis Woordpress theme by Artofblog and now I have made it compatible for blogger blogs. You just need to follow the simple three steps below to add sleek social media icons into your blogger blog. This Sleek social media icons include a digg button, retweet button, facebook share button,  stumble button and a cute email this post link button.

Sleek Social media Icons

First of all search for the follow line of code in your blogger Template.

<data:post.body/>

Now in second step replace the above line of code with the following block of 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 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/>

Now in third step add the following code CSS code to your Blogger Templates just above]]></b:skin> to give the style to this social Media Icons.

.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 35px; padding-top: 2px;}
.social .social_button.em { margin: 0 0 0 35px; 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 after you perform the above steps, Save your blogger Templates and see the sleek social media icons displayed n each of your blogger posts.