Jumbo Share Counters - Horizontal Social Sharing Bar

Today we will discuss how to install "Jumbo Share Counters" Plugin in your blogspot blogs. We will learn how to add JSC horizontal social sharing bar below post titles and at the bottom of your blog posts i.e. Post footer. HORIZONTAL SOCIAL SHARING BAR FOR BLOGGER BLOGS

Adding a sharing bar below post titles or at post footer are best locations to increase your social shares and social media referral traffic. You can choose to display it twice on a single page or you can choose to display it once at top or bottom of your blog post. 

Demo: Scroll to the bottom of this post

Free Jumbo Share Counter Plugin

JSC blogger widget by default includes the following 10 popular share buttons:

  1. Facebook
  2. GooglePlus +1
  3. Twitter
  4. LinkedIn
  5. Pinterest
  6. StumbleUpon
  7. Buffer
  8. Viber - Will automatically display in mobile devices
  9. Whatsapp - Auto displayed in mobile devices
  10. Print

The viber and whatsapp share buttons will display only in mobile devices such as smartphones. These two buttons will allow users to share your blog posts with their viber contacts and whatsapp contacts. We are using IsMobileRequest condition to allow these buttons to display only small screens unlike CSS display:none.

JSC Horizontal Sharing Bar is the most advanced PHP driven FREE sharing plugin built for Blogspot templates (and other platforms) that works perfectly in both custom templates and responsive blogger templates.

The following features makes it the most advanced sharing plugin:

  • Mobile responsive,
  • SEO friendly,
  • Lightweight & Lightening fast,
  • Animated number counter on scroll,
  • Natural in design
  • Customizable
  • Expand/Collapse option
  • Hosted on cloud servers 
  • Free of cost!

Lets get straight to work!

Add JSC Horizontal Sharing bar in Blogger Template

Before we could begin, you must first install JSC plugin by following the steps mentioned in this tutorial:

After installing the scripts follow these easy steps:

1 Go To Blogger > Templates > Backup your template

2 Click Edit HTML

3 Search for ]]></b:skin> and paste the following CSS code just above ]]></b:skin>

/* ##### FREE JUMBO SHARE COUNTERS ####### */
#MBTshares-wrap{margin:20px 0px;border-top: 1px dotted #eee;
padding: 10px 0;border-bottom: 1px dotted #eee;overflow:hidden}
#MBTshares{display:inline-block;overflow:hidden;text-align:left;white-space:nowrap;font-family:arial;font-size:11px;margin:0px 5px 0; line-height: 1.4em!important;}
#horiz{position:relative; padding:0; margin:0;}
#horiz #MBTshares{position:relative;top:-8px; padding-top:20px;}
#MBTshares a:hover{text-decoration:none!important;}


