Floating Social Sharing Horizontal Bar For BlogSpot

Socialize It →

Tweet

38

Advertisements

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. If you have seen those WordPress Blog which have a Horizontal Social Sharing Bar that floats when a page is scrolled, so today we will share the similar sort of Widget for Blogger that consists of Facebook, Twitter, Google Plus, Pinterest, Digg and Stumbleupon Sharing buttons.

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 MBL BLOG).

Features of MBL 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.

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

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

<!-- 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/AVvXsEjJAaeY2iQ-emNby00szszHS0kvaRB-EQ8wPERIK9nvc3qwVl_TU7LPCtFT7cdnvCZu4HB-YsUcYingaQC2TS0laSTtboLVW9dr4LibwqndCU7q4K0k5wQNf2LNRRd-_LdJs29ocQnNMEle/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 just go a head and Save your Template by pressing Save template button.

From the Editor’s Desk:

Hope you have enjoyed the feast of Social networking we are trying to create more widgets that benefits to you and your users. We are using this widget since 2 days on this MBL blog and the results are quite unexpected our social sharing increased up to 50%, what else you want.  If would face any problem while adding this widget feel free to ask till then peace, blessings and happy floating.

Acknowledgement: This widget is created by My Blogger Lab and special thanks to Harish Dasari for helping us out. Don't forgot to link back if you want to share 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

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).