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?
- Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
- Select the Template > Click on Edit HTML > Proceed
- 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 </head> 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 </head> tag
<b:if cond='data:blog.pageType == "item"'>
<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://bloggerblogwidgets.googlecode.com/svn/trunk/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 net Interpersonal naiant bar widget cipher.
Add this write before <data:post.body/> 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">Tweet</a>
</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:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuUpr0wTkCXrn0vqosgNOjrw_MEea5AXSLFFC09YECqGZvkDMB82Z2fk_E26C3lcuvKG1GXepsxipcGTr42tUr-fL0_NBcXeG1yZLbZPE2QXTK0wtmsBtBcyU5MmY7GBOlfxDbatrFOfdl/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.
Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^
Posted by , Published at 1:55 AM and have
0
comments
My friend was reading the article onHow To Add New Floating Social Sharing Bar Widget for Blogger / Blogspot. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.
Writed by : Admin ID-Netblog
My friend was reading the article onHow To Add New Floating Social Sharing Bar Widget for Blogger / Blogspot. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.
ARTIKEL TERKAIT:
No comments:
Post a Comment