How To Add New Floating Social Sharing Bar Widget for Blogger / Blogspot

New Taped / Floating Sociable distribution Level Bar Widget for Blogger. This widget is requested by one of bloggerhero reverend, and thanks for requesting this new widget for you as shaft as for our Readers.
Reaching to this widget, it is swimming sociable intercourse bar widget with sideboard and is displayed in above the post body. patch you scrolling this horizontal multiethnic bar is geosynchronous to the top of Situation. which testament afford to readers to percentage the writer forthwith 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?

  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

THE JQUERY PLUGIN!

As e’er, it is jQuery supported widget, and your journal moldiness know the jQuery plugin. if your blog already tally a fashionable jQuery plugin, then Ignore this locomotion and flat simulate the Indorsement interval.
If not add the below snippet codification before tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">script>
THE SOCIAL SCRIPTS

This Codes contains jQuery calls and Party switch scripts and styles, and those are loads only in Author Pages which module change, fill dimension when you on home or remaining pages. 
Add the beneath snippet encrypt before tag

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*
#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">
/*
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('
'
).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://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js">script>
<script type="text/javascript">
/*
// 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 net Interpersonal naiant bar widget cipher.
Add this write before    tag.
<b:if cond='data:blog.pageType == "item"'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table width="100%" class="w2bSocialFloat">
<tr>
<td>
<a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweeta>
td>
<td>
<iframe expr:src=""//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true">iframe>
td>
<td>
<div expr:id=""w2bPinit-" + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
<data:post.body/>
<script type="text/javascript">
w2bPinItButton({
url:"",
thumb: "",
id: "",
defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
pincount: "horizontal"
});
script>
div>
td>
<td>
<div class="g-plusone" data-size="medium" expr:data-href="data:post.url">div>
td>
<td>
<su:badge layout="1" expr:location="data:post.url">su:badge>
td>
<td>
<a class="DiggThisButton DiggCompact">a>
td>
tr>
table>
div>
b:if>
Save the template and check your blog post pages, a working and awesome jQuery based floating social horizontal bar on your blog.

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Comments

  1. dayo odunukan says:

    I’ve been looking for dis widget for my blogger site earnonlineng.com

  2. adrian lucernas says:

    Thanks, I hope this widget will help you bro.

Speak Your Mind

*


*