Adding a floating SOCIALIZE IT social media tab Below every Post Title In Blogger

Adding a floating SOCIALIZE IT social media tab Below every Post Title In Blogger

 In this tutorial we are going to learn how to add a floating sharing social widget to blogger... all you have to do is just to follow the following procedures enumerated below.. This allows your posts to be shared by readers like me and more.. The most important reason or effectiveness of this widget is just to spread your content and get you more web traffic...... People get to share it on their social media page or home for their Friends and family to read  for themselves

First of all, you need to log in to your blogger dashboard...........
  •  Go To Blogger >>2>>> Template >>3>>> Backup Your Template if really doesnt want to loose your template in case of a wrong installation........
  • Click Edit HTML and  search for  this code  </head> in the template... use CTRL+F
  • Just Above </head> Paste The Following Code.

<style type='text/css'>
    .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( 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);}
<script type='text/javascript'>
// 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 type='text/javascript'>
// Twitter
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);;a.src="//";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="";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

  • Good job.... now that you have already pasted or added the above code , you have to find or locate the second code... <div class='post-body entry-content'>
  • Add or paste the code below....above or before it ..............>>>>>>>>>>>>>

<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%'>
<td><div class='sharertitle'>Socialize It &#8594;</div>
            <div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href=''>Tweet</a></div>
        <div class='fb-like'>    <iframe allowTransparency='true' expr:src='&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>
</td></tr> </table>
</div></div> </b:if>

SAVE YOUR TEMPLATE NOW>>>>>>>>>>>>>>>>>>>>>
                                                                           >>>>>>>>>>>>>>>>>>>>>>    Happy Blogging

    0 default, disqus:

    Post a Comment