Add Horizontal Social Buttons Bar Below Post Title In Blogger

Social networking buttons, plugins and widgets are known as one of the most important things for a blog as it helps in various places like gaining more traffic from social sites, allowing readers to share your posts and many more. Previously, we had shared many social and as well as other widgets which are placed in our widget library and today we're going to share another beautiful widget which is going to help you and your blog from many sides.

Horizontal Social Buttons Bar

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. This social buttons bar comes with a title which will help to get more shares and four different buttons from different social sites. These four buttons are Twitter's tweet button, Facebook's like button, Google Plus's +1 button and Stumble Upon's stumble it button. These all buttons are from well reputed social sites which are being used widely in the world and they will definitely help you, me and other or whoever use this, will get good number of traffic towards his blog from these social sites. And there is nothing to do for receiving traffic, you just need to place those buttons on your blog and your readers will automatically do the job if you've some loyal readers. I mean, they will socialize your content which can help you to receive good traffic. Basically, these buttons are built with XML, CSS, HTML and JavaScript which are used by developers of these buttons to prepare them. We've customized the coding of these buttons in such way that they will only load when they're needed and it really helps in improving the page load speed of your blog and it is also important to take a note about it while implementing new things in your blog.

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 (){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 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>