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'>
(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 M4Mohandis ----------------------------------- */
#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!
