Add Horizontal Social Buttons Bar Below Post Title In Blogger | Blogger Yard

Monday, 7 October 2013

Filled Under:

Add Horizontal Social Buttons Bar Below Post Title In Blogger

Posted By:
Mohammed Yaqoob

on 10/07/2013

SOCIALIZE IT →

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>

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!

← Blogger OR Google+ →

Comment Policy : We do receive a lot of comments each day and those comments are moderated by the human being not automated robots. So, Please avoid doing spam and posting links in comments otherwise comment will not be published. We can't tolerate anymore. Thanks for understanding!

19 comments:

Ammar ZebOctober 07, 2013 4:14 am

Really Nice Widget @Yaqoob . Keep Blogging :D
ReplyDelete
Replies
Osama ZiaOctober 07, 2013 9:47 am

This is good Man! I appreciate your hard work!
ReplyDelete
Replies
Luqman khanOctober 07, 2013 11:33 am

Hey Yaqoob,
You are doing a great job. However I don't work on blogger but i like your contribution to other blogger users. You are doing more then good! Keep sharing such posts, and one day you will be counted in the top bloggers of Pakistan! Best of Luck!
ReplyDelete
Replies
furqan haiderOctober 07, 2013 2:27 pm

Man you are really working hard thanx for sharing

Regards,
http://probloggerwidgets.blogspot.com/
ReplyDelete
Nick SterOctober 08, 2013 10:37 am

can't find 'div class='post-body entry-content'' in my template , help!
ReplyDelete
Replies
L'impresario MagazineOctober 10, 2013 3:30 am

Great job man!!

Can you pl have a look at my blog and give suggestions...
www.limpresariomag.blogspot.in

Email id:limpresariomag@gmail.com
ReplyDelete
L'impresario MagazineOctober 10, 2013 3:31 am

I have added the code but the social buttons are not showing..Pl. help..
ReplyDelete
Shoaib GhanjeraOctober 11, 2013 6:03 am

TH@NKS BROTHER NICE WORK

http://apple448.blogspot.com/
ReplyDelete
Muneeb ur RehmanOctober 13, 2013 2:54 am

Its Nice Bro Thanks For The Tip
Top 5 Blogger Premium Templates
ReplyDelete
hasan aliOctober 13, 2013 5:24 am

Its nice article dear keep it. Do a visit on
How to Add Professional Subscribe Box Widget in Blogger
ReplyDelete
fasil akOctober 15, 2013 2:22 am

Great plugin for blogger, Thanks. Keep creating

My Blog
ReplyDelete
akhil kumarOctober 30, 2013 6:25 am

Iam sorry it shows an error on my blog www.mediamanza.blogspot.com
Could not load template preview: Error parsing XML, line 2472, column 114: The reference to entity "send" must end with the ';' delimiter.
ReplyDelete
Umesh ShresthaOctober 31, 2013 7:40 am

huh!! Really this is great Thank you for your these kind of help for new bie like me... im from Nepal I'm a one of Regular reader of your Blog .... once again want to say Thank you!!

www.meroconcept.blogspot.com
ReplyDelete
louis wayneNovember 07, 2013 7:19 am

hey mr yaqoob

nice website keep posting .i also made website in weebly just visit www.cbsezone.weebly.com
ReplyDelete