How to Add Social Sharing Widget below Blog Posts

Social networking sites are getting more and more important for bloggers. Social media presence is now more important than ever before. Search engines like Google, Bing etc. are giving preference to sites with good social media presence in the search results. So, every webmaster or blogger is looking for various ways to increase the social media presence for his/her blog or website. One of the best ways to get more shares, likes and tweets is by adding social sharing buttons on your website or blog.

Today, I am here with an easy guide to Add Social Sharing Widget below Blog Posts in your blogger blog that will help you to gain more likes and shares for your blog post. If you are one of those who is looking for more social shares then this Social Sharing Widget below Blog Posts will help you to do so.

Read: Social Media widget for Blogger

Add Social Sharing Widget below Blog Posts:

1. Log in to your Blogger Account.

2. Go to Template and back up your template.

3. Now click on "Edit HTML" and search for "</head>" section by using ctrl+F keys.

4. Copy the code given below and paste it just above </head> the section.

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

// Twitter
undefinedfunction undefineda, b, c){var d=a.getElementsByTagNameundefinedb)[0];if undefined!a.getElementByIdundefinedc)){a=a.createElementundefinedb);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBeforeundefineda, d)}})undefineddocument, "script", "twitter-wjs");
// Stumbleupon
undefinedfunction undefined){var a=document.createElementundefined"script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagNameundefined"script")[0];b.parentNode.insertBeforeundefineda, b)})undefined);

</script>


<style type='text/css'>

/*--------Social Sharing Button by SBT--------*/
#SocialSBT {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 610px;
    margin-bottom: 20px;
    margin-left: -10px;
    margin-top: 10px;
}

.headingsharer h5 {
    float: left;
    padding-right: 20px;
    padding-top: 18px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 10px;
}

.tweetSBT, .fbSBT, .g-plusones, .stumbleSBT {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.g-plusones {
    margin-left: 20px;
}

</style>

</b:if>

5.  Click the "Save Template" option.

6. Now search for <div class="post-footer">

7. Add the following code just below it.

<b:if cond='data:blog.pageType == "item"'>
<div id='SocialSBT'>
 <div class='headingsharer'>
  <h5>SOCIALIZE IT →</h5>
 </div>
 <div class='tweetSBT'>
  <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
 </div>
 <div class='fbSBT'>
  <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.smartbloggertricks.com&amp;width=80&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=388183741216818" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
 </div>
 <div class='g-plusones'>
  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
  </div>
  <div class='stumbleSBT'>
   <su:badge expr:location='data:post.url' layout='1'/>
  </div>
 </div>
 </b:if>

8. Click Save Template.

That's it, You are done with the step by step guide to add Social Sharing Widget below Blog Posts. If you faced any issue while following this guide then share it with us by leaving a comment below.