How to easy use Floating Social Sharing Header Bar Widget For Blogger

/
Comments
Share on Google Plus

How To Install It in Blogger BlogSpot Blog :

1. Adding the Jquery Plugin In Blogger Template:

  1. Go To Blogger.com >> Your Blog >> Template
  2. Now Backup your template.
  3. Then select Edit HTML >> Proceed
  4. Don’t forget to Click/Tick the Expand Template Widgets box.
  5. 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'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #mblSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #mblSocialFloat td{padding:4px;margin:0;border:none;}
 #mblSocialFloat td iframe{max-width:82px;width:82px !important;}
 #mblSocialFloat.mblFloatSocial{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("#mblSocialFloat");a.wrap('<div id="mblSocialPlaceholder"></div>').closest("#mblSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#mblSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("mblFloatSocial"):a.removeClass("mblFloatSocial");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://mbl-flipper-google-blogger.googlecode.com/files/mbl_blogger_pinit.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)})();
 // Stumbleupon
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Digg
 (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>


2: Adding the Horizontal Social Sharing Button in Blogger Template:
      
      6. Now let’s add the final chunk of code, Search for <data:post.body/> and just before/above it paste the following coding.
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='mblSocialFloat' id='mblSocialFloat'> <table class='mblSocialFloat' width='100%'>  <tr>  <td>  <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>  </td>  <td>  <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;'/>  </td>  <td>  <div class='w2bPinitButton' expr:id='&quot;w2bPinit-&quot; + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'>   <data:post.body/>  <script type='text/javascript'>  w2bPinItButton({   url:&quot;<data:post.url/>&quot;,   thumb: &quot;<data:post.thumbnailUrl/>&quot;,   id: &quot;<data:post.id/>&quot;,  defaultThumb: &quot;http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg&quot;,   pincount: &quot;horizontal&quot;   });  </script>   </div>  </td>  <td>  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>  </td>  <td>  <su:badge expr:location='data:post.url' layout='1'/>  </td>  <td>  <a class='DiggThisButton DiggCompact'/>  </td>  </tr> </table> </div> </b:if>
    7. Now everything is completed just go a head and Save your Template by pressing Save template button.

    >>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.



    Features Of Floating/Scrolling Social Sharing Horizontal Bar For Blogger:

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



    You may also like