Add Social Media Sharing Buttons Below Post Title

Social Networking Sites Like Facebook, Twitter, Google Plus, Digg are the great traffic source for every blog. So we need to thing more about social media. You have seen it on many blogs they used sharing buttons below each post title. Here i am designed popular buttons for your blog. Its easy and simple. Just follows these simple steps.



How To Add Social Media Sharing Buttons Below Post Title?

1. Go to Blogger > Template > Edit Html.
2. Back up your Template.
3. Expand Widget Templates.
4. Search for <div class='post-header-line-1'/>
5. Paste the following code just below it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='padding:4px;'>
<table border='0'><tbody><tr>

<td>
<div style='margin-right:5px;'>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</td>


<td>
<div style='margin-right:5px;'>
<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:0px; width:100px; height:20px;'/>
</div>
</td>


<td>
<div style='margin-right:5px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>


<td>
<div style='margin-right:5px;'>
<a expr:href="&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
</div>
</td>


<td>
<div style='margin-right:5px;'>
<script type="text/javascript">

(function() {

var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

s.type = 'text/javascript';

s.async = true;

s.src = 'http://widgets.digg.com/buttons.js';

s1.parentNode.insertBefore(s, s1);

})();

</script>
<a class='DiggThisButton  DiggCompact' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'></a>
</div>
</td>

</tr></tbody></table>
</div>
</b:if>

6. Save your template.

Hope you liked this article. Thanks for reading. Now, visit your blogs and see it appearing only on post pages and not the homepage.

Blogger Tutorials, Blogger Widgets