Add Horizontal Social Buttons Bar Below Post Title In Blogger

How TO Add Horizontal Social Share Buttons Bar Below Every Post Title In Blogger

Social Bar below every Post

To add This To Your Blogger-

• Go To Blogger >> Template
• Click Edit HTML and Find For </head> 
• Just Above </head> Paste The Following Code.

<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 (){vara=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 Allin1-Web ----------------------------------- */
#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>

• Now Search For <div class='post-body entry-content'>
• And Above It Paste The Following Code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='SocialBar'>
 <div class='headingsharer'>
  <h5>SOCIALIZE IT &#8594;</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='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &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; width:100px; 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!