Home » Blogger Tutorials » Horizontal Floating Social Sharing Bar For Blogger

Horizontal Floating Social Sharing Bar For Blogger

Category: | Date: 2/20/2013 - No comments
Hello EveryOne! Today is my first post on my blog. So i shared Floating Social Sharing Horizontal Bar For BlogSpot. So i hope You enjoy it.





Social Networking websites has become the center of the activities of the internet because it able to attract each and every user who using internet either from schools, offices or homes. Now days People love to Share stunning article with the Social community which benefits everyone altogether. It’s vital for every blogger and webmaster to integrate Social Sharing or Like button in their Blog, so their visitors can share their stories on finest social networking website, this will not only give them coverage but it will also build loyal readership. There are unlimited Social Share widgets which are available on various blogs, but they either lacks in counting button or they are not designed well.

LIVE PREVIEW: I am quite sure you would adore previewing the Floating/Scrolling Social Sharing Buttons, so don’t feel shy just Scroll This Page down a little bit, and you will be able to see Social Buttons scrolling along you at the top of your Screen (In this Site).

Features of RB Floating/Scrolling Social Sharing Horizontal Bar For Blogger:

  • The most impressive feature of this widget is that, it scrolls along with your screen like a small sticky bar.  
  • It starts scrolling from where it is placed in your blog and float till the comment section.
  • It has Facebook Like, Twitter Share and Google+ 1.
  • It is built with ultra-fast Jquery and CSS so you will not notice any sort of speed issues.
  • You can use this Plugin in 99 Percent of Blogger Template without facing any difficulties.

How To Install It in Blogger BlogSpot Blog:


The steps are created in such a way that each and every visitor can easily follow then without facing any problem whatsoever, so just follow the instructions as mentioned below.

STEP#1: Adding the Jquery Plugin In Blogger Template:
  • Go To Blogger.com >> Your Blog >> Template
  • Now Backup your template.
  • Then select Edit HTML >> Proceed
  • Don’t forget to Click/Tick the Expand Template Widgets box.
  • Search for </head> and just above it paste the follow HTML + JavaScript + CSS code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/> 
(If You Already Have Javascript Added in your Template then Jump to Below Step)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #rbSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #rbSocialFloat td{padding:5px;margin:0;border:none;}
 #rbSocialFloat td iframe{max-width:85px;width:85px !important;}
 #rbSocialFloat.rbFloatSocial{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("#rbSocialFloat");a.wrap('<div id="rbSocialPlaceholder"></div>').closest("#rbSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#rbSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("rbFloatSocial"):a.removeClass("rbFloatSocial");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 src='http://floatingsharing.googlecode.com/files/FSSHBFBS.js' type='text/javascript'/>
<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>
</b:if>
  <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: Write Here Your Publisher Key of Sharethis;, doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>

STEP#2: Adding the CSS of Horizontal Social Sharing Button in Blogger Template:
  • Now let’s add this code, Search for ]]></b:skin> and just before/above it paste the following coding.
.sharertitle {
float: left;
border-right: 1px solid #d2d2d2;
padding: 0px 4px 2px 0px;
margin: 0 0px 0 0;
font-family: 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
line-height: 25px;
vertical-align: middle;
font-size: 14px;
}

 .t-share
{
float: left;
width: 115px;
border-right: 1px solid #d2d2d2;
margin: 0 15px 0 0;
padding: 3px 0 2px;
height: 25px;
}

 .fb-like {
float: left;
width: 115px;
border-right: 1px solid #d2d2d2;
padding: 3px 0 2px;
height: 25px;
}

 g-plusone {
padding: 3px 10px 2px 0px;
}

 STEP#3: Adding the Horizontal Social Sharing Button in Blogger Template:
Now let’s add the final chunk of code, Search for <data:post.body/> and just before/above it paste the following coding.
<!-- LearnFre.blogspot.com Floating Social Bar Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='rbSocialFloat' id='rbSocialFloat' style='width: 570px; top: 0px;'>
<table class='rbSocialFloat' width='100%'>
 <tr>
<td>
<div class='sharertitle'>Socialize It &#8594;</div>
</td>
  <td>
<div class='t-share'>
<span class='st_twitter_hcount' displayText='Tweet'/>
</div>
  </td>
  <td>
<div class='t-share'>
<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:100px; height:20px;'/>
</div>
  </td>
  <td>
<span class='st_googleplus_hcount' displayText='Google +'/>
  </td>
  <td>
   <su:badge expr:location='data:post.url' layout='1'/>
  </td>

 </tr>
</table>
</div>
</b:if>

<!-- LearnFre.blogspot.com Floating Social Bar End -->

 Note: 
  • If You Found <data:post.body/> Two or Three Times then Find This two lines
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<data:post.body/>
If you found the <data:post.body/> three times, then search for two lines below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

Place the Widget code in between the two tags. - See more at: http://www.bwidgets.com/2013/01/floating-social-sharing-bar-widget-for.html#sthash.Z3vkI0Ag.dpuf
If you found the <data:post.body/> three times, then search for two lines below: - See more at: http://www.bwidgets.com/2013/01/floating-social-sharing-bar-widget-for.html#sthash.Z3vkI0Ag.dpuf

Place the Code Between <b:if cond='data:blog.pageType == &quot;item&quot;'> (Your Code Here)
<data:post.body/>

Replace Your Publisher Key with "Write Here Your Publisher Key of Sharethis"

 All Done : Now everything is completed just go a head and Save your Template by pressing Save template button. We Hope You Like This Tutorial. :)

Post a Comment