/***Facebook***/
.mbt-fb{background:transparent linear-gradient(#4C69BA,#3B55A0) repeat scroll 0 0;border:medium none;border-radius:2px;color:#FFF!important;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px;white-space:nowrap;text-shadow:0 -1px 0 #354C8C}
.mbt-fb:focus,.mbt-fb:hover,.mbt-fb:active{background:transparent linear-gradient(#5B7BD5,#4864B1) repeat scroll 0 0;border-color:#5874C3 #4961A8 #41599F;box-shadow:0 0 1px #607FD6 inset}
.mbt-fb i{padding:2px 2px 0 4px;font-size:11px;color:#3B5998;background:#fff;margin-right:4px;margin-top:3px}
.mbt-fb:hover, .mbt-fb:visited, .mbt-tw:hover,.mbt-tw:visited, .mbt-linkedin:hover ,.mbt-linkedin:visited{color:#fff!important;}

/***Gplus, Pinit, Stumbleupon***/
.mbt-gp{box-shadow:0 1px 0 rgba(0,0,0,0.05);background-color:#FFF;background-image:none;border-radius:2px;border:1px solid rgba(0,0,0,0.17);color:#262626!important;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px 0 4px;white-space:nowrap}
.mbt-gp:hover, .mbt-gp:visited{color:#262626!important;}
#MBTshares .pinit{background:#f9f9f9!important}
#MBTshares .stumb{background:#f0fafe!important;border:1px solid #cde3ea}
#MBTshares .stumb:hover{border:1px solid #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)}
#MBTshares .stumb i{color:#eb4823!important;font-size:13px!important;margin-top:1px!important}
.mbt-gp:focus,.mbt-gp:hover,.mbt-gp:active{border:1px solid rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.1)}
.mbt-gp i{padding:2px 2px 0 0;font-size:11px;color:#DB4437;margin-right:2px;margin-top:3px}
.mbt-gp .fa-pinterest{padding:0 2px 0 0;font-size:14px}
#MBTshares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; }


/***LinkedIn***/
.mbt-linkedin{transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#0077B5;text-shadow:0 -1px #005887;border:medium none;border-radius:2px;border:1px solid #066094;color:#fff!important;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 2px 0 1px;white-space:nowrap}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.mbt-linkedin{padding:0 5px 0 1px}
}

.mbt-linkedin:focus,.mbt-linkedin:hover,.mbt-linkedin:active{border:1px solid #0369A0;background-color:#0369A0}
.mbt-linkedin i{padding:0;font-size:17px;color:#FFF;margin-right:0;position:relative;left:1px}
.mbt-linkedin .ibg{background:#0369A0 none repeat scroll 0 0;width:17px;display:inline-block;border-right:1px solid #006095;border-radius:2px;height:20px;padding:0 2px 0 1px;margin:0 2px 0 -1px}

/**Twtter, Print, Whatsapp, viber**/
.mbt-tw{position:relative;height:22px;padding:4px 8px 1px 4px;font-weight:700;color:#FFF!important;cursor:pointer;background-color:#1B95E0;border-radius:3px;box-sizing:border-box}
.mbt-tw:focus,.mbt-tw:hover,.mbt-tw:active{background-color:#0C7ABF}
.mbt-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:2px;margin-top:0}
.mbt-o{max-width:100%}
.mbt-o,.mbtcount-o,.mbt-fb,.mbt-gp,.mbt-linkedin,.mbt-tw,.label,#mbtcount{display:inline-block;vertical-align:top}
.label {margin-left: -1px !important;}
.mbtcount-o{position:relative;min-width:15px;height:17px;text-align:center;padding:1px 5px;margin-left:2px;background:#FFF none repeat scroll 0 0;border:1px solid #e7e7e7;border-radius:2px; }
#MBTshares .printme {background-color:#333;}
#MBTshares .printme:focus,#MBTshares .printme:hover,#MBTshares .printme:active{background-color:#000}
#MBTshares .whatsapp{background-color:#73D40B;}
#MBTshares .whatsapp i{font-size:15px!important;}
#MBTshares .whatsapp:focus,#MBTshares .whatsapp:hover,#MBTshares .whatsapp:active{background-color:#65BA09}
#MBTshares .viber{background-color:#7b519d;}
#MBTshares .viber:focus,#MBTshares .viber:hover,#MBTshares .viber:active{background-color:#8558aa}
#MBTshares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; }

#mbtcount{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0}
#mbtcount:hover{text-decoration:none}
#MBTshares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2}
#MBTshares .ext{min-height:18px!important}
#MBTshares .arrow s,#MBTshares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px}
#MBTshares .arrow i{border-right-color:#FFF;left:2px;top:11px}
.share-btn{position:relative;display:inline-block}
.share-btn .h2{font-size:30px;font-weight:700;font-family:arial;color:#73D40B;height:31px; line-height: 1.4em;}
.share-btn .h4{font-size:12px;font-family:arial}

/*#########Floating Counter Styles###########*/
.mbt-vertical{ max-width:60px!important;margin:0 0 0 -83px!important;border:1px solid #f3f3f3!important;padding:3px 6px 0!important;background:#fff; position: fixed;z-index:99999;bottom: 7%;float: left;border-right:0px solid #fff!important;}
.mbt-vertical #MBTshares{display:block;width:60px;margin:7px 0!important}
.tcount{margin:0 10px 0 0;text-align:center;min-width:60px;border-right:3px solid #73D40B;padding:0 15px 0 10px}
.mbt-vertical .tcount{border-right:0;padding:0;text-align:center;height:auto}
.tcount .h2{font-size:29px;padding-bottom:5px}
.tcount .h4,.mbt-vertical .tcount .h4{font-size:12px;padding-bottom:5px;border-radius:0}
.mbt-vertical .tcount .h4{border-bottom:3px solid #73D40B}
.mbt-vertical .mbt-o,.mbt-vertical .mbtcount-o,.mbt-vertical .mbt-fb,.mbt-vertical .mbt-gp,.mbt-vertical .mbt-tw,.mbt-vertical #mbtcount{display:block}
.mbt-vertical .mbtcount-o{margin-bottom:7px;margin-left:0;height:30px}
.mbt-vertical #mbtcount{padding:7px 0 0;font-size:15px;color:#666}
.arrow-v{bottom:-8px;height:7px;left:25px;position:absolute;width:0;z-index:2}
.arrow-v s,.arrow-v i{border-color:#e7e7e7 transparent transparent;border-style:solid;border-width:5px;display:block;position:relative}
.arrow-v i{border-top-color:#FFF;left:0;top:-12px}

/*#########Vertical Counter Switch###########*/
.switchoff{display:none}
.mbtswitch{padding:0 16px;margin:0 0 5px;display:block;max-width:60px;height:20px;cursor:pointer;background-color:#fff;border:1px solid #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd}
.mbtswitch:hover{color:#73D40B}
.mbtswitch i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal}
.mbtswitch i.inactive:after{content:'\f068';position:relative;left:7px;top:2px;font-style:normal}


/*#########Horizontal Counter Switch###########*/
.switchoff2{display:inline-block;}
.mbtswitch2{padding:0 15px 0 3px;position:relative;top:-15px;margin:20px 0 0 3px;display:inline-block;max-width:30px;height:20px;cursor:pointer;background-color:#fff;border:1px solid #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd}
.mbtswitch2:hover{color:#73D40B}
.mbtswitch2 i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal}
.mbtswitch2 i.inactive:after{content:'\f068';position:relative;left:7px;top:2px;font-style:normal}
@media only screen and (max-width:230px) {
.tcount{border-bottom: 2px solid #74D50C; border-right:none; min-width:100%;}
#horiz #MBTshares {width: 100%;}
}

The stylesheet above can easily be customized if you wish. To change the green font color of the JumboShare count kindly edit #73D40B

4 Next 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 post titles then paste the following HTML code just above <data:post.body/>   but if you wish to display the sharing bar at bottom of post then paste the following HTML code just below <data:post.body/>

If you want to display the sharing bar twice at both these locations, then paste the following HTML code twice once above <data:post.body/> and once below <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='MBTshares-wrap'>

<!--TOTAL-->
<div class='share-btn tcount' data-service='total'>
        <div class='count h2 anim'/>
        <div class='h4'>SHARES</div>
</div>
<span id='horiz'>

<!--FACEBOOK-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-fb' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Facebook!'><i class='fa fa-facebook'/><span class='label'>Share</span></a>
</div>
<div class='mbtcount-o'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='facebook'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>

<!--PINTEREST-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-gp pinit' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Pin it!'><i class='fa fa-pinterest'/><span class='label'>Pin it</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='pinterest'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>

<!--TWITTER-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-tw' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;-&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Twitter!'><i class='fa fa-twitter'/><span class='label'>Tweet</span></a>
</div>
</div>

<!--LINKEDIN-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Linkedin!'><span class='ibg'><i class='fa fa-linkedin'/></span><span class='label'>Share</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='linkedin'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>

<div class='switchoff2' style='display:none;'>

<!--GOOGLE PLUS-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Google Plus!'><i class='fa fa-google-plus'/><span class='label'>Share</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='google'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>

<!--STUMBLEUPON-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-gp stumb' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Stumble it!'><i class='fa fa-stumbleupon'/><span class='label'>Share</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='stumbleupon'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>

<!--BUFFER-->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-gp' expr:href='&quot;https://buffer.com/add?url=&quot; + data:post.url + &quot;&amp;picture=&quot; + data:post.thumbnailUrl + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=stc_network&quot;' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Buffer!'><img class='bufferimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24J0qLODfMhr8gbOF2tYW-9XpDpi5uUzg1HT0Kgg1pNhsivM2dBzD2fHgAd2jzX44x62lp6v0cE-Pxiku2-5OG6YfdnGb5whWTGN_58OOKP1cxXaT0NjSHkYYU8ZtgkAPNqUY9Q3_99GL/s1600/logo-icon.png'/><span class='label'>Buffer</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='buffer'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- WHATSAPP -->

  <div id='MBTshares'>
    <div class='mbt-o'>
      <a class='mbt-tw whatsapp' 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!'><i class='fa fa-whatsapp'/><span class='label'>SMS</span></a>
    </div>
  </div>

<!-- VIBER -->
  <div id='MBTshares'>
    <div class='mbt-o'>
      <a class='mbt-tw viber' expr:href='&quot;viber://forward?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank' title='Share on viber!'><img class='viberimg' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibhxJEjgqSV07ZJPER9lWvi0oMROo7ItjFDCu3mrBCyuxfxYZOgcx4MZUHLS-fvmDtHxoZJE7PU1aPsjSH0i0JDuX8l_a5oqCdNKL-zcIa9cKwTkpYgFtpDSJ67-dDXA26WbeV_x6kbQvj/s1600/Icon_small.png'/><span class='label'>Share</span></a>
    </div>
  </div>
</b:if>

<!-- PRINT -->
  <div id='MBTshares'>
    <div class='mbt-o'>
      <a class='mbt-tw printme' href='javascript:window.print()' rel='nofollow' target='_blank' title='Print this page!'><i class='fa fa-print'/><span class='label'>Print</span></a>
    </div>
  </div>

</div> <!--switchoff-->

<span class='mbtswitch2'><i class='active'/></span>
</span>
</div></b:if>

Customization Guide:

  • All button locations are labeled for easy readability. You can easily change/swap the locations of button within the widget.
  • Replace stc_network  with your buffer handle or profile username or simply your blog title without spaces.
  • If you wish to display some buttons in mobile devices only then paste its code inside the yellow highlighted tags.
  • All buttons inside the purple highlighted tags will remain hidden when page loads and will be displayed only when the user clicks the +/- switch button. Buttons will display using this toggle button which we named the switch.
  • If you wish to add more buttons inside the switch then simply copy its code and paste it inside the purple switch tags.
  • To remove buttons from inside the switch, simply copy the button's code and paste it above the switch tag i.e. <div class='switchoff2' style='display:none;'>

5 Save your template and you are all done!

Need Help?

I tried my best to make the installation instructions as easy as possible, but if in case you went into any technical trouble, do let me know for any help needed. I would love to assist you.

This plugin has really improved our social media presence and we have seen an excellent response from Facebook share button and stumbleupon. We will continue adding more buttons to it like reddit and delicious, depending on how many of you request for it. We will share the Floating sharing bar widget in next tutorial. Stay tuned till then!

Do share your precious feedback. Would love to hear from you all! =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

48 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Wow really nice share widget I will add very soon in my blog thanks bro sharing this Jumbo Share Counters
    bro please check my blog how's it
    http://Techwithloud.com

    ReplyDelete
    Replies
    1. Add the counter and I will review your blog to see if it works fine buddy

      Delete
    2. Hey Bro please check my blog this widget does not work

      Delete
    3. Bro work perfectly in mobile devices but in desktop version can't work

      Delete
    4. You have not installed the plugin and just added the HTML. How can something work without the engine? =)

      Kindly install plugin first from here

      Delete
  2. AoA Mustafa Bhai :)
    Can you please guide how to use this widget in WordPress ???
    By the way.... Plugin is Awesome
    and
    Thank You so Much

    ReplyDelete
    Replies
    1. W.salam buddy,

      I will be writing a separate tutorial for Installing "Jumbo Share Counters" in WordPress sites.
      Stay tuned for that =)

      Delete
  3. Hi,
    I followed the exact tutorial step by step but doesn't work on my test blog (simple blogger template non-customized).
    Could you tel me what i am missing. (here : http://secourisme-formation.blogspot.fr/2016/03/test.html)

    Thx a lot for your job it's a great plugin and i wanted to replace the share bar of my actual blog with it.

    ReplyDelete
    Replies
    1. My mistake I forgot to inform that you also need to add Jquery and FontAwesome libraries inside the templates. I have updated the installation instructions on the first tutorial please add those two files.
      It will work just fine then :)

      Delete
  4. Thanks a lot indeed. It works on my blog. Really great effort you contributed for blogger community. May Almighty bless you for such great work.

    Regards.

    ReplyDelete
    Replies
    1. Thank you buddy for the kind feedback. May God bless you even more! =)

      Delete
  5. Replies
    1. Thank you Evaggelos for finding it useful. I really appreciate your feedback. Means a lot =)

      Delete
  6. Good Widget... But coding is too much long. My blog is already slow after installing this code, blog is not open after a high speed internet connection. Can you make it responsive and fast

    ReplyDelete
    Replies
    1. This widget is lightening fast and have been tested. It works just fine on all our sites.

      May be your scripts are not properly located and are render-blocking. Could you share your blog URL so that I could assist you better.

      These buttons are plain HTML with some JavaScript effect that loads instantly. It has no heavy weight images or similar media. It must work just fine like it is working on our site.

      Delete
  7. Hello Bro! I just wanted a responsive theme for blogspot can you please help with it ?? It will be a great help for sure

    Thanks in Advance

    ReplyDelete
    Replies
    1. We will release some templates very soon. Stay tuned!

      Delete
  8. Working Great on my site. I have added both below title and bottom of the post. its just great. Thank you very very much Ahmed Bro. you are luv :)

    ReplyDelete
    Replies
    1. I am so glad you could install it successfully. This feels great =) You are always welcomed!

      Delete
  9. Hai @Mohammad i have a custom designed PHP website can i convert this plugin to PHP version NOTE - For personal use only

    Santhosh veer

    ReplyDelete
    Replies
    1. Ofcourse you just need to change the href parameters in the HTML code I shared above. If your website is hosted on Wordpress framework, then I will share a separate tutorial for wordpress blogs in coming days. :)

      Delete
  10. Thx Bro, works fine on my testing blogger but not in my main blog.I added the 2 files you told me but still doesn't work. Have you an idea why (my template is a little bit more sophisticated).
    you can see the behavior of the plugin at the end of this post: http://www.crack-net.com/2016/03/reparer-soi-meme-vitre-tactile-cassee-tablette.html

    ReplyDelete
    Replies
    1. Buddy inside your template you have too many scripts which are not located in one place, they are randomly located in different locations. This causes a JS conflict when scripts are not well formatted especially when using Jquery.

      Kindly remove your current social media sharing plugins like that of AddThis and similar.

      Instead of adding the JQuery code above closing head tag, add it just below opening <head> tag.

      Remove the JumboShare code from the closing </body> tag and add it instead just above </head>

      Delete
  11. I made the modifications you told me and it's better but not yet perfect ;-)

    - The text inside the shareboxes doesn't display (Tweet, share...)
    - The facebook sharer doesn't work neither in my blog nor in MBT. When we click on it it opens our facebook page instead of the sharing window.

    Have you got a solution for these 2 points?
    Plus : how could i display the vertical sharebox like in MBT?

    ReplyDelete
    Replies
    1. Well done you have now added it correctly.


      1. For the text to display, I have updated the above CSS code. Please re-add (replace previous) the code shared in step#3

      2. The facebook share button is working on your site. Make sure you have not installed a pop-up blocker add-on or extension. It is your browser issue.

      Hope this answers your query =)

      Delete
    2. Will share the vertical floating sharing bar shortly =)

      Delete
    3. Thx Mohammad.
      I had indeed a problem with the css : i already have a class called label in my template so there was a conflict with the label class of the plugin... I modified it and called it labels (with a s ;-)

      I insist about the facebook share button. Yours (the one of MBT) doesn't work in chrome or in my android smartphone but works in edge and firefox... I don't have any popup blocker installed. I don't have the problem anymore with my site since i modified the url in the button code.

      Hope you will share the vertical floating sharing bar asap :-) I saw on your source code the "Show hide Jumbo Share Counter" script but i could'nt make it work properly with my attempt of writting the buttons code by myself.

      Thx again for the tips you share... The best blogger tips of the web.

      Delete
    4. Thank you for the kind feedback. It surely is the fuel that keeps us motivated to do better =)

      Indeed the label class was what I was about to tell you. I am glad you figured it out.

      About the Chrome and andoid devices not supporting the share button, I just did a recheck, surprisingly everything seems to work just fine on my side.

      I am using chrome Version 48.0.2564.116.

      I am waiting for more user feedback, if they too reported this bug then it will be a bug on my part else it will be on your part =d

      About the toggle button, I used simple jQuery to do that. Real challenge was the horizontal toggle where I had to tweak the CSS3 a a lot.

      I am really glad you found these buttons useful and worth using. Thank you for all the love and respect. =)

      Delete
    5. I'm using the same chrome version... Maybe mine is cursed lol

      These button are really usefull because they are light and don't affect my loading speed contrary to the addtoany plugin i used to have in my blog.

      After you release the code for the vertical sharer i will configure it as i configured the addtoany buttons :
      - horizontal counters fixed in the bottom of the screen for mobiles or tablette and invisible in computer screen
      - vertical counters floating like in mbt but invisible in mobiles


      Delete
  12. Thanks Brother for such a useful information. In these days, few blogs running by me but right now my main focus on my money blog which is my source of earning. I have a question, How can I remove adsense ads on contact us, about us, privacy policy page etc in blogger.com. I am completely fedup that how to remove.

    ReplyDelete
    Replies
    1. Buddy you just need to enclose your Adsense code inside the conditonal tags for Static pages. Read the post below to know how to do it for different pages:

      Show Hide Code in Blogger

      Delete
  13. ye code blogger p show q nhe hoty?? kia blogger k liay h?

    ReplyDelete
  14. Hi,

    i just noticed that tweet counter doesn't work. We can use it to tweet but the counter is not displayed.

    ReplyDelete
    Replies
    1. Oh i realized it's because of the new twitter api So it's okay.

      Delete
    2. I succeded to display it as i wanted :

      - Vertical floating bar for wide screens (computer)
      - horizontal and floating in fixed position at the bottom of the screen for the little screens like smartphones and tablets.

      Could you have a look and tell me what you think about that "customization" (here for example : http://www.crack-net.com/2016/03/choisir-son-cloud.html).

      Really thx for your plugin really complete without slowing my loading page speed.

      Delete
  15. hello Sir, thanks for this nice post... I have added this jumbo share to my blog, but I think it misses one important button. it's Pocket button. Is there a way to add pocket to this jumbo share?

    ReplyDelete
  16. hello sir, thanks for this post. Pls i have a little problem, ive been searching for the in my templates and expand widget but unfortunately i cant find it.Thanks.

    ReplyDelete
  17. i can't change original color jumbo share
    Please help me

    ReplyDelete
  18. Hello there. I'm having problem with the counter.I installed it correctly but it doesn't appears on certain posts.But through the "preview button' i can see the counters. but when the page goes live can't see it.

    For exam[le i can see the button in this page http://www. videogamerplus.com/2016/07/the-complete-eevee-evolutions-pokemon.html

    But not in this page

    http://www. videogamerplus.com/2014/09/60-fps-native-1080p-ps4-games-list.html

    can you help me fix it?

    ReplyDelete
  19. Hey Mohammad Bro,

    As usual you always share unique widgets for blogger users and really I'm a big fan of yours.

    I have a query related to this horizontal plugin. Actually, I'm designing my custom horizontal share bar using this animated counter effect. Animated counter effect works perfectly but I want to know how you make possible, animated counter not start until someone scroll down your page and see the horizontal bar. Is there a jQuery behind it?

    Hope you will reply soon.

    Thank You! :)

    ReplyDelete
  20. Oh sorry just checked out my share bar it is working perfectly just like as your.

    Animating counter start setting is by default.

    Thank You Bro.

    ReplyDelete
  21. Hi,Mustafa Bro, I have a question yo ask. My template has inbuilt share counter and button to but they are not working and I want to replace that with your Jumbo SC. I don't know how to replace. As I have already one plugin If without clearing it Install your Plugin I thing there may be some trouble. So bro I need your help.
    And your Plugin is really very good.

    ReplyDelete
  22. Hi bro the jumboshare counters is not working on my blog. It's showing 0 shares and just checked your blog and on your blog also the counter is not working. How to solve this error?

    Regards

    ReplyDelete
  23. I'm having a hard time installing it on my website. www.justcarguy.com I can't get it right, I pasted the codes correctly but nothing's appearing on my website. please help :(

    ReplyDelete
  24. One of the awesome plugin ever made for blogger. You are awesome
    @Mustafa bhai. You have built an awesome plugin.

    @Santosh Shah, I think that you did not install the Jumbo counter plugin on your template correctly. Here is a hosted CDN (By yourjavascript),

    <script src="http://yourjavascript.com/17211458817/jumbo-share.js"></script>

    ReplyDelete
  25. I have added that code. This >> http://new-counters.rhcloud.com is not working. Even in MBT it's not working. It's not counting the facebook shares. Any suggestion please.

    ReplyDelete
    Replies
    1. Please replace http://new-counters.rhcloud.com with http://mbtr-counters.rhcloud.com


      That simple! :)

      Please check the jumboshare install page always because I update the source links as soon as Facebook API request limit is reached.

      Delete