How To Add Horizontal Social Sharing Buttons in Blogger

Social Media Widgets and Plugins

As you already know that social sharing is the most important thing for our blogs. Social Sharing help us into drive more traffic from Social Network Websites, allowing readers for share your post and get much more traffic from Social Network Websites.

There are many sites of social networking but most using sites is Facebook,Google Plus and Twitter that's why in this widget there are only three Social Sharing buttons, mostly readers are using this three Social Network.

Must Check: How to Change Mouse cursor

Many bloggers already posted this widget but that contains many error that's why i am sharing this widget, it will works without any error like a cham. So I added a new feature in this widget, Comments Counter which will tell you how much comments are on your post, this widget will only show on Post Page.

Mainly, these widget are built with HTML, CSS, Javascript and XML. In this Horizontal Social Sharing Widget we have customized it very well and buttons made by developers of their websites. This widget will not decrease the loading speed of your blog.

Adding Horizontal Social Sharing Buttons in Blogger

We will add Horizontal Social Sharing Button with Comments Counter below Post Title in Blogger. We have mentioned some steps below follow them exactly.

• Go to Blogger > Template > Editor
• Click inside Editor and Find </head>
• Paste the following code above </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=&quot;//platform.twitter.com/widgets.js&quot;;d.parentNode.insertBefore(a, d)}})(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
</script>
<style type='text/css'>
/*---- Horizontal Social Buttons Bar By MBT ---- */
#SocialShareBar {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
width: 610px;
margin-bottom: 20px;
margin-left: -10px;
margin-top: 10px;
position: relative;
clear:both;
z-index: 9999;
}
.social-heading h5 {
float: left;
padding-right: 20px;
padding-top: 13px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 10px;
font-family: &#39;Lora&#39;,Arial,Helvetica,Geneva,sans-serif;
font-size: 15px;
color: #555555;
}
.twitter-tweet, .facebook-like, .google-plus, .comment-counter {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
width: auto;
height: 22px;
}
.comment-counter a {
text-decoration: none !important;
}
.share-bubble{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOBLkcum_DP1nU5hLKmWSiJl0ZruHHyubTrs9VgqMPynMVC2KJjwEahNsv8O6dyt7QXK6r7wqCuqCwMsVFMIIJcR-idPtxQsugGzV_eoOa3RSiH1PcI2OgGDNoKX5rKapkazkcdfXUChoo/s1600/Comments.png) no-repeat;
height: 22px;
min-width: 30px;
float: left;
margin: 4px 5px 0px 5px;
}
.google-plus {
margin-left: 20px;
}
</style>
</b:if>

• Now Search for Mentioned below Code.

<b:if cond='data:blog.metaDescription == &quot;&quot;'>

• Now Paste the Mentioned below Code above the following Code.

<!-- Horizontal Social Sharing Buttons By MBT -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='SocialShareBar'>
<div class='social-heading'>
<h5>SOCIALIZE IT &#8594;</h5>
</div>
<div class='twitter-tweet'>
<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='facebook-like'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &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:80px; height:21px;'/>
</div>
<div class='google-plus'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div class='comment-counter'>
<div class='share-bubble'/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/></a>
</div>
</div>
</b:if>

• Now Press Save Template 

So Guys! I Hope you will like this widget, If you have any question feel free to ask me

About Author

Hi! I am Sajad Metlo, SEO expert and web developer. The purpose of creating this blog is to provide highly professional tips, top quality Tutorials, Practical SEO tips and methods to earn online.

Subscribe via email

Receive Quality Tutorials Straight in your Inbox by submitting your Email ID below.

How To Add Horizontal Social Sharing Buttons in Blogger

4/ 5

Unknown

Unknown 6/14/2014 2 comments