Floating Social Sharing Horizontal Bar For BlogSpot

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

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

Comment With:
OR
Choose Wisely!

38 comments

August 15, 2012 at 12:19 PM

Cool !!

August 15, 2012 at 12:22 PM

waiting for this post...
thanx bro.

August 16, 2012 at 3:36 AM

amazing post thanks for sharing this :)

August 16, 2012 at 5:05 AM

My first comment on MBL

This is Awesome. Keep it Up Mate :)

August 25, 2012 at 7:50 PM

Did not work for me, the preview looked no different.

August 27, 2012 at 9:31 AM

Thanks. Great, but it didn't work in my home page.

Editorial Team MOD
August 27, 2012 at 9:34 AM

Brother it is For Posts Only :)

Anonymous
August 27, 2012 at 9:42 AM

it working but another problem, it seem my sliding pic feature post
appear to be broken...it effect the widget and doesn't moving like suppos to

Editorial Team MOD
August 27, 2012 at 9:49 AM

Yes, Because to Scripts of Same Function are conflicting.

August 31, 2012 at 9:55 AM

:( It not working in my blog :(

Editorial Team MOD
September 1, 2012 at 1:51 AM

What Error You are Facing? Provide Your Template in XML Format @ contact.mybloggerlab.com so we can help Peace

September 5, 2012 at 4:27 AM

Thanks Syed Faizan Ali! I Do it again and i Success!
This code Error because HTML + JavaScript + CSS code when copy it make 1 line -> Error. I Think you should fix it for line by line! :D

Editorial Team MOD
September 5, 2012 at 7:30 AM

Thanks We will be working on it. Peace

Anonymous
September 29, 2012 at 11:57 PM

Hi, now its working on my blog...may i have your permission to share your widget on my blog for my malaysian fellow, since some of theme r not very good in english & trouble to finding a perfect widget for their own blog (newbie blogger). I volunteer to help them & traslate into my language. In return i will put your blog domain on my blog to promote yours. Of course i will tell them this widget are belong to you (not mine). I hope my shared idea will bring a good for both of us. Tq.

Editorial Team MOD
September 30, 2012 at 12:01 AM

Hey, Yes Surely it will be great if you can share it with your fellows in your native language. As long as you link to the MBL Blog then we have no problem whatsoever. Peace and Blessings

Anonymous
September 30, 2012 at 7:08 AM

TQ very much :)

Anonymous
October 6, 2012 at 11:59 PM

Hey Hasan, is this artificial w2b?

October 28, 2012 at 7:31 PM

Awesome widget, I installed it on my blog, need your help to fix and fit the size of my content container.

Link: Tips on Tricks

Editorial Team MOD
October 29, 2012 at 12:57 AM

Hey, Dude. This widget automatically fixed the Content container you must be using a custom theme. Because its width is 100%. Peace

November 7, 2012 at 7:44 AM

I have two
Which one, please??

November 17, 2012 at 7:14 PM

the social sharing bar show up..but it's not floating when i scroll down the page..I haven't modified the code..please show me where did I go wrong?

November 19, 2012 at 7:17 AM

Yeah I have same problem as Putra Kembara please help us syed

November 23, 2012 at 10:05 AM

there are multiple four numbers exactly. where to add the code?


November 23, 2012 at 10:06 AM

I mean data post body code please help.

Anonymous
November 24, 2012 at 1:59 AM

Hai Syed, i very love this widget and i copied this article with URL http://d-copy.blogspot.com/2012/11/social-sharring-horizontal-bar-mendatar-untuk-blogger.html.

If u dont like, u can protest Syed. Thank's.

January 5, 2013 at 11:08 PM

I would like to use this in a wordpress blog, Can you please provide a plugin of this?
Thanks.

Editorial Team MOD
January 6, 2013 at 2:04 AM

I Guess there are already few plugins for that? Tell me if i am wrong.

January 6, 2013 at 6:09 AM

@Syed: No I searched a lot. Its better if you write a tutorial for the same.

Editorial Team MOD
January 6, 2013 at 6:43 AM

Well WP is not our cup of Tea. But, We will try to full fill your needs.

January 15, 2013 at 2:55 AM

hi syed ...its not coming on my site.. <> is at 4 places in the HTML view..

PLEASE HELP..

April 10, 2013 at 12:39 PM

Hi Syed,
I just want to add only blog post title when tweeting blog post on Twitter. Right now, if I tweet a blog post, it takes blog post title along with the blog title. How to overcome this issue?

Editorial Team MOD
April 10, 2013 at 3:19 PM

Its Quite simple You need to add only Post Title Expr Such as

<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>

expr:data-text='data:post.title' expr:data-url='data:post.url'

Hope that answers your question.

April 27, 2013 at 12:25 PM

Hi..
Tried it on Timeline template.. not working :-(
Pls help

Editorial Team MOD
April 28, 2013 at 10:12 PM

Your Blog URL?

December 23, 2013 at 7:14 AM

nice post thanks bro

March 10, 2014 at 11:24 AM

Good post.... Thanks Syed Faizan Ali! I Do it again and i Success!

May 1, 2014 at 10:57 AM

Thanks bro

DR
January 21, 2015 at 12:12 PM

Nice. Helped Me.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.