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.
How To Install It in Blogger BlogSpot Blog:
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 == "item"'>
<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.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[*/
(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>
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.
<!-- http://www.bloggerheroe.com/ Floating Social Bar -->
<b:if cond='data:blog.pageType == "item"'> <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='"//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"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/> </td> <td> <div class='w2bPinitButton' expr:id='"w2bPinit-" + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'> <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'/> </td> <td> <su:badge expr:location='data:post.url' layout='1'/> </td> <td> <a class='DiggThisButton DiggCompact'/> </td> </tr> </table> </div> </b:if>
<!-- http://www.bloggerheroe.com/ Floating Social Bar -->
- Now everything is completed just go a head and Save your Template by pressing Save template button.
Features of Floating/Scrolling Social Sharing Horizontal Bar For Blogger:
- The most impressive feature of this widget is that, it scrolls along with your screen like a small sticky bar.
- It starts scrolling from where it is placed in your blog and float till the comment section.
- It has Facebook Like, Twitter Share, Google+ 1, Stumble it, Pin it and Digg it buttons.
- It is built with ultra-fast Jquery and CSS so you will not notice any sort of speed issues.
- You can use this Plugin in 99 Percent of Blogger Template without facing any difficulties.
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:53 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