Social Buttons Plays a Crucial Role In Generating traffic From Social Sites..So Add These Buttons Under Post Title Will Increases Traffic
Adding SOCIALIZE IT Below Post Title In Blogger
Implementing this new horizontal social bookmarking button bar below post title in blogger is not a difficult task..Follow The Below Steps To Add Them Easily- Go To Blogger >> Template >> Backup Your Template
- Click Edit HTML and Find For </head> (Want help to find code Click Here)
- Just Above </head> Paste The Following Code.
<style type='text/css'>
/*<![CDATA[*/
.horizontalsocial .sharertitle{float: left; border-right: 1px solid #d2d2d2; padding: 3px 10px 2px 0px; margin: 0 0px 0 0; color: #b1a9a5; font-family:'Oswald', Arial, Helvetica, sans-serif;text-transform: uppercase; line-height: 25px; vertical-align: middle; font-size: 14px;}
.horizontalsocial .fb-like{width: 100px; float: left; border-right: 1px solid #d2d2d2; padding: 3px 0 2px; height: 25px; }
.horizontalsocial .sharertwitter{float: left; width: 115px; border-right: 1px solid #d2d2d2; margin: 0 15px 0 0; padding: 3px 0 2px; height: 25px;}
.horizontalsocial .sharergplus{float: left; width: 90px; margin: 0 15px 0 15px; padding: 3px 0 2px; border-right: 1px solid #d2d2d2; height: 25px;}
.horizontalsocial .sharerbubble{background: url(http://2.bp.blogspot.com/-Zenaemr3nKw/USzIGk9FTTI/AAAAAAAAB6A/1_wR3MU5Wms/s1600/Commentz.png) no-repeat; height: 25px; min-width: 25px; float: left; margin: 7px 0 0; line-height: 18px; vertical-align: top;}
.horizontalsocial .sharerbubble a{color: #2d2520; padding: 0px 0 0px 30px; font-size: 18px !important; font-family: 'Lora', Arial, Helvetica, san-serif !important; }
.horizontalsocial.fixed{ position:fixed; top: -2px; z-index: 99999;}
#nbtsocialshare {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
#nbtsocialshare td{padding:4px;margin:0;border:none;}
#nbtsocialshare td iframe{max-width:82px;width:82px !important;}
#nbtsocialshare.nbtFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;
jQuery(document).ready(function(b){var a=b("#nbtsocialshare");a.wrap('<div id="nbtSocialPlaceholder"></div>').closest("#nbtSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#nbtsocialshare iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("nbtFloatSocial"):a.removeClass("nbtFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
(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");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
- Now Find For <div class='post-body entry-content'>
- And Just Above/Before It Add The Following Code...
<b:if cond='data:blog.pageType == "item"'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='nbtsocialshare' id='nbtsocialshare'>
<table class='nbtsocialshare' width='100%'>
<tr>
<td><div class='sharertitle'>Socialize It →</div>
</td>
<td>
<div class='sharertwitter'><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>
</td>
<td>
<div class='fb-like'> <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>
</td>
<td>
<div class='sharergplus'> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
</td>
<td>
<div class='sharerbubble'><span class='thecomments'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
</b:if>
</span></div>
</td>
</tr>
</table>
</div></div>
</b:if>
- Click Save Template and You're Done!
- Go To Your Blog And Check It Below Post Title
- If you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.
Make This Bar Floating By Following Below Step
On The Second Code Replace
<div class="horizontalsocial social-buttons" id="horizontalsocial">
With
<div class="horizontalsocial social-buttons" id="horizontalsocial"style="position: fixed;">
