Friday 11 October 2013

Add SOCIALIZE IT Bar Below Post Title In Blogger Blog

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirlBRRJtw8m9quEQfKIctrCU9YfQFsFdT0bGJJ-bp2qjHAvLmMEFrnlFbAu31kCjoIsemgpFR1OPKF1ozXs82HWuE5fTuRrDpXxjNH9HmuI6gjZchY8BJ3BpN7wbZLT0ZCnB56jP3K4UE/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[*/
// 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");
// 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 == &quot;item&quot;'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='nbtsocialshare' id='nbtsocialshare'>
<table class='nbtsocialshare' width='100%'>
    <tr>
<td><div class='sharertitle'>Socialize It &#8594;</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='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' 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.
Update :
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;">



  • Home
  • About Us
  • Contact Us
  • Write For Us
  • Sitemap
  • Privacy Policy
  • Back To Top