Floating Social Sharing Horizontal Bar For Blogspot

Social Networking websites has dice the centre of the activities of the mesh because it able to attract each together with every user who using mesh either from schools, offices or homes. Now days People dear to Share stunning article amongst the Social community which benefits everyone altogether. It’s vital for every blogger together with webmaster to integrate Social Sharing or Like button inwards their Blog, thus their visitors tin dismiss portion their stories on finest social networking website, this volition non alone plough over them coverage but it volition too construct loyal readership. There are unlimited Social Share widgets which are available on diverse blogs, but they either lacks inwards counting push or they are non designed well. If you lot convey seen those WordPress Blog which convey a Horizontal Social Sharing Bar that floats when a page is scrolled, thus today nosotros volition portion the similar kind of Widget for Blogger that consists of Facebook, Twitter, Google Plus, Pinterest, Digg together with Stumbleupon Sharing buttons.

LIVE PREVIEW:I am quite certain you lot would adore previewing the Floating/Scrolling Social Sharing Buttons, thus don’t experience shy simply Scroll This Page downwards a petty bit, together with you lot volition move able to come across Social Buttons scrolling along you lot at the exceed of your Screen (In this MBL BLOG).

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

• The about impressive characteristic of this widget is that, it scrolls along amongst your hide similar a pocket-size viscous bar.  
• It starts scrolling from where it is placed inwards your spider web log together with float till the comment section.
• It has Facebook Like, Twitter Share, Google+ 1, Stumble it, Pin it together with Digg it buttons.
• It is built amongst ultra-fast Jquery together with CSS thus you lot volition non detect whatever kind of speed issues.
• You tin dismiss usage this Plugin inwards 99 Percent of Blogger Template without facing whatever difficulties.

How To Install It inwards Blogger BlogSpot Blog:

The steps are created inwards such a agency that each together with every visitor tin dismiss easily follow together with thus without facing whatever occupation whatsoever, thus simply follow the instructions equally mentioned below.

STEP#1: Adding the Jquery Plugin In Blogger Template:

• Go To Blogger.com >> Your Blog >> Template
• Now Backup your template.
• Then choose Edit HTML >> Proceed
• Don’t forget to Click/Tick the Expand Template Widgets box.
• Search for </head> and simply to a higher identify it glue 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 company #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>

STEP#2: Adding the Horizontal Social Sharing Button inwards Blogger Template:

• Now let’s add together the concluding chunk of code, Search for <data:post.body/> together with simply before/above it glue the next coding.

<!-- MyBloggerLab.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/AVvXsEio82J4iw59eES4uRLculSzV53OmO0AH2ZgawoEQvWu8ZH9kQ2ebDcveKfCxsDxrLsA72gazclMm7XHDX4F4zBeWZPvkcBRssQovuOyt17X_vytOFydTC4eDmNGFPPeLKgJ0wy0W_pbHPBc/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>

<!-- MyBloggerLab.com Floating Social Bar -->

All Done : Now everything is completed simply dice a caput together with Save your Template past times pressing Save template button.

From the Editor’s Desk:

Hope you lot convey enjoyed the feast of Social networking nosotros are trying to practise to a greater extent than widgets that benefits to you lot together with your users. We are using this widget since 2 days on this MBL spider web log together with the results are quite unexpected our social sharing increased upwards to 50%, what else you lot want.  If would seem upwards whatever occupation piece adding this widget experience complimentary to inquire till together with thus peace, blessings together with happy floating.

Acknowledgement: This widget is created past times and particular thank you lot to Harish Dasari for helping us out. Don't forgot to link dorsum if you lot desire to portion this tutorial.

Related Topics:

• Scrolling Social Recommendation Box For Blogger
• Different Ways To Promote Your Blog With Facebook
• How To Add Customized Google Plus Add To Circles Widget In Blogger