Add Horizontal Social Share Buttons Below Post Title In Blogger

Social share buttons installed on your blog has very great importance to boosting huge traffic. There are many sites of social networking but most using sites is Facebook,Google Plus and Twitter that's why in this widget there are only three Social Sharing buttons, mostly readers are using this three Social Network. Social media website play a vital role in blogging careers. It boost the blog post rank well in search engine without using any social services we wont get a good traffics from social networks sites.
This is the horizontal social sharing button bar which we're going to share today. This looks beautiful in the design as the buttons are placed in good manner and each button is separated in squares.

Add Horizontal Social Share Buttons Below Post Title In Blogger

Demo

Implementing this new horizontal social bookmarking button bar below post title in blogger is not a difficult task but you might need a hint or help if you're newbie so below we're going to guide you step by step on how can we do this.

☛ Go To Blogger >> Template >> Edit HTML
☛ Click  and Find For </head>
☛ Just Above </head> Paste The Following Code. [ To copy please click  < > on right side ]

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

<script type='text/javascript'>

// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");
// Stumbleupon
(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();

</script>


<style type='text/css'>

/*Social Bar By Blog Beginner Guide ----------------------------------- */
#SocialBar {
    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;
}

.tweeetero, .fbwolo, .g-plusones, .stumblo {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

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

</style>


</b:if>

☛ Click Save Template and You're Half Done!
☛ Now Search For  <div class='post-body entry-content'>
☛ And Above It Paste The Following Code.  [ To copy please click  < > on right side ]

<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBar'>
 <div class='headingsharer'>
  <h5>SOCIALIZE IT →</h5>
 </div>
 <div class='tweeetero'>
  <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='fbwolo'>
  <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
 </div>
 <div class='g-plusones'>
  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
  </div>
  <div class='stumblo'>
   <su:badge expr:location='data:post.url' layout='1'/>
  </div>
 </div>
 </b:if>

☛ Click Save Template!
☛ You're Done!