Wednesday, July 11, 2018

New Floating Social Sharing Bar Widget for Blogger Blogspot

New Floating Social Sharing Bar Widget for Blogger Blogspot


New Fixed / Floating Social sharing Horizontal Bar Widget for Blogger. This widget is requested by one of way2blogging reader, and thanks for requesting this new widget for you as well as for our Readers. :)
Coming to this widget, it 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 TwitterFacebookGoogle plusPinterest, 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,link download

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.