Sunday, February 16, 2020

Floating Social Sharing Horizontal Bar For Blogspot

Social Networking websites has overstep the middle of the activities of the cyberspace because it able to attract each in addition to every user who using cyberspace either from schools, offices or homes. Now days People beloved to Share stunning article amongst the Social community which benefits everyone altogether. It’s vital for every blogger in addition to webmaster to integrate Social Sharing or Like button inwards their Blog, therefore their visitors tin portion their stories on finest social networking website, this volition non exclusively laissez passer on them coverage but it volition likewise produce loyal readership. There are unlimited Social Share widgets which are available on diverse blogs, but they either lacks inwards counting push or they are non designed well. If you lot accept seen those WordPress Blog which accept a Horizontal Social Sharing Bar that floats when a page is scrolled, therefore today nosotros volition portion the similar form of Widget for Blogger that consists of Facebook, Twitter, Google Plus, Pinterest, Digg in addition to Stumbleupon Sharing buttons.
LIVE PREVIEW:I am quite certain you lot would adore previewing the Floating/Scrolling Social Sharing Buttons, therefore don’t experience shy simply Scroll This Page downward a petty bit, in addition to you lot volition survive able to come across Social Buttons scrolling along you lot at the top of your Screen (In this MBL BLOG).

Features of MBL Floating/Scrolling Social Sharing Horizontal Bar For Blogger:

  • The almost impressive characteristic of this widget is that, it scrolls along amongst your covert similar a modest gluey bar.  
  • It starts scrolling from where it is placed inwards your spider web log in addition to float till the comment section.
  • It has Facebook Like, Twitter Share, Google+ 1, Stumble it, Pin it in addition to Digg it buttons.
  • It is built amongst ultra-fast Jquery in addition to CSS therefore you lot volition non abide by whatever form of speed issues.
  • You tin utilization this Plugin inwards 99 Percent of Blogger Template without facing whatever difficulties.

How To Install It inwards Blogger BlogSpot Blog:

The steps are created inwards such a agency that each in addition to every visitor tin easily follow in addition to then without facing whatever work whatsoever, therefore simply follow the instructions every bit mentioned below.

STEP#1: Adding the Jquery Plugin In Blogger Template:
  • Go To Blogger.com >> Your Blog >> Template
  • Now Backup your template.
  • Then choose Edit HTML >> Proceed
  • Don’t forget to Click/Tick the Expand Template Widgets box.
  • Search for </head> and simply inwards a higher identify it glue 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 company #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 inwards Blogger Template:
  • Now let’s add together the finally chunk of code, Search for <data:post.body/> in addition to simply before/above it glue the next 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/AVvXsEio82J4iw59eES4uRLculSzV53OmO0AH2ZgawoEQvWu8ZH9kQ2ebDcveKfCxsDxrLsA72gazclMm7XHDX4F4zBeWZPvkcBRssQovuOyt17X_vytOFydTC4eDmNGFPPeLKgJ0wy0W_pbHPBc/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 simply overstep a caput in addition to Save your Template past times pressing Save template button.

From the Editor’s Desk:
Hope you lot accept enjoyed the feast of Social networking nosotros are trying to produce to a greater extent than widgets that benefits to you lot in addition to your users. We are using this widget since 2 days on this MBL spider web log in addition to the results are quite unexpected our social sharing increased upwards to 50%, what else you lot want.  If would confront whatever work land adding this widget experience gratis to inquire till in addition to then peace, blessings in addition to happy floating.
Acknowledgement: This widget is created past times and exceptional thank you lot to Harish Dasari for helping us out. Don't forgot to link dorsum if you lot desire to portion this tutorial.

 Related Topics:
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)