Add Facebook Like Button, Retweet, Stumble and Digg Counter Buttons To Blogger

Ever expected to add the best social media buttons all at one go? Well today’s Widget is not just a smart one but it will surely increase your blog Traffic tremendously. The widget includes Facebook Like Button which is highly appreciated throughout the blogosphere and our favourite the retweet button, Stumble and Digg Counter Buttons. All these buttons are eye catching so the visitors would love clicking them and thus bringing you more and more traffic by sharing your tutorials with people in their social media networks. You can see these buttons in action just under my post titles. So how do we add them? Here we go –>

Demo Screenshot,

How to add Social Media Buttons To Blogger?

The method is as simply as throwing a peanut in air and swallowing it. =p Simply follow these steps,

1. Go To Blogger > Design > Edit HTML
2. Back up your template
3. Check the Expand Widget Templates box
4. Then click Ctrl + F and in the browser search box paste this,

data:post.body

    5. Just above this code paste the giant code below,

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'>
<tr>
<td><div style='padding-top:6px;'>
<script type='text/javascript'>
tweetmeme_style = &quot;compact&quot;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div></td>

<td>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
</td>

<td><div style='margin-left:35px;'>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class='DiggThisButton DiggCompact'/>
</div></td>

<td>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px;  width:100px; height:20px;'/>
</td>
</tr>
</table> </b:if><br/>

 

6.  Save your template and see your blog decorated with some best social media buttons.

 

That’s All!

If you liked the tutorial then kindly be generous enough to liking it :)

Ps: Please Respect copyrights.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 12/24/2010