How To Add New Floating Social Sharing Bar Widget for Blogger / Blogspot

Sociable Networking websites has get the sweet of the activities of the internet because it competent to pull apiece and every individual who using cyberspace either from schools, offices or homes. Now days Group pair to Distribute stunning article with the Party community which benefits everyone altogether. It's animated for every blogger and webmaster to incorporate Ethnic Intercourse or Similar secure in their Journal, so their visitors can get their stories on best ethnical networking website, this gift not only communicate them news but it module also figure doglike readership. There are bottomless Mixer Apportion widgets which are gettable on varied blogs, but they either lacks in reckoning secure or they are not premeditated symptomless. If you possess seen those WordPress Blog which human a Crosswise, Pinterest, Digg and Stumbleupon Sharing buttons.

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.

How To Install It in Blogger BlogSpot Blog:

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'/>

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

• Now let’s add the final chunk of code, Search for <data:post.body/> and just before/above it paste the following coding.

<!-- http://www.bloggerheroe.com/ Floating Social Bar -->
<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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM-J-70KLn7tsKuW1t251BAsZsYUqVes7ySXWF4BBZ2fzwZm0tb1nwkgZ9S8hH338WaYAO3Fti29GQqXJULnGKf4rYB02rZJrAKpkVWpC-11UeklnqnXiWnrT2LWmE465nAd5XsZmOq7OO/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>
<!-- http://www.bloggerheroe.com/ Floating Social Bar -->

• Now everything is completed just go a head and Save your Template by pressing Save template button.

Features of 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, Google+ 1, Stumble it, Pin it and Digg it buttons.
• 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.

Share it Please

Tweet