Horizontal Social Buttons Bar Below Post Title In Blogger

Adding Horizontal Social Buttons Below Post Title In Blogger Implementing this new horizontal social bookmarking button bar below post title...

Adding Horizontal Social Buttons Below Post Title In Blogger

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 >> Backup Your 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 Blogger Yard ----------------------------------- */
#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.

<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!

Final Words

So friends this was the horizontal social buttons bar which is taken from Templateism so I've shared today and I hope you're going to use it and it will really help you to gain more social traffic and about the demo, you can see it live on this blog just scroll up and look below the post title. Keep visiting us for more widgets and also subscribe us to receive hot updates! Take a lot of care and happy blogging!

Source By Mohammed Yaqoob