Sep 1, 2016

Floating - Horizontal Jumbo Share Counter Widget for Blogger

data:blog.title
Hey guys. How are you all? Hope you are enjoying this new month "September". As we have mentioned in our previous article we are here with a detailed article on adding our both (Horizontal and Floating) Jumbo Share Counter widget in blogger at once. We think there is no need to tell you the features and working of these widgets. You can see live demo of this widget on our blog's left sidebar (Floating) and horizontal placed at the bottom of this post. So have a look on it.

Floating Jumbo Share Bar, Horizontal Jumbo Share Bar

Also Read : Cute Popup Email Subscribe Box Widget for Blogger.

Some of our readers facing problem in adding both of the sharing widget at once in their blogspot blogs. Therefore, Today we are here with detailed guide on adding floating and horizontal jumbo share counter widget to blogger blogs.

If you are new to our blog then you must have to know about jumbo share counters. Let us tell you about Jumbo Share Counters "JSC". Actually, Jumbo Share Counter is launched on mybloggertricks.com blog which is property of a well known professional blogger Mohammad Mustafa Ahmedzai.

Mohammad bro launched Jumbo Share Counter on 29 Feb 2016. The attractive thing which we noticed in jumbo share counter is animated counter up feature. Mohammad is well web designer but personally we are not happy with the design of those share bars which Mohammad bro released so far. So, We have designed our own hand made (Using CSS) social share bar for our loyal readers and recently we have introduced our both (Horizontal and Floating) Jumbo Share Counter widget with all of you. Below we are going to attach screenshots of both share bars. Have a look on it.

Horizontal Jumbo Share Counter, Jumbo Share Bar, Horizontal Share Bar for Blogger, Social Sharing widget for blogspot

Floating Jumbo Share Counter,Jumbo Share Bar, Floating Social Share Bar for Blogspot, Social Sharing widget for blogger blogs

We are thankful to Mohammad bro because he always share unique things on their blog like as this jumbo social share counter. Okay now lets get straight to work.

Installation Instructions Of Jumbo Share Counters

First We have to add some necessary JavaScript codes to your blogger blog. The steps below are very easy to follow for everyone.

STEP1] Go To Blogger.com >> Choose Your Blog >> Template >> Backup Your Template First.

STEP2] Click on Edit HTML Button >> Now Click anywhere inside the code area and using CTRL+F search for </head> tag and paste below code just above of it.

 Note:  This step is optional if you have already installed JQuery and FontAwesome libraries in your blogger template then skip this step and head over to next.
<script async="" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"></link>
STEP3] Now Paste the following JavaScript Code just above of </body> in your blogger template.

<script type='text/javascript'> //<![CDATA[
ADD CODE HERE
$(document).ready(function() {
var shareUrl=$("link[rel=canonical]").attr("href");
$.getJSON('https://social-shares.herokuapp.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?",function(data){shares=data.shares;$(".count").each(function(index,el){service=$(el).parents(".share-btn").attr("data-service");count=shares[service];$(el).text(count)});
});
/*#########Animation Settings###########*/
$(window).load(function() {
    $('.anim').counterUp({
      delay:20, //Smaller value gives more frames
      time: 1000 //Higher value slows down animation
    });
});
});
//]]></script>

STEP4] Now in the above code replace ADD CODE HERE line with below code. If problem persist during copy the code then click on view raw and using CTRL+A and CTRL+C to copy whole the code easily from the new tab.


