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.

FLOATING SOCIAL SHARING BAR

 

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

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Comments

  1. Uche Unogu says:

    Thank you for sharing this. Just implement on my site http://www.onyxministry.org and it looks great. I have a quick question. Is there a way to space the Pinterest button (and all the buttons) so that they are evenly spaced? It appears that they intermingle when someone posts on the Pinterest board. Thanks for your help as always!

  2. dinesh aven says:

    hi thanks for sharing, but i couldn’t find “” in my bloggers’s template code.

  3. adrian lucernas says:

    @dinesh avenwhat code you couldn’t find? let me know.Thanks..

  4. Mohit Kumar says:

    thanks for the post and such a nice widget. but can you tell me what are the settings that if altered can make the widget appear as soon as we start scrolling down.

    This widget appears to late and i think majority of the visitors do not bother to scroll down.

    Thanks in advance.

    Regards, Mohit Kumar, Blogger @ http://www.thegeeksolutions.in

Speak Your Mind

*


*