How to Add Social Sharing Buttons Below Each Post In BLogger

As social media is growing day by day and is serving bloggers to increase traffic to their blog, it would be great if we make easier for our blog visitors or followers to share our post easily on this social networking sites to drive more traffic to our blog. So today in this post i will show you to add social media sharing widget with Google+, Facebook, Twitter and StumbleUpon sharing button along with counter below every post on blogger. SO lets add this widget to your blog.

social media sharing widget

1. Go to Blogger Dashboard then Go to Template > Edit Html
2. Before Editing Template Backup your Template

3. Check Mark “Expand Widgets Template” box (On Top Left Corner)
4. Now Search for the code given Below by pressing Ctrl + F

<data:post.body/>

5. Just Below <data:post.body/> paste following code.

<div style=’clear: both;’/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div align=’left’>
<p style=’margin:0; border-bottom:2px solid #333;’><font color=’#333‘ face=’Arial Black’ size=’5′>Kindly Share This Post &#187;&#187;</font></p>
<table border=’0′ cellpadding=’5′ 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>
<!– AddThis Button BEGIN mozpk.com–>
<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;’/>

 

  • Replace Kindly Share This Post to what ever text you like.
  • Replace #333 to change font color.
  • Replace #333 to change border color below the text
If you find any difficulty installing this sharing widget to your blog or have any other questions then leave a comment below i will be glad to help you out.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Next Post

Disable Right Click On Your Blog To Prevent Copy/Paste

Mon Nov 7 , 2016
Bloggers always wanted to prevent visitor or other bloggers from copying the unique content from their blog or website. Bloggers do lots of efforts by researching and writing good articles for their blog, where as some just copy there articles and tutorials on their blog from others one. So to […]
Disable Right Click On Your Blog