(function(){var _0xc846x0=[]["\x69\x6E\x64\x65\x78\x4F\x66"]||function(_0xc846x0){for(var _0xc846x1=0,_0xc846x2=this["\x6C\x65\x6E\x67\x74\x68"];_0xc846x1<_0xc846x2;_0xc846x1++){if(_0xc846x1 in this&&this[_0xc846x1]===_0xc846x0){return _0xc846x1}};return -1},_0xc846x1=[]["\x73\x6C\x69\x63\x65"];(function(_0xc846x0,_0xc846x1){if( typeof define==="\x66\x75\x6E\x63\x74\x69\x6F\x6E"&&define["\x61\x6D\x64"]){return define("\x77\x61\x79\x70\x6F\x69\x6E\x74\x73",["\x6A\x71\x75\x65\x72\x79"],function(_0xc846x2){return _0xc846x1(_0xc846x2,_0xc846x0)})}else {return _0xc846x1(_0xc846x0["\x6A\x51\x75\x65\x72\x79"],_0xc846x0)}})(this,function(_0xc846x2,_0xc846x3){var _0xc846x4,_0xc846x5,_0xc846x6,_0xc846x7,_0xc846x8,_0xc846x9,_0xc846xa,_0xc846xb,_0xc846xc,_0xc846xd,_0xc846xe,_0xc846xf,_0xc846x10,_0xc846x11,_0xc846x12,_0xc846x13;_0xc846x4=_0xc846x2(_0xc846x3);_0xc846xb=_0xc846x0["\x63\x61\x6C\x6C"](_0xc846x3,"\x6F\x6E\x74\x6F\x75\x63\x68\x73\x74\x61\x72\x74")>=0;_0xc846x7={horizontal:{},vertical:{}};_0xc846x8=1;_0xc846xa={};_0xc846x9="\x77\x61\x79\x70\x6F\x69\x6E\x74\x73\x2D\x63\x6F\x6E\x74\x65\x78\x74\x2D\x69\x64";_0xc846xe="\x72\x65\x73\x69\x7A\x65\x2E\x77\x61\x79\x70\x6F\x69\x6E\x74\x73";_0xc846xf="\x73\x63\x72\x6F\x6C\x6C\x2E\x77\x61\x79\x70\x6F\x69\x6E\x74\x73";_0xc846x10=1;_0xc846x11="\x77\x61\x79\x70\x6F\x69\x6E\x74\x73\x2D\x77\x61\x79\x70\x6F\x69\x6E\x74\x2D\x69\x64\x73";_0xc846x12="\x77\x61\x79\x70\x6F\x69\x6E\x74";_0xc846x13="\x77\x61\x79\x70\x6F\x69\x6E\x74\x73";_0xc846x5=function(){function _0xc846x0(_0xc846x0){var _0xc846x1=this;this["\x24\x65\x6C\x65\x6D\x65\x6E\x74"]=_0xc846x0;this["\x65\x6C\x65\x6D\x65\x6E\x74"]=_0xc846x0[0];this["\x64\x69\x64\x52\x65\x73\x69\x7A\x65"]=false;this["\x64\x69\x64\x53\x63\x72\x6F\x6C\x6C"]=false;this["\x69\x64"]="\x63\x6F\x6E\x74\x65\x78\x74"+_0xc846x8++;this["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]={x:_0xc846x0["\x73\x63\x72\x6F\x6C\x6C\x4C\x65\x66\x74"](),y:_0xc846x0["\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70"]()};this["\x77\x61\x79\x70\x6F\x69\x6E\x74\x73"]={horizontal:{},vertical:{}};_0xc846x0["\x64\x61\x74\x61"](_0xc846x9,this["\x69\x64"]);_0xc846xa[this["\x69\x64"]]=this;_0xc846x0["\x62\x69\x6E\x64"](_0xc846xf,function(){var _0xc846x0;if(!(_0xc846x1["\x64\x69\x64\x53\x63\x72\x6F\x6C\x6C"]||_0xc846xb)){_0xc846x1["\x64\x69\x64\x53\x63\x72\x6F\x6C\x6C"]=true;_0xc846x0=function(){_0xc846x1["\x64\x6F\x53\x63\x72\x6F\x6C\x6C"]();return _0xc846x1["\x64\x69\x64\x53\x63\x72\x6F\x6C\x6C"]=false};return _0xc846x3["\x73\x65\x74\x54\x69\x6D\x65\x6F\x75\x74"](_0xc846x0,_0xc846x2[_0xc846x13]["\x73\x65\x74\x74\x69\x6E\x67\x73"]["\x73\x63\x72\x6F\x6C\x6C\x54\x68\x72\x6F\x74\x74\x6C\x65"])}});_0xc846x0["\x62\x69\x6E\x64"](_0xc846xe,function(){var _0xc846x0;if(!_0xc846x1["\x64\x69\x64\x52\x65\x73\x69\x7A\x65"]){_0xc846x1["\x64\x69\x64\x52\x65\x73\x69\x7A\x65"]=true;_0xc846x0=function(){_0xc846x2[_0xc846x13]("\x72\x65\x66\x72\x65\x73\x68");return _0xc846x1["\x64\x69\x64\x52\x65\x73\x69\x7A\x65"]=false};return _0xc846x3["\x73\x65\x74\x54\x69\x6D\x65\x6F\x75\x74"](_0xc846x0,_0xc846x2[_0xc846x13]["\x73\x65\x74\x74\x69\x6E\x67\x73"]["\x72\x65\x73\x69\x7A\x65\x54\x68\x72\x6F\x74\x74\x6C\x65"])}})}_0xc846x0["\x70\x72\x6F\x74\x6F\x74\x79\x70\x65"]["\x64\x6F\x53\x63\x72\x6F\x6C\x6C"]=function(){var _0xc846x0,_0xc846x1=this;_0xc846x0={horizontal:{newScroll:this["\x24\x65\x6C\x65\x6D\x65\x6E\x74"]["\x73\x63\x72\x6F\x6C\x6C\x4C\x65\x66\x74"](),oldScroll:this["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]["\x78"],forward:"\x72\x69\x67\x68\x74",backward:"\x6C\x65\x66\x74"},vertical:{newScroll:this["\x24\x65\x6C\x65\x6D\x65\x6E\x74"]["\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70"](),oldScroll:this["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]["\x79"],forward:"\x64\x6F\x77\x6E",backward:"\x75\x70"}};if(_0xc846xb&&(!_0xc846x0["\x76\x65\x72\x74\x69\x63\x61\x6C"]["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]||!_0xc846x0["\x76\x65\x72\x74\x69\x63\x61\x6C"]["\x6E\x65\x77\x53\x63\x72\x6F\x6C\x6C"])){_0xc846x2[_0xc846x13]("\x72\x65\x66\x72\x65\x73\x68")};_0xc846x2["\x65\x61\x63\x68"](_0xc846x0,function(_0xc846x0,_0xc846x3){var _0xc846x4,_0xc846x5,_0xc846x6;_0xc846x6=[];_0xc846x5=_0xc846x3["\x6E\x65\x77\x53\x63\x72\x6F\x6C\x6C"]>_0xc846x3["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"];_0xc846x4=_0xc846x5?_0xc846x3["\x66\x6F\x72\x77\x61\x72\x64"]:_0xc846x3["\x62\x61\x63\x6B\x77\x61\x72\x64"];_0xc846x2["\x65\x61\x63\x68"](_0xc846x1["\x77\x61\x79\x70\x6F\x69\x6E\x74\x73"][_0xc846x0],function(_0xc846x0,_0xc846x1){var _0xc846x2,_0xc846x4;if(_0xc846x3["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]<(_0xc846x2=_0xc846x1["\x6F\x66\x66\x73\x65\x74"])&&_0xc846x2<=_0xc846x3["\x6E\x65\x77\x53\x63\x72\x6F\x6C\x6C"]){return _0xc846x6["\x70\x75\x73\x68"](_0xc846x1)}else {if(_0xc846x3["\x6E\x65\x77\x53\x63\x72\x6F\x6C\x6C"]<(_0xc846x4=_0xc846x1["\x6F\x66\x66\x73\x65\x74"])&&_0xc846x4<=_0xc846x3["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]){return _0xc846x6["\x70\x75\x73\x68"](_0xc846x1)}}});_0xc846x6["\x73\x6F\x72\x74"](function(_0xc846x0,_0xc846x1){return _0xc846x0["\x6F\x66\x66\x73\x65\x74"]-_0xc846x1["\x6F\x66\x66\x73\x65\x74"]});if(!_0xc846x5){_0xc846x6["\x72\x65\x76\x65\x72\x73\x65"]()};return _0xc846x2["\x65\x61\x63\x68"](_0xc846x6,function(_0xc846x0,_0xc846x1){if(_0xc846x1["\x6F\x70\x74\x69\x6F\x6E\x73"]["\x63\x6F\x6E\x74\x69\x6E\x75\x6F\x75\x73"]||_0xc846x0===_0xc846x6["\x6C\x65\x6E\x67\x74\x68"]-1){return _0xc846x1["\x74\x72\x69\x67\x67\x65\x72"]([_0xc846x4])}})});return this["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]={x:_0xc846x0["\x68\x6F\x72\x69\x7A\x6F\x6E\x74\x61\x6C"]["\x6E\x65\x77\x53\x63\x72\x6F\x6C\x6C"],y:_0xc846x0["\x76\x65\x72\x74\x69\x63\x61\x6C"]["\x6E\x65\x77\x53\x63\x72\x6F\x6C\x6C"]}};_0xc846x0["\x70\x72\x6F\x74\x6F\x74\x79\x70\x65"]["\x72\x65\x66\x72\x65\x73\x68"]=function(){var _0xc846x0,_0xc846x1,_0xc846x3,_0xc846x4=this;_0xc846x3=_0xc846x2["\x69\x73\x57\x69\x6E\x64\x6F\x77"](this["\x65\x6C\x65\x6D\x65\x6E\x74"]);_0xc846x1=this["\x24\x65\x6C\x65\x6D\x65\x6E\x74"]["\x6F\x66\x66\x73\x65\x74"]();this["\x64\x6F\x53\x63\x72\x6F\x6C\x6C"]();_0xc846x0={horizontal:{contextOffset:_0xc846x3?0:_0xc846x1["\x6C\x65\x66\x74"],contextScroll:_0xc846x3?0:this["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]["\x78"],contextDimension:this["\x24\x65\x6C\x65\x6D\x65\x6E\x74"]["\x77\x69\x64\x74\x68"](),oldScroll:this["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]["\x78"],forward:"\x72\x69\x67\x68\x74",backward:"\x6C\x65\x66\x74",offsetProp:"\x6C\x65\x66\x74"},vertical:{contextOffset:_0xc846x3?0:_0xc846x1["\x74\x6F\x70"],contextScroll:_0xc846x3?0:this["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]["\x79"],contextDimension:_0xc846x3?_0xc846x2[_0xc846x13]("\x76\x69\x65\x77\x70\x6F\x72\x74\x48\x65\x69\x67\x68\x74"):this["\x24\x65\x6C\x65\x6D\x65\x6E\x74"]["\x68\x65\x69\x67\x68\x74"](),oldScroll:this["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]["\x79"],forward:"\x64\x6F\x77\x6E",backward:"\x75\x70",offsetProp:"\x74\x6F\x70"}};return _0xc846x2["\x65\x61\x63\x68"](_0xc846x0,function(_0xc846x0,_0xc846x1){return _0xc846x2["\x65\x61\x63\x68"](_0xc846x4["\x77\x61\x79\x70\x6F\x69\x6E\x74\x73"][_0xc846x0],function(_0xc846x0,_0xc846x3){var _0xc846x4,_0xc846x5,_0xc846x6,_0xc846x7,_0xc846x8;_0xc846x4=_0xc846x3["\x6F\x70\x74\x69\x6F\x6E\x73"]["\x6F\x66\x66\x73\x65\x74"];_0xc846x6=_0xc846x3["\x6F\x66\x66\x73\x65\x74"];_0xc846x5=_0xc846x2["\x69\x73\x57\x69\x6E\x64\x6F\x77"](_0xc846x3["\x65\x6C\x65\x6D\x65\x6E\x74"])?0:_0xc846x3["\x24\x65\x6C\x65\x6D\x65\x6E\x74"]["\x6F\x66\x66\x73\x65\x74"]()[_0xc846x1["\x6F\x66\x66\x73\x65\x74\x50\x72\x6F\x70"]];if(_0xc846x2["\x69\x73\x46\x75\x6E\x63\x74\x69\x6F\x6E"](_0xc846x4)){_0xc846x4=_0xc846x4["\x61\x70\x70\x6C\x79"](_0xc846x3["\x65\x6C\x65\x6D\x65\x6E\x74"])}else {if( typeof _0xc846x4==="\x73\x74\x72\x69\x6E\x67"){_0xc846x4=parseFloat(_0xc846x4);if(_0xc846x3["\x6F\x70\x74\x69\x6F\x6E\x73"]["\x6F\x66\x66\x73\x65\x74"]["\x69\x6E\x64\x65\x78\x4F\x66"]("\x25")> -1){_0xc846x4=Math["\x63\x65\x69\x6C"](_0xc846x1["\x63\x6F\x6E\x74\x65\x78\x74\x44\x69\x6D\x65\x6E\x73\x69\x6F\x6E"]*_0xc846x4/100)}}};_0xc846x3["\x6F\x66\x66\x73\x65\x74"]=_0xc846x5-_0xc846x1["\x63\x6F\x6E\x74\x65\x78\x74\x4F\x66\x66\x73\x65\x74"]+_0xc846x1["\x63\x6F\x6E\x74\x65\x78\x74\x53\x63\x72\x6F\x6C\x6C"]-_0xc846x4;if(_0xc846x3["\x6F\x70\x74\x69\x6F\x6E\x73"]["\x6F\x6E\x6C\x79\x4F\x6E\x53\x63\x72\x6F\x6C\x6C"]&&_0xc846x6!=null||!_0xc846x3["\x65\x6E\x61\x62\x6C\x65\x64"]){return};if(_0xc846x6!==null&&_0xc846x6<(_0xc846x7=_0xc846x1["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"])&&_0xc846x7<=_0xc846x3["\x6F\x66\x66\x73\x65\x74"]){return _0xc846x3["\x74\x72\x69\x67\x67\x65\x72"]([_0xc846x1["\x62\x61\x63\x6B\x77\x61\x72\x64"]])}else {if(_0xc846x6!==null&&_0xc846x6>(_0xc846x8=_0xc846x1["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"])&&_0xc846x8>=_0xc846x3["\x6F\x66\x66\x73\x65\x74"]){return _0xc846x3["\x74\x72\x69\x67\x67\x65\x72"]([_0xc846x1["\x66\x6F\x72\x77\x61\x72\x64"]])}else {if(_0xc846x6===null&&_0xc846x1["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]>=_0xc846x3["\x6F\x66\x66\x73\x65\x74"]){return _0xc846x3["\x74\x72\x69\x67\x67\x65\x72"]([_0xc846x1["\x66\x6F\x72\x77\x61\x72\x64"]])}}}})})};_0xc846x0["\x70\x72\x6F\x74\x6F\x74\x79\x70\x65"]["\x63\x68\x65\x63\x6B\x45\x6D\x70\x74\x79"]=function(){if(_0xc846x2["\x69\x73\x45\x6D\x70\x74\x79\x4F\x62\x6A\x65\x63\x74"](this["\x77\x61\x79\x70\x6F\x69\x6E\x74\x73"]["\x68\x6F\x72\x69\x7A\x6F\x6E\x74\x61\x6C"])&&_0xc846x2["\x69\x73\x45\x6D\x70\x74\x79\x4F\x62\x6A\x65\x63\x74"](this["\x77\x61\x79\x70\x6F\x69\x6E\x74\x73"]["\x76\x65\x72\x74\x69\x63\x61\x6C"])){this["\x24\x65\x6C\x65\x6D\x65\x6E\x74"]["\x75\x6E\x62\x69\x6E\x64"]([_0xc846xe,_0xc846xf]["\x6A\x6F\x69\x6E"]("\x20"));return delete _0xc846xa[this["\x69\x64"]]}};return _0xc846x0}();_0xc846x6=function(){function _0xc846x0(_0xc846x0,_0xc846x1,_0xc846x3){var _0xc846x4,_0xc846x5;_0xc846x3=_0xc846x2["\x65\x78\x74\x65\x6E\x64"]({},_0xc846x2["\x66\x6E"][_0xc846x12]["\x64\x65\x66\x61\x75\x6C\x74\x73"],_0xc846x3);if(_0xc846x3["\x6F\x66\x66\x73\x65\x74"]==="\x62\x6F\x74\x74\x6F\x6D\x2D\x69\x6E\x2D\x76\x69\x65\x77"){_0xc846x3["\x6F\x66\x66\x73\x65\x74"]=function(){var _0xc846x0;_0xc846x0=_0xc846x2[_0xc846x13]("\x76\x69\x65\x77\x70\x6F\x72\x74\x48\x65\x69\x67\x68\x74");if(!_0xc846x2["\x69\x73\x57\x69\x6E\x64\x6F\x77"](_0xc846x1["\x65\x6C\x65\x6D\x65\x6E\x74"])){_0xc846x0=_0xc846x1["\x24\x65\x6C\x65\x6D\x65\x6E\x74"]["\x68\x65\x69\x67\x68\x74"]()};return _0xc846x0-_0xc846x2(this)["\x6F\x75\x74\x65\x72\x48\x65\x69\x67\x68\x74"]()}};this["\x24\x65\x6C\x65\x6D\x65\x6E\x74"]=_0xc846x0;this["\x65\x6C\x65\x6D\x65\x6E\x74"]=_0xc846x0[0];this["\x61\x78\x69\x73"]=_0xc846x3["\x68\x6F\x72\x69\x7A\x6F\x6E\x74\x61\x6C"]?"\x68\x6F\x72\x69\x7A\x6F\x6E\x74\x61\x6C":"\x76\x65\x72\x74\x69\x63\x61\x6C";this["\x63\x61\x6C\x6C\x62\x61\x63\x6B"]=_0xc846x3["\x68\x61\x6E\x64\x6C\x65\x72"];this["\x63\x6F\x6E\x74\x65\x78\x74"]=_0xc846x1;this["\x65\x6E\x61\x62\x6C\x65\x64"]=_0xc846x3["\x65\x6E\x61\x62\x6C\x65\x64"];this["\x69\x64"]="\x77\x61\x79\x70\x6F\x69\x6E\x74\x73"+_0xc846x10++;this["\x6F\x66\x66\x73\x65\x74"]=null;this["\x6F\x70\x74\x69\x6F\x6E\x73"]=_0xc846x3;_0xc846x1["\x77\x61\x79\x70\x6F\x69\x6E\x74\x73"][this["\x61\x78\x69\x73"]][this["\x69\x64"]]=this;_0xc846x7[this["\x61\x78\x69\x73"]][this["\x69\x64"]]=this;_0xc846x4=(_0xc846x5=_0xc846x0["\x64\x61\x74\x61"](_0xc846x11))!=null?_0xc846x5:[];_0xc846x4["\x70\x75\x73\x68"](this["\x69\x64"]);_0xc846x0["\x64\x61\x74\x61"](_0xc846x11,_0xc846x4)}_0xc846x0["\x70\x72\x6F\x74\x6F\x74\x79\x70\x65"]["\x74\x72\x69\x67\x67\x65\x72"]=function(_0xc846x0){if(!this["\x65\x6E\x61\x62\x6C\x65\x64"]){return};if(this["\x63\x61\x6C\x6C\x62\x61\x63\x6B"]!=null){this["\x63\x61\x6C\x6C\x62\x61\x63\x6B"]["\x61\x70\x70\x6C\x79"](this["\x65\x6C\x65\x6D\x65\x6E\x74"],_0xc846x0)};if(this["\x6F\x70\x74\x69\x6F\x6E\x73"]["\x74\x72\x69\x67\x67\x65\x72\x4F\x6E\x63\x65"]){return this["\x64\x65\x73\x74\x72\x6F\x79"]()}};_0xc846x0["\x70\x72\x6F\x74\x6F\x74\x79\x70\x65"]["\x64\x69\x73\x61\x62\x6C\x65"]=function(){return this["\x65\x6E\x61\x62\x6C\x65\x64"]=false};_0xc846x0["\x70\x72\x6F\x74\x6F\x74\x79\x70\x65"]["\x65\x6E\x61\x62\x6C\x65"]=function(){this["\x63\x6F\x6E\x74\x65\x78\x74"]["\x72\x65\x66\x72\x65\x73\x68"]();return this["\x65\x6E\x61\x62\x6C\x65\x64"]=true};_0xc846x0["\x70\x72\x6F\x74\x6F\x74\x79\x70\x65"]["\x64\x65\x73\x74\x72\x6F\x79"]=function(){delete _0xc846x7[this["\x61\x78\x69\x73"]][this["\x69\x64"]];delete this["\x63\x6F\x6E\x74\x65\x78\x74"]["\x77\x61\x79\x70\x6F\x69\x6E\x74\x73"][this["\x61\x78\x69\x73"]][this["\x69\x64"]];return this["\x63\x6F\x6E\x74\x65\x78\x74"]["\x63\x68\x65\x63\x6B\x45\x6D\x70\x74\x79"]()};_0xc846x0["\x67\x65\x74\x57\x61\x79\x70\x6F\x69\x6E\x74\x73\x42\x79\x45\x6C\x65\x6D\x65\x6E\x74"]=function(_0xc846x0){var _0xc846x1,_0xc846x3;_0xc846x3=_0xc846x2(_0xc846x0)["\x64\x61\x74\x61"](_0xc846x11);if(!_0xc846x3){return []};_0xc846x1=_0xc846x2["\x65\x78\x74\x65\x6E\x64"]({},_0xc846x7["\x68\x6F\x72\x69\x7A\x6F\x6E\x74\x61\x6C"],_0xc846x7["\x76\x65\x72\x74\x69\x63\x61\x6C"]);return _0xc846x2["\x6D\x61\x70"](_0xc846x3,function(_0xc846x0){return _0xc846x1[_0xc846x0]})};return _0xc846x0}();_0xc846xd={init:function(_0xc846x0,_0xc846x1){var _0xc846x3;if(_0xc846x1==null){_0xc846x1={}};if((_0xc846x3=_0xc846x1["\x68\x61\x6E\x64\x6C\x65\x72"])==null){_0xc846x1["\x68\x61\x6E\x64\x6C\x65\x72"]=_0xc846x0};this["\x65\x61\x63\x68"](function(){var _0xc846x0,_0xc846x3,_0xc846x4,_0xc846x7;_0xc846x0=_0xc846x2(this);_0xc846x4=(_0xc846x7=_0xc846x1["\x63\x6F\x6E\x74\x65\x78\x74"])!=null?_0xc846x7:_0xc846x2["\x66\x6E"][_0xc846x12]["\x64\x65\x66\x61\x75\x6C\x74\x73"]["\x63\x6F\x6E\x74\x65\x78\x74"];if(!_0xc846x2["\x69\x73\x57\x69\x6E\x64\x6F\x77"](_0xc846x4)){_0xc846x4=_0xc846x0["\x63\x6C\x6F\x73\x65\x73\x74"](_0xc846x4)};_0xc846x4=_0xc846x2(_0xc846x4);_0xc846x3=_0xc846xa[_0xc846x4["\x64\x61\x74\x61"](_0xc846x9)];if(!_0xc846x3){_0xc846x3= new _0xc846x5(_0xc846x4)};return new _0xc846x6(_0xc846x0,_0xc846x3,_0xc846x1)});_0xc846x2[_0xc846x13]("\x72\x65\x66\x72\x65\x73\x68");return this},disable:function(){return _0xc846xd._invoke(this,"\x64\x69\x73\x61\x62\x6C\x65")},enable:function(){return _0xc846xd._invoke(this,"\x65\x6E\x61\x62\x6C\x65")},destroy:function(){return _0xc846xd._invoke(this,"\x64\x65\x73\x74\x72\x6F\x79")},prev:function(_0xc846x0,_0xc846x1){return _0xc846xd["\x5F\x74\x72\x61\x76\x65\x72\x73\x65"]["\x63\x61\x6C\x6C"](this,_0xc846x0,_0xc846x1,function(_0xc846x0,_0xc846x1,_0xc846x2){if(_0xc846x1>0){return _0xc846x0["\x70\x75\x73\x68"](_0xc846x2[_0xc846x1-1])}})},next:function(_0xc846x0,_0xc846x1){return _0xc846xd["\x5F\x74\x72\x61\x76\x65\x72\x73\x65"]["\x63\x61\x6C\x6C"](this,_0xc846x0,_0xc846x1,function(_0xc846x0,_0xc846x1,_0xc846x2){if(_0xc846x1<_0xc846x2["\x6C\x65\x6E\x67\x74\x68"]-1){return _0xc846x0["\x70\x75\x73\x68"](_0xc846x2[_0xc846x1+1])}})},_traverse:function(_0xc846x0,_0xc846x1,_0xc846x4){var _0xc846x5,_0xc846x6;if(_0xc846x0==null){_0xc846x0="\x76\x65\x72\x74\x69\x63\x61\x6C"};if(_0xc846x1==null){_0xc846x1=_0xc846x3};_0xc846x6=_0xc846xc["\x61\x67\x67\x72\x65\x67\x61\x74\x65"](_0xc846x1);_0xc846x5=[];this["\x65\x61\x63\x68"](function(){var _0xc846x1;_0xc846x1=_0xc846x2["\x69\x6E\x41\x72\x72\x61\x79"](this,_0xc846x6[_0xc846x0]);return _0xc846x4(_0xc846x5,_0xc846x1,_0xc846x6[_0xc846x0])});return this["\x70\x75\x73\x68\x53\x74\x61\x63\x6B"](_0xc846x5)},_invoke:function(_0xc846x0,_0xc846x1){_0xc846x0["\x65\x61\x63\x68"](function(){var _0xc846x0;_0xc846x0=_0xc846x6["\x67\x65\x74\x57\x61\x79\x70\x6F\x69\x6E\x74\x73\x42\x79\x45\x6C\x65\x6D\x65\x6E\x74"](this);return _0xc846x2["\x65\x61\x63\x68"](_0xc846x0,function(_0xc846x0,_0xc846x2){_0xc846x2[_0xc846x1]();return true})});return this}};_0xc846x2["\x66\x6E"][_0xc846x12]=function(){var _0xc846x0,_0xc846x3;_0xc846x3=arguments[0],_0xc846x0=2<=arguments["\x6C\x65\x6E\x67\x74\x68"]?_0xc846x1["\x63\x61\x6C\x6C"](arguments,1):[];if(_0xc846xd[_0xc846x3]){return _0xc846xd[_0xc846x3]["\x61\x70\x70\x6C\x79"](this,_0xc846x0)}else {if(_0xc846x2["\x69\x73\x46\x75\x6E\x63\x74\x69\x6F\x6E"](_0xc846x3)){return _0xc846xd["\x69\x6E\x69\x74"]["\x61\x70\x70\x6C\x79"](this,arguments)}else {if(_0xc846x2["\x69\x73\x50\x6C\x61\x69\x6E\x4F\x62\x6A\x65\x63\x74"](_0xc846x3)){return _0xc846xd["\x69\x6E\x69\x74"]["\x61\x70\x70\x6C\x79"](this,[null,_0xc846x3])}else {if(!_0xc846x3){return _0xc846x2["\x65\x72\x72\x6F\x72"]("\x6A\x51\x75\x65\x72\x79\x20\x57\x61\x79\x70\x6F\x69\x6E\x74\x73\x20\x6E\x65\x65\x64\x73\x20\x61\x20\x63\x61\x6C\x6C\x62\x61\x63\x6B\x20\x66\x75\x6E\x63\x74\x69\x6F\x6E\x20\x6F\x72\x20\x68\x61\x6E\x64\x6C\x65\x72\x20\x6F\x70\x74\x69\x6F\x6E\x2E")}else {return _0xc846x2["\x65\x72\x72\x6F\x72"]("\x54\x68\x65\x20"+_0xc846x3+"\x20\x6D\x65\x74\x68\x6F\x64\x20\x64\x6F\x65\x73\x20\x6E\x6F\x74\x20\x65\x78\x69\x73\x74\x20\x69\x6E\x20\x6A\x51\x75\x65\x72\x79\x20\x57\x61\x79\x70\x6F\x69\x6E\x74\x73\x2E")}}}}};_0xc846x2["\x66\x6E"][_0xc846x12]["\x64\x65\x66\x61\x75\x6C\x74\x73"]={context:_0xc846x3,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};_0xc846xc={refresh:function(){return _0xc846x2["\x65\x61\x63\x68"](_0xc846xa,function(_0xc846x0,_0xc846x1){return _0xc846x1["\x72\x65\x66\x72\x65\x73\x68"]()})},viewportHeight:function(){var _0xc846x0;return (_0xc846x0=_0xc846x3["\x69\x6E\x6E\x65\x72\x48\x65\x69\x67\x68\x74"])!=null?_0xc846x0:_0xc846x4["\x68\x65\x69\x67\x68\x74"]()},aggregate:function(_0xc846x0){var _0xc846x1,_0xc846x3,_0xc846x4;_0xc846x1=_0xc846x7;if(_0xc846x0){_0xc846x1=(_0xc846x4=_0xc846xa[_0xc846x2(_0xc846x0)["\x64\x61\x74\x61"](_0xc846x9)])!=null?_0xc846x4["\x77\x61\x79\x70\x6F\x69\x6E\x74\x73"]:void(0)};if(!_0xc846x1){return []};_0xc846x3={horizontal:[],vertical:[]};_0xc846x2["\x65\x61\x63\x68"](_0xc846x3,function(_0xc846x0,_0xc846x4){_0xc846x2["\x65\x61\x63\x68"](_0xc846x1[_0xc846x0],function(_0xc846x0,_0xc846x1){return _0xc846x4["\x70\x75\x73\x68"](_0xc846x1)});_0xc846x4["\x73\x6F\x72\x74"](function(_0xc846x0,_0xc846x1){return _0xc846x0["\x6F\x66\x66\x73\x65\x74"]-_0xc846x1["\x6F\x66\x66\x73\x65\x74"]});_0xc846x3[_0xc846x0]=_0xc846x2["\x6D\x61\x70"](_0xc846x4,function(_0xc846x0){return _0xc846x0["\x65\x6C\x65\x6D\x65\x6E\x74"]});return _0xc846x3[_0xc846x0]=_0xc846x2["\x75\x6E\x69\x71\x75\x65"](_0xc846x3[_0xc846x0])});return _0xc846x3},above:function(_0xc846x0){if(_0xc846x0==null){_0xc846x0=_0xc846x3};return _0xc846xc._filter(_0xc846x0,"\x76\x65\x72\x74\x69\x63\x61\x6C",function(_0xc846x0,_0xc846x1){return _0xc846x1["\x6F\x66\x66\x73\x65\x74"]<=_0xc846x0["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]["\x79"]})},below:function(_0xc846x0){if(_0xc846x0==null){_0xc846x0=_0xc846x3};return _0xc846xc._filter(_0xc846x0,"\x76\x65\x72\x74\x69\x63\x61\x6C",function(_0xc846x0,_0xc846x1){return _0xc846x1["\x6F\x66\x66\x73\x65\x74"]>_0xc846x0["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]["\x79"]})},left:function(_0xc846x0){if(_0xc846x0==null){_0xc846x0=_0xc846x3};return _0xc846xc._filter(_0xc846x0,"\x68\x6F\x72\x69\x7A\x6F\x6E\x74\x61\x6C",function(_0xc846x0,_0xc846x1){return _0xc846x1["\x6F\x66\x66\x73\x65\x74"]<=_0xc846x0["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]["\x78"]})},right:function(_0xc846x0){if(_0xc846x0==null){_0xc846x0=_0xc846x3};return _0xc846xc._filter(_0xc846x0,"\x68\x6F\x72\x69\x7A\x6F\x6E\x74\x61\x6C",function(_0xc846x0,_0xc846x1){return _0xc846x1["\x6F\x66\x66\x73\x65\x74"]>_0xc846x0["\x6F\x6C\x64\x53\x63\x72\x6F\x6C\x6C"]["\x78"]})},enable:function(){return _0xc846xc._invoke("\x65\x6E\x61\x62\x6C\x65")},disable:function(){return _0xc846xc._invoke("\x64\x69\x73\x61\x62\x6C\x65")},destroy:function(){return _0xc846xc._invoke("\x64\x65\x73\x74\x72\x6F\x79")},extendFn:function(_0xc846x0,_0xc846x1){return _0xc846xd[_0xc846x0]=_0xc846x1},_invoke:function(_0xc846x0){var _0xc846x1;_0xc846x1=_0xc846x2["\x65\x78\x74\x65\x6E\x64"]({},_0xc846x7["\x76\x65\x72\x74\x69\x63\x61\x6C"],_0xc846x7["\x68\x6F\x72\x69\x7A\x6F\x6E\x74\x61\x6C"]);return _0xc846x2["\x65\x61\x63\x68"](_0xc846x1,function(_0xc846x1,_0xc846x2){_0xc846x2[_0xc846x0]();return true})},_filter:function(_0xc846x0,_0xc846x1,_0xc846x3){var _0xc846x4,_0xc846x5;_0xc846x4=_0xc846xa[_0xc846x2(_0xc846x0)["\x64\x61\x74\x61"](_0xc846x9)];if(!_0xc846x4){return []};_0xc846x5=[];_0xc846x2["\x65\x61\x63\x68"](_0xc846x4["\x77\x61\x79\x70\x6F\x69\x6E\x74\x73"][_0xc846x1],function(_0xc846x0,_0xc846x1){if(_0xc846x3(_0xc846x4,_0xc846x1)){return _0xc846x5["\x70\x75\x73\x68"](_0xc846x1)}});_0xc846x5["\x73\x6F\x72\x74"](function(_0xc846x0,_0xc846x1){return _0xc846x0["\x6F\x66\x66\x73\x65\x74"]-_0xc846x1["\x6F\x66\x66\x73\x65\x74"]});return _0xc846x2["\x6D\x61\x70"](_0xc846x5,function(_0xc846x0){return _0xc846x0["\x65\x6C\x65\x6D\x65\x6E\x74"]})}};_0xc846x2[_0xc846x13]=function(){var _0xc846x0,_0xc846x2;_0xc846x2=arguments[0],_0xc846x0=2<=arguments["\x6C\x65\x6E\x67\x74\x68"]?_0xc846x1["\x63\x61\x6C\x6C"](arguments,1):[];if(_0xc846xc[_0xc846x2]){return _0xc846xc[_0xc846x2]["\x61\x70\x70\x6C\x79"](null,_0xc846x0)}else {return _0xc846xc["\x61\x67\x67\x72\x65\x67\x61\x74\x65"]["\x63\x61\x6C\x6C"](null,_0xc846x2)}};_0xc846x2[_0xc846x13]["\x73\x65\x74\x74\x69\x6E\x67\x73"]={resizeThrottle:100,scrollThrottle:30};return _0xc846x4["\x6C\x6F\x61\x64"](function(){return _0xc846x2[_0xc846x13]("\x72\x65\x66\x72\x65\x73\x68")})})})["\x63\x61\x6C\x6C"](this);(function(_0xc846x1){"\x75\x73\x65\x20\x73\x74\x72\x69\x63\x74";_0xc846x1["\x66\x6E"]["\x63\x6F\x75\x6E\x74\x65\x72\x55\x70"]=function(_0xc846x0){var _0xc846x2=_0xc846x1["\x65\x78\x74\x65\x6E\x64"]({time:400,delay:10},_0xc846x0);return this["\x65\x61\x63\x68"](function(){var _0xc846x0=_0xc846x1(this),_0xc846x3=_0xc846x2,_0xc846x4=function(){var _0xc846x1=[],_0xc846x2=_0xc846x3["\x74\x69\x6D\x65"]/_0xc846x3["\x64\x65\x6C\x61\x79"],_0xc846x4=_0xc846x0["\x74\x65\x78\x74"](),_0xc846x7=/[0-9]+,[0-9]+/["\x74\x65\x73\x74"](_0xc846x4);_0xc846x4=_0xc846x4["\x72\x65\x70\x6C\x61\x63\x65"](/,/g,"");var _0xc846x5=/^[0-9]+$/["\x74\x65\x73\x74"](_0xc846x4),_0xc846x9=/^[0-9]+\.[0-9]+$/["\x74\x65\x73\x74"](_0xc846x4),_0xc846xa=_0xc846x9?(_0xc846x4["\x73\x70\x6C\x69\x74"]("\x2E")[1]||[])["\x6C\x65\x6E\x67\x74\x68"]:0;for(var _0xc846x8=_0xc846x2;_0xc846x8>=1;_0xc846x8--){var _0xc846x6=parseInt(_0xc846x4/_0xc846x2*_0xc846x8);_0xc846x9&&(_0xc846x6=parseFloat(_0xc846x4/_0xc846x2*_0xc846x8)["\x74\x6F\x46\x69\x78\x65\x64"](_0xc846xa));if(_0xc846x7){while(/(\d+)(\d{3})/["\x74\x65\x73\x74"](_0xc846x6.toString())){_0xc846x6=_0xc846x6.toString()["\x72\x65\x70\x6C\x61\x63\x65"](/(\d+)(\d{3})/,"\x24\x31\x2C\x24\x32")}};_0xc846x1["\x75\x6E\x73\x68\x69\x66\x74"](_0xc846x6)};_0xc846x0["\x64\x61\x74\x61"]("\x63\x6F\x75\x6E\x74\x65\x72\x75\x70\x2D\x6E\x75\x6D\x73",_0xc846x1);_0xc846x0["\x74\x65\x78\x74"]("\x30");var _0xc846xb=function(){var _0xc846x14=parseFloat(_0xc846x0["\x64\x61\x74\x61"]("\x63\x6F\x75\x6E\x74\x65\x72\x75\x70\x2D\x6E\x75\x6D\x73")["\x73\x68\x69\x66\x74"]());if(_0xc846x14>=1000){_0xc846x14=(_0xc846x14/1000)["\x74\x6F\x46\x69\x78\x65\x64"](1)+"\x6B"}else {if(_0xc846x14>=100000){_0xc846x14=(_0xc846x14/100000)["\x74\x6F\x46\x69\x78\x65\x64"](1)+"\x4D"}};_0xc846x0["\x74\x65\x78\x74"](_0xc846x14);if(_0xc846x0["\x64\x61\x74\x61"]("\x63\x6F\x75\x6E\x74\x65\x72\x75\x70\x2D\x6E\x75\x6D\x73")["\x6C\x65\x6E\x67\x74\x68"]){setTimeout(_0xc846x0["\x64\x61\x74\x61"]("\x63\x6F\x75\x6E\x74\x65\x72\x75\x70\x2D\x66\x75\x6E\x63"),_0xc846x3["\x64\x65\x6C\x61\x79"])}else {delete _0xc846x0["\x64\x61\x74\x61"]("\x63\x6F\x75\x6E\x74\x65\x72\x75\x70\x2D\x6E\x75\x6D\x73");_0xc846x0["\x64\x61\x74\x61"]("\x63\x6F\x75\x6E\x74\x65\x72\x75\x70\x2D\x6E\x75\x6D\x73",null);_0xc846x0["\x64\x61\x74\x61"]("\x63\x6F\x75\x6E\x74\x65\x72\x75\x70\x2D\x66\x75\x6E\x63",null)}};_0xc846x0["\x64\x61\x74\x61"]("\x63\x6F\x75\x6E\x74\x65\x72\x75\x70\x2D\x66\x75\x6E\x63",_0xc846xb);setTimeout(_0xc846x0["\x64\x61\x74\x61"]("\x63\x6F\x75\x6E\x74\x65\x72\x75\x70\x2D\x66\x75\x6E\x63"),_0xc846x3["\x64\x65\x6C\x61\x79"])};_0xc846x0["\x77\x61\x79\x70\x6F\x69\x6E\x74"](_0xc846x4,{offset:"\x31\x30\x30\x25",triggerOnce:!0})})}})(jQuery);$(document)["\x72\x65\x61\x64\x79"](function(){$("\x2E\x6D\x62\x74\x73\x77\x69\x74\x63\x68")["\x63\x6C\x69\x63\x6B"](function(){$("\x2E\x73\x77\x69\x74\x63\x68\x6F\x66\x66")["\x73\x6C\x69\x64\x65\x54\x6F\x67\x67\x6C\x65"]();if($("\x2E\x6D\x62\x74\x73\x77\x69\x74\x63\x68\x20\x69")["\x61\x74\x74\x72"]("\x63\x6C\x61\x73\x73")==="\x61\x63\x74\x69\x76\x65"){$("\x2E\x6D\x62\x74\x73\x77\x69\x74\x63\x68\x20\x69")["\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73"]("\x61\x63\x74\x69\x76\x65")["\x61\x64\x64\x43\x6C\x61\x73\x73"]("\x69\x6E\x61\x63\x74\x69\x76\x65")}else {if($("\x2E\x6D\x62\x74\x73\x77\x69\x74\x63\x68\x20\x69")["\x61\x74\x74\x72"]("\x63\x6C\x61\x73\x73")==="\x69\x6E\x61\x63\x74\x69\x76\x65"){$("\x2E\x6D\x62\x74\x73\x77\x69\x74\x63\x68\x20\x69")["\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73"]("\x69\x6E\x61\x63\x74\x69\x76\x65")["\x61\x64\x64\x43\x6C\x61\x73\x73"]("\x61\x63\x74\x69\x76\x65")}}});$("\x2E\x6D\x62\x74\x73\x77\x69\x74\x63\x68\x32")["\x63\x6C\x69\x63\x6B"](function(){$("\x2E\x73\x77\x69\x74\x63\x68\x6F\x66\x66\x32")["\x73\x6C\x69\x64\x65\x54\x6F\x67\x67\x6C\x65"]();if($("\x2E\x6D\x62\x74\x73\x77\x69\x74\x63\x68\x32\x20\x69")["\x61\x74\x74\x72"]("\x63\x6C\x61\x73\x73")==="\x61\x63\x74\x69\x76\x65"){$("\x2E\x6D\x62\x74\x73\x77\x69\x74\x63\x68\x32\x20\x69")["\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73"]("\x61\x63\x74\x69\x76\x65")["\x61\x64\x64\x43\x6C\x61\x73\x73"]("\x69\x6E\x61\x63\x74\x69\x76\x65")}else {if($("\x2E\x6D\x62\x74\x73\x77\x69\x74\x63\x68\x32\x20\x69")["\x61\x74\x74\x72"]("\x63\x6C\x61\x73\x73")==="\x69\x6E\x61\x63\x74\x69\x76\x65"){$("\x2E\x6D\x62\x74\x73\x77\x69\x74\x63\x68\x32\x20\x69")["\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73"]("\x69\x6E\x61\x63\x74\x69\x76\x65")["\x61\x64\x64\x43\x6C\x61\x73\x73"]("\x61\x63\x74\x69\x76\x65")}}})})

Okay, now you have added the engine ;) of these social sharing widget now we are going to add HTML Part and CSS Part of both social sharing Widget one by one.

How To Add Jumbo Horizontal Social Sharing Counter Widget to Blogger?

STEP1] Simply search for </head> tag and paste below CSS Stylesheet just above of it.

<style type='text/css'>
 /*------------------------------------------------------------
Horizontal Jumbo Social Share Bar
Designed by: Paramjot Singh
URL : http://www.mybloggerguides.com
Counting Code by:: http://donreach.com/social-share-count
Jumbo Effect By : STC Network
Distributed Under GPL License
Icons:: FontAwesome 4.6.3
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.MBG_Horizontal_SocialBar{margin:5px 0px 5px 0px ;}
.MBG_Horizontal_SocialBar .horizontal_social_widget {
display: inline-block; float: left; list-style:none; width:100%;  margin: 0; padding: 0;  border-top:2px dashed #b7b7b7; border-bottom:2px dashed #b7b7b7;}
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_facebook { background: #3a579a; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_facebook:hover { background: #314a83; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_twitter { background: #00abf0; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_twitter:hover { background: #0092cc; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_googleplus { background: #df4a32; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_googleplus:hover { background: #be3f2b; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_pinterest { background: #cd1c1f; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_pinterest:hover { background: #ae181a; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_stumbleupon { background: #ea4b24; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_stumbleupon:hover { background: #c7401f; } .MBG_Horizontal_SocialBar .horizontal_social_widget .button_linkedin { background: #2554BF; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_linkedin:hover { background: #224EB4; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_whatsapp { background: #43d854; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_whatsapp:hover { background: #23d854; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_facebook .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_twitter .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_googleplus .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_pinterest .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_stumbleupon .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_linkedin .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_whatsapp .count {
color: #fff!important; font-size: 16px !important; font-family: sans-serif; font-weight: normal; float:right; background-color: rgba(0,0,0,0.1); padding:10px; border-top-left-radius:50px;}
.MBG_Horizontal_SocialBar .horizontal_social_widget &gt; ul {
margin: 0; padding: 0; list-style: none; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .share {
color: #222; font-size:12px; text-align:center;  height: 40px !important;  margin-bottom:1px;  }
.MBG_Horizontal_SocialBar .horizontal_social_widget .share .count.h4 {
font-size: 18px; font-family: &quot;Oswald&quot;,sans-serif; color: #222; height: 22px !important;  line-height: 1.2em; font-weight: normal; }
.MBG_Horizontal_SocialBar .horizontal_social_widget .share .h6 {
font-family: sans-serif; border-top: 3px solid #ff0066 !important; border-radius: 50% 50%; border-bottom: 0;
padding: 0px !important;
padding-top: 5px!important;
margin: 0 !important;
line-height: 8px;}
.MBG_Horizontal_SocialBar .horizontal_social_widget &gt; ul &gt; li {
margin: 5px 0px 0px 0px; position: relative; text-align: center; list-style: none; list-style-type: none; padding: 0px; border-left: 0 solid rgba( 0,0,0,.4); height: 40px; width:13.5%; overflow: hidden; display: inline-block; box-sizing: border-box; background: none; box-sizing: content-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.MBG_Horizontal_SocialBar .horizontal_social_widget &gt; ul &gt; li a {
display: inline-block; width: 100%; height: 100%; box-sizing: border-box; padding: 0px px 0px 0px; cursor: pointer; text-decoration: none;  }
.MBG_Horizontal_SocialBar .horizontal_social_widget &gt; ul &gt; li i {
color: #fff !important; font-family: FontAwesome; font-size: 20px; font-style: normal; font-weight: normal; line-height: 1em; float:left; margin-top:-1%; padding:8px; margin-left:0.91%; height:24px;  background-color: rgba(0,0,0,0.1); border-down-right-radius:90px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.MBG_Horizontal_SocialBar .horizontal_social_widget &gt; ul &gt; li:hover i{
opacity: 0.8;   margin-top:50px; }
.MBG_Horizontal_SocialBar .horizontal_social_widget &gt; ul &gt; li &gt; a:hover::before {
Content:&quot;Share it&quot;; color: #fff !important; font-family: Oswald; font-size: 18px; font-style: normal; font-weight: normal; line-height: 0.8em; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; bottom:-10px; left:-15px; position:relative;}
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_facebook:hover .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_twitter:hover .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_googleplus:hover .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_pinterest:hover .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_stumbleupon:hover .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_linkedin:hover .count,
.MBG_Horizontal_SocialBar .horizontal_social_widget .button_whatsapp:hover .count
 {display:none!important;}
@media screen and (max-width:768px){
.MBG_Horizontal_SocialBar .horizontal_social_widget &gt; ul &gt; li &gt; a:hover::before { font-size: 15px; }
.MBG_Horizontal_SocialBar .horizontal_social_widget &gt; ul &gt; li i{width:30%; margin-left:-5px; }
.MBG_Horizontal_SocialBar .horizontal_social_widget &gt; ul &gt; li{width:23.5%; border:none;}
}
@media screen and (max-width:385px){
.MBG_Horizontal_SocialBar .horizontal_social_widget &gt; ul &gt; li &gt; a:hover::before {left:0px;}
}
</style>

STEP2] Now search for <data:post.body/>. This code is located twice, once for mobile view and once for desktop view. Therefore consider the second appearance of <data:post.body/> only.

 Note:  If you want to display the sharing bar below of post title then paste the following HTML Code just above of <data:post.body/> but if you want to display it below of post footer then paste below HTML Code just after of <data:post.body/> code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='MBG_Horizontal_SocialBar'>
  <div class='horizontal_social_widget'>
<ul>
<li>
<div class='share'>
    <div class='share-btn tcount' data-service='total'>
      <div class='count h4 anim'/>
        <div class='h6'>SHARES</div>
  </div></div></li>
<li class='button_facebook'>
<a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @MyBloggerGuides - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
        <div class='count anim'/></div></strong>
</a>
</li>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<li class='button_whatsapp'>
<a expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank' title='Share on whatsapp!'><strong><i class='fa fa-whatsapp'/>
<div class='share-btn' data-service='whatsapp'>
        <div class='count anim'/></div></strong>
  </a>
  </li>
  </b:if>
</ul>
</div>
</div>
</b:if>
</b:if>
STEP3] Change @MyBloggerGuides with your Twitter User ID.

Okay the horizontal social bar coding have added successfully into your blogger blog. Now we are going to add  Floating Social Share Bar in blogger blog.

How To Add Jumbo Floating Social Sharing Counter Widget to Blogger?

The step is easy as above steps. Lets get straight to work.

STEP1] Search for ]]></b:skin> tag and paste below CSS Stylesheet just above of it.

     /*------------------------------------------------------------
    Floating Jumbo Social Share Counter Bar
    Designed by: Paramjot Singh
    Blogger at: http://www.mybloggerguides.com
    Counting Code by:: http://donreach.com/social-share-count
    Jumbo Effect By : STC Network
    Distributed Under GPL License
    Icons:: FontAwesome 4.6.3
    **************** Do Not Remove These Credits *****************
    ------------------------------------------------------------*/
    .MBG_SocialBar{max-width:410px; width:100%; height:auto; max-height:138px; position: fixed; bottom:5px; padding: 0; left:0px; text-align: center; margin: 0 auto; z-index: 99999999;}
    .MBG_SocialBar label:hover {  cursor: pointer; opacity:1; }
    .MBG_SocialBar label { text-align: center; opacity: 0.9; background: #393939; color: #FFF; border: 0; font-family: fontawesome; display: block; font-size: 22px; padding: 15px 5px 5px 5px; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; position: absolute; width: 70px; height:30px; margin-left:249px; margin-top:85px;}
    input.ShowHide_Button:checked + label { transform-origin: 50% 0%!important; -webkit-transform-origin: 50% 0%!important; -moz-transform-origin: 50% 0%!important; -ms-transform-origin: 50% 0%!important; -o-transform-origin: 50% 0%!important; opacity: 1; -webkit-transform: translateX(0px) rotateY(-180deg); -moz-transform: translateX(0px) rotateY(-180deg); -ms-transform: translateX(0px) rotateY(-180deg); -o-transform: translateX(0px) rotateY(-180deg); transform: translateX(0px) rotateY(-180deg); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; border: 1px solid #3A3939; margin-top:107px; margin-left:-7px; padding: 5px; width:50px; }
    input.ShowHide_Button ~ .ShowHideMe { -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); }
    input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-500px !important; } input.ShowHide_Button { display: none; }
    .MBG_SocialBar .social_menu:before{padding:5px 180px 3.2px 0.1px; top:-0.5px; color:#fff; z-index:99999; background:#393939; position:relative!important; content:'Share This Article \f1e0'; font-family:Lobster,FontAwesome;}
    .MBG_SocialBar .social_menu { border:3px solid #cecece; background-color:#f0f0f0; height:132px; display: inline-block; float: left; list-style:none; max-width:325px; width:410px; margin: 0; padding: 0; }
    .MBG_SocialBar .social_menu .button_facebook { background: #3a579a;}
    .MBG_SocialBar .social_menu .button_facebook:hover { background: #314a83; } .MBG_SocialBar .social_menu .button_twitter { background: #00abf0; } .MBG_SocialBar .social_menu .button_twitter:hover { background: #0092cc; } .MBG_SocialBar .social_menu .button_googleplus { background: #df4a32; } .MBG_SocialBar .social_menu .button_googleplus:hover { background: #be3f2b; } .MBG_SocialBar .social_menu .button_pinterest { background: #cd1c1f; } .MBG_SocialBar .social_menu .button_pinterest:hover { background: #ae181a; } .MBG_SocialBar .social_menu .button_stumbleupon { background: #ea4b24; } .MBG_SocialBar .social_menu .button_stumbleupon:hover { background: #c7401f; } .MBG_SocialBar .social_menu .button_linkedin { background: #2554BF; } .MBG_SocialBar .social_menu .button_linkedin:hover { background: #224EB4; }
    .MBG_SocialBar .social_menu .button_facebook, .MBG_SocialBar .social_menu .button_twitter, .MBG_SocialBar .social_menu .button_googleplus, .MBG_SocialBar .social_menu .button_pinterest, .MBG_SocialBar .social_menu .button_stumbleupon , .MBG_SocialBar .social_menu .button_linkedin{border-radius:1px;}
    .MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_stumbleupon .count, .MBG_SocialBar .social_menu .button_linkedin .count {
      color: #8ff!important; font-size: 14px !important; font-family: sans-serif; font-weight: normal; }
    .MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_linkedin .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_stumbleupon .count  { padding: 5px 5px 5px 5px; background-color:#111; font-weight:normal; color: #8ff!important; font-size: 16px !important; float:right; margin-top:-7px; margin-right:-1px; border-bottom-left-radius:15px; border-top-left-radius:20px;}
    .MBG_SocialBar .social_menu > ul { margin: 5px 0px 0px 0px;; padding: 0; list-style: none; }
    .MBG_SocialBar .social_menu .share { background: #111; color: #8ff; font-size: 12px; height: 50px !important; max-width:80px; margin-bottom:1px; border-radius:1px; }
    .MBG_SocialBar .social_menu .share .count.h4 { background:#111; font-size: 18px; font-family: "Oswald",sans-serif; color: #8ff; height: 25px !important; line-height: 1.5em; font-weight: normal; }
    .MBG_SocialBar .social_menu .share .h6 { font-family: sans-serif;}
    .MBG_SocialBar .social_menu > ul > li { margin: -5px -2px 0px 0px; position: relative; text-align: center; list-style: none; list-style-type: none; padding: 0px; border-left: 0 solid rgba( 0,0,0,.4); height: 50px; width:80px; overflow: hidden; display: inline-block; box-sizing: border-box; background: none; box-sizing: content-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
    .MBG_SocialBar .social_menu > ul > li a { display: inline-block; width: 100%; height: 100%; box-sizing: border-box; padding: 0px px 0px 0px; cursor: pointer; text-decoration: none; }
    .MBG_SocialBar .social_menu > ul > li:hover { border-left: 5px solid rgba( 0,0,0,.3); width: 75px; }
    .MBG_SocialBar .social_menu > ul > li i { color: #fff !important; font-family: FontAwesome; font-size: 20px; font-style: normal; font-weight: normal; line-height: 1em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; top:13px; position:relative; }
    .MBG_SocialBar .social_menu > ul > li:hover i { opacity: 0.9; }
    @media only screen and (min-width:768px) and (max-width:979px) {
    .MBG_SocialBar{bottom:0px; left:-1px;}
    input.ShowHide_Button:checked + label {margin-top:105px; margin-left:-15px;}
    input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-400px !important; }
    }
    @media only screen and (min-width:480px) and (max-width:767px) {
    .MBG_SocialBar{bottom:63.5px; left:-0.5px;}
    .MBG_SocialBar .social_menu{max-width:180px; width:100%; height:195px;}
    input.ShowHide_Button:checked + label {margin-top:170px; margin-left:-15px;}
    input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-400px !important; }
    .MBG_SocialBar .social_menu:before{padding:3px 30px 3px 0.1px; z-index:1;}
    .MBG_SocialBar .social_menu .share {max-width:90px;}
    .MBG_SocialBar .social_menu > ul > li {height: 40px; max-width:89px; width:100%; }
    .MBG_SocialBar .social_menu > ul > li:hover {max-width: 84px; width:100%; height: 40px; position:relative!important;}
    .MBG_SocialBar label {line-height:10px; width: 79px; margin-left:93px; margin-top:158px; height:20px;}
    .MBG_SocialBar .social_menu .share {line-height:10px; height: 40px!important; max-width:90px; margin-top:0.3px; }
    .MBG_SocialBar .social_menu .share .count.h4 { font-size: 16px;}
    .MBG_SocialBar .social_menu .share .h6 {font-family: sans-serif;}
    .MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_linkedin .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_stumbleupon .count { margin-top:-16px;}
    .MBG_SocialBar .social_menu > ul > li i { position:relative; top:6px; }
    .MBG_SocialBar .social_menu .button_facebook {position:relative; top:1px;}
    .MBG_SocialBar .social_menu .button_linkedin {position:relative; top:-0.2px;}
    }
    @media only screen and (min-width:320px) and (max-width:479px){
    .MBG_SocialBar{bottom:63.5px; left:-0.5px; max-width:140px;}
    .MBG_SocialBar .social_menu{max-width:140px; width:100%; height:195px;}
    input.ShowHide_Button:checked + label {margin-top:170px; margin-left:-15px;}
    input.ShowHide_Button:checked ~ .ShowHideMe { margin-left:-400px !important; }
    .MBG_SocialBar .social_menu:before{padding:3px 7px 3.2px 0.1px;font-size:16px; }
    .MBG_SocialBar .social_menu > ul > li {height: 40px; max-width:69.2px; width:100%; }
    .MBG_SocialBar .social_menu > ul > li:hover {max-width: 64.2px; width:100%; height:40px; position:relative; }
    .MBG_SocialBar label {width: 59px; margin-left:73px; margin-top:158px; height:20px;}
    .MBG_SocialBar label i{top:-5px; position:relative;}
    .MBG_SocialBar .social_menu .share {line-height:10px;}
    .MBG_SocialBar .social_menu .button_facebook .count, .MBG_SocialBar .social_menu .button_googleplus .count, .MBG_SocialBar .social_menu .button_pinterest .count, .MBG_SocialBar .social_menu .button_linkedin .count, .MBG_SocialBar .social_menu .button_twitter .count, .MBG_SocialBar .social_menu .button_stumbleupon .count { margin-top:-16px;}
    .MBG_SocialBar .social_menu > ul > li i { position:relative; top:8px; }
    }

STEP2] Now search for <div class='post-footer-line post-footer-line-3'> inside blogger template code are and paste below HTML Part code of floating jumbo share counters.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='MBG_SocialBar'>
  <input class='ShowHide_Button' id='roTater' type='checkbox'/>
  <label for='roTater'><i class='fa fa-arrow-left'/></label>
  <div class='ShowHideMe'>
  <div class='social_menu'>
<ul>
<li>
<div class='share'>
    <div class='share-btn tcount' data-service='total'>
      <div class='count h4 anim'/>
        <div class='h6'>SHARES</div>
  </div></div></li>
<li class='button_facebook'>
<a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @MyBloggerGuides - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
        <div class='count anim'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
        <div class='count anim'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
</b:if>
</b:if>
STEP3] Now Change @MyBloggerGuides with your twitter USER ID.

STEP4] Now click on Save Template button.

Thats it. The foating and horizontal jumbo share counters now works perfectly on your blogger blog. Open your blog and check it live on your blogspot blog.

 Note:  These Share bars only show when someone read your article means it does not show on home page so open your blog post to see it live.

Also Read : Add Stylish Look Contact form to Static Page in Blogger.

Do you like this widget? Do you want any improvement in this widget? Let us know by dropping a comment below. Your opinions and suggestions are always welcome.

Conclusion:

So above guide is about "How To Add Floating - Horizontal Jumbo Share Counters Widget in Blogger Blog?" We hope you guys will like it. If you like it then share it with your friends to let them know about this share bar. We tried our best to make this guide easy as much as possible but if any case problem persist during implemeting then let us know via using comment box. We would love to help you. Do Share and Subscribe Us.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.