Search Box by All Blogger Tricks

Thursday 24 October 2013

Floating Social Sharing Horizontal Top Bar Widget for Blogger/Website


Freelance Jobs
Floating Social Sharing Horizontal Bar Widget for Blogger/Website. This is a modified & improved version of "New Floating Social Sharing Bar Widget for Blogger / Blogspot" widget published by way2blogging.com.
Coming to this widget, This widget uses jQuery Plugin! and Social Share Widget of Po.st . This is Horizontal social sharing bar widget with counter and is displayed in above the post body. while you scrolling this horizontal social bar is fixed to the top of Post. which will give to readers to share the page immediately by the floating bar. This widget comes with Twitter, Facebook, Google plus, Pinterest, StumbleUpon and Digg buttons.

How to Add Floating Social Sharing Bar Widget?

First,
  1. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
  2. Select the Template > Click on Edit HTML > Proceed
  3. Check/Tick the Expand Template Widgets checkbox
Just follow 3 Simple steps,

The jQuery Plugin!

As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.
If not add the below snippet code before </head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

The Social Scripts

This Code contains jQuery calls and Social button scripts and styles, and those are loads only in Post Pages which will decrease, load time when you on home or other pages.
Add the below snippet code before </head> tag
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #w2bSocialFloat td{padding:4px;margin:0;border:none;}
 #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
 #w2bSocialFloat.w2bFloatSocial{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("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");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 type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>
<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>

Adding Social Buttons Widget

Let’s add the final Social Horizontal share bar with Vertical Counter widget code.
Add this code before <data:post.body/> tag.
[You can also put this code in Sidebar]

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="w2bSocialFloat" class="w2bSocialFloat">

&lt;div class=&quot;pw-widget pw-counter-vertical&quot;&gt;
  &lt;a class=&quot;pw-button-facebook pw-look-native&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;pw-button-googleplus pw-look-native&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;pw-button-pinterest pw-look-native&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;pw-button-twitter pw-look-native&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;pw-button-linkedin pw-look-native&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;pw-button-tumblr pw-look-native&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;pw-button-stumbleupon pw-look-native&quot;&gt;&lt;/a&gt;
  &lt;a class=&quot;pw-button-post-share&quot;&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;script src=&quot;http://i.po.st/static/v3/post-widget.js#publisherKey=k4afsojgqsuulmmpsj8d&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

<script>
var pwidget_config = {
copypaste: false,
};
</script>

</div>
</b:if>

Save Template!!!

Save the template and check your blog post pages, a working and awesome jQuery based floating social horizontal bar on your blog.

copypaste: false, 
true - to switch ON special copy paste feature of Po.st
false - to switch OFF special copy paste feature of Po.st
When someone copy something from your website, then automatically a extra "Read more (with link) line will get added at the in the clipboard which will look like "Read more at http://www.your-website.com/page/date/post/"


1. I found the tag Three times?

If you found the <data:post.body/> three times, then you might using the Auto readmore hack,
Solution:
Search for below two lines
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
Place the Widget code in between the two tags.

2. How to change the background color of Horizontal bar?

You can change the background color of Horizontal bar.
Solution:
In the Second step (The Social Scripts), search for
background:#FFFFFF;
and change the #FFFFFF with your own Hex Color.
Thanks to All.

3. The Offset option.
To change the Offset search for $theOffset in the Second step Code and set the value. Initially it is 0 (Zero).

 Now it's time for Customisations

You can replace script highlighted in yellow with your own scripts or codes that you want to show. Also you can Replace the script shown in yellow with script given below for

1) Social Horizontal Share Bar with Horizontal Counter Widget Code | Live Demo

&lt;div class=&quot;pw-widget pw-counter-horizontal&quot;&gt;
   &lt;a class=&quot;pw-button-facebook pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-googleplus pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-pinterest pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-twitter pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-linkedin pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-stumbleupon pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-post-share&quot;&gt;&lt;/a&gt;&lt;/div&gt;

&lt;script src=&quot;http://i.po.st/static/v3/post-widget.js#publisherKey=k4afsojgqsuulmmpsj8d&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

<small style="float:right;font-size:9px" ><a href="http://www.widgetsbay.com/2013/09/new-floating-social-sharing-bar-widget.html">@WB</a></small>

2) Social Horizontal Share Bar without Counter Widget Code | Live Demo

&lt;div class=&quot;pw-widget pw-counter-none&quot;&gt;
   &lt;a class=&quot;pw-button-facebook pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-googleplus pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-pinterest pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-twitter pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-linkedin pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-tumblr pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-stumbleupon pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-reddit pw-look-native&quot;&gt;&lt;/a&gt;
   &lt;a class=&quot;pw-button-post-share&quot;&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;script src=&quot;http://i.po.st/static/v3/post-widget.js#publisherKey=k4afsojgqsuulmmpsj8d&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

<small style="float:right;font-size:9px" ><a href="http://www.widgetsbay.com/2013/09/new-floating-social-sharing-bar-widget.html">@WB</a></small>

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible


0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved