Now Reading
How To Add Horizontal Social Sharing Button In Blogger Easy?

How To Add Horizontal Social Sharing Button In Blogger Easy?

by AdminAugust 26, 2016

Many Bloggers Use Horizontal Social Sharing Button On His Blogs. So Here In This Tutorial Show How To Add 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.

  • Goto 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.src=&quot;//;;d.parentNode.insertBefore(a, d)}})(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
<style type='text/css'>

/*—- Horizontal Social Buttons Bar By WebGyd —- */

#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;
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;
background: url( no-repeat;
height: 22px;
min-width: 30px;
float: left;
margin: 4px 5px 0px 5px;
.google-plus {
margin-left: 20px;
  • 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 WebGyd–>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='SocialShareBar'>
 <div class='social-heading'>
 <h5>SOCIALIZE IT &#8594;</h5>
 <div class='twitter-tweet'>
 <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href=''>Tweet</a>
 <div class='facebook-like'>
<iframe allowTransparency='true' expr:src='&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 class='google-plus'>
 <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
 <div class='comment-counter'>
<div class='share-bubble'/>
 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

Now Press Save Template
So Guys! I Hope you will like this widget If you have any question feel free to ask me anytime.

Please wait...
About The Author

Leave a Response