Add +1 and Delicious Sharing Count Buttons To Blogger Posts

What could be more exciting then to have all major social networking buttons all together. Internet is turning more and more social and soci...

What could be more exciting then to have all major social networking buttons all together. Internet is turning more and more social and social media networks help a lot in circulating content and in bringing handsome traffic. Google+ is the talk everywhere now and old bookmarking services like StumbleUpon and Delicious still remains important tools for ranking higher in search listings. I have combined the count buttons for +1, stumbleupon, twitter, Facebook, delicious and with a addthis button which includes 360 other social sharing options. In short the widget today offers all that a blog needs. Lets add it to blogger!

 

Live Demo

 

Add Social Networking Buttons at The Bottom of Posts

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Check the "Expand Widgets Template" box
4. Search for this,

<data:post.body/>

     5.    Just below it paste the following code,

<div style='clear: both;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div align='left'>
<p style='margin:0; border-bottom:1px solid #666666;'><font color='#666666' face='Arial Black' size='5'>Kindly Share The Love &#187;&#187;</font></p>
<table border='0' cellpadding='2' cellspacing='10'><tbody>
    <tr>
<td style='padding-top:8px;'>

<g:plusone size='tall'/>
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</td>
      <td style='padding-top:8px; '>    <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</td>

      <td style='padding-top:8px;'>   <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>

      <td style='padding-top:8px;'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </td>

<td>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js' type='text/javascript'/>
<a class='delicious-button' href='http://delicious.com/save'>
   &lt;!-- {
      url:&quot;<data:post.url/>&quot;
      ,title:&quot;<data:post.title/>&quot;
     
   } --&gt;
   Save on Delicious
</a>
</td>
      <td>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- AddThis Button END -->
</td>
    </tr>
  </tbody></table></div></b:if>

<div style='clear: both;'/>

 

If you wish to change the colour of the bolded black text then simply change this #666666

with a hexadecimal colour code of your choice.

    6.  Save your template and you are all done!

If you faced any problems just let me know. You can try several other social media sharing widgets by reading this post:

• 18+ social media widgets for blogger