Before 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 == "item"'>
<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 = "compact";
</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='"mailto:?subject=Sharing:" + data:post.title + "&body=I wanted to share this with you. Thought you might enjoy it:%0A%0A" + 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.
Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.
Similar Posts
- Social bookmarking widget with large Icons
- Create auto Expandable Posts in Blogger with no image thumbnails
- Share on Facebook buttons with counter for blogger
- Social bookmarking widget with opacity effect for blogger
- Add digg button to each of your blog posts
Article by Dinesh Dhakal
Dinesh has written 311 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.
{ 10 comments… read them below or add one }
Thanks a lot for such a resourceful post Dinesh, I don’t have any use of this now, but believe me I struggled like hell when I was on Blogger, I have recommended this to a few friends already.
.-= Vishal Sanjay´s last blog ..Top 9 viral marketing success stories of the decade =-.
Hello my friend. This thing is really useful. I also attempt to use thesis before but I got discourage about Thesis from the information that SiteSketch101 shared. http://www.sitesketch101.com/is-thesis-the-right-theme-for-you-i-say-no.
So, I decided to use the Ultimate Blogging Theme 3.0 of Carl Ocab and I am having a good experience so far that you don’t need to be a good coder.
By the way, why not use the wordpress bookmarking plugins?
- Felix Albutra
.-= Felix Albutra @ Blogging Access´s last blog ..10 Things to Do After Creating Your Blogger Blog =-.
Cool information dude, but its better if you show demo of that.
.-= Franklin Manuel´s last blog ..Daily Edition, A Premium Blogger Template =-.
This guide is wrong! I am proved but didn’ t happen anything or give me wrong message on html box . Pls can you explain an other method?
The code is absolutely fine. I never write posts without any test and without the confirmation. if you want to see the demo then here it is : http://goo.gl/6ugq
Great set dude. It’s really cool widget. Could get visitors attention.
Btw, i had made a new theme, please care to check it http://www.tt003.blogspot.com
Hello ! I think this post is very useful and it help me very much, nice to read this post
.-= Adsense Tips´s last blog ..9 Tricks I Used To Triple My AdSense Earnings In 30 Days =-.
Love the sleek media icons, was trying to add it to my site but they were all under one another, not too good with all this, can’t figure out why they aren’t side by side. Thanks for any help you can offer.
.-= Steven Roennfeldt´s last blog ..Free seats to fly from Australia to Kuala Lumpur =-.
I would consider using this plugin when I eventually convert to Thesis theme and have saved for a later date. The media icons are all clean and concise.
.-= Justin Germino´s last blog ..Edit and Save ICO Images with PaintNET =-.
great great job….. actually I have used one the blogspot theme you have created… Gazette magazine..in this blog. http://weeklysmashing.blogspot.com
ur a great blogger dude… keep it up… hope I can also make a quick progress as urs….Im quite weak in blogging actually ..wordpress and blogger , I have just started blogging after series of web development…
{ 2 trackbacks }