Floating Social Sharing Horizontal Bar For BlogSpot

The steps are created in such a way that each and every visitor can easily follow then without facing any problem whatsoever, so just follow the instructions as mentioned below.

STEP#1: Adding the Jquery Plugin In Blogger Template:

• Go To Blogger.com >> Your Blog >> Template
• Now Backup your template.
• Then select Edit HTML >> Proceed
• Don’t forget to Click/Tick the Expand Template Widgets box.
• Search for </head> and just above it paste 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 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("#mblSocialFloat");a.wrap('<div id="mblSocialPlaceholder"></div>').closest("#mblSocialPlaceholder").height(a.outerH eight());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:"-1 50px"}):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","twitt er-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://plat form.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.insertBefo re(a,b)})(); /*]]>*/ </script> </b:if>

STEP#2: Adding the Horizontal Social Sharing Button in Blogger Template:

• Now let’s add the final chunk of code, Search for <data:post.body/> and just before/above it paste the following coding.

<!-- E-ideamart.blogspot.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_face s=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quo t;' 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/AVvXsEglqNdJ9N9BsPYfC-WR_5nXIdFUn4c1m8UdejJaP4taSHZ7pfgfFyYfa6PUi0LTwF_cX6LwavWvhQ2XGV0m0rTMoC4PDwtik5Q8Mbp8o1GGSNDLbBmwyjXddm0uMB09gE1Mi33qGEKfauvQ/s1600/w2 b-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 just go a head and Save your Template by pressing Save template button.