MBT Blogger Horizontal Share Button With Counter

Introducing my first post on share buttons and my first set of free share buttons. Jumbo share counter is a powerful too that can get your blog to the next level of audience engagement. The share buttons are currently live on my blog. I will be sharing with you two categories of the share counter.

1. Installing Jumbo share counter script

2. Horinzontal Share Button With Counter

3. Floating Vertical Share Button With Counter

One of the most amazing feature of the share button, is its ability to expand which allows you to show over 7 different sites to share to. The share includes both PC and mobile sites like WhatsApp and also have the print button. 

See Demo
Live Preview

Available Buttons

A list of the available share buttons will actually take time, as it covers the best and most used websites. 

Facebook Share Button: Still the biggest website with millions of users waiting to share you post. The face book share button is available and shows both on mobile and laptop. The Facebook comes with share counter among others. Meaning, you can actually see the number of persons that share your post to Facebook.

Twitter 'Tweet' Button: They recently turned of their share count API but that doesn't stop us from including the button. Though you can't she the share count, you can still use the share button.

Pinterest 'Pin It' Button: Great photo website. You can actually add the pinterest button to each image on your blog or simply use the share button to share the first image thumbnail on each post.

StumbleUpon Share Button: Share amazingly to StumbleUpon, easily and with comfort. If you have lot of audience coming from StumbleUpon then this widget will be great for your blog.

GooglePlus Share Button: Google's very own.

WhatsApp: Shows only in mobile devices, because of the install ismobile tag in the share plugin.

Buffer: share post to buffer easily.

Features

Responsive: The blogger share counter, fits into any layout, both laptop and mobiles. Giving your readers both pleasures when reading your blog.

Fast Loading: Jumbo share counter is extremely fast loading and is built on font awesome, jquery and other great plugins.

Expand/Collapse option: Expands with the plus (+) and retracts with the minus button (-).

SEO Friendly: Share buttons and counters don't normally have this feature. But MBT Blogger share buttons comes with a unique feature of Search Engine Optimazation to keep your blog on google first page.

Others

• Animated number counter on scroll
• Natural in design
• Customizable
• Hosted on cloud servers
• Free of cost!

How To Add MBT Share Button With Counter to Blogspot

First before we install the button in our blogger blog, we need to install the script that will allow it work.

Part A - Installing the Script

Step 1: Login to blogger.com  >> Choose your blog >> BackUp your template.

Step 2: Visit the Edit HTML Section of your blog. (Template)

Step 3: Using CTRL + F Search for </head> Copy the below code and paste it above </head>

<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

Step 4: Now Search for </body> and paste the below code just above it.

<script type='text/javascript'>
//<![CDATA[
/* ##### FREE JUMBO SHARE COUNTERS #######
Developed by: www.MyBloggerTricks.com
Dual licensed under the MIT license and GPL license.
Copyright (c) 2015-2016 STCnetwork.org
Re-Published by: www.obhiabablog.blogspot.com
###### PHP script ########################
Developed by http://donreach.com/,
Optimized by STCnetwork.org
####### Animation ########################
Supported by: waypoints.js and Counterup.js
Customized by STCnetwork.org
Source: https://github.com/bfintal/Counter-Up
#######################################*/
ADD CODE HERE
/*##########Plugin Settings#############*/
$(document).ready(function() {
var shareUrl=$("link[rel=canonical]").attr("href");
$.getJSON('http://share-counters.rhcloud.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>

Customization:

If you have uploaded the scripts yourself then you can replace "http://share-counters.rhcloud.com" with your API URL

1. To increase the frames of the rotating numbers, reduce value of delay

2. To slow down the animation speed, increase the value (in milli seconds) of time

3. In the above code replace the line "ADD CODE HERE" with the entire code on this link

Step 5: Save your template >> Proceed to Part B.

You have successfully added the script that will make the share buttons work. Now lets move to part B, Where we will be doing the styling and installing the MBT share counter.

Part B - Styling The Share Button

lets first choose where we want to show the widget. It can be placed below post title and below post and also these features are available on the mobile view.

Step 1.

Using CTR + F 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%;}
}

Step 2. - Cuatomization

The style sheet above can easily be customized if you wish. To change the green font color of the Jumbo Share count kindly edit #73D40B.

Step 3:

Save >> Proceed to Part C.

Adding Blogger Share Button Below Post Title.

Should in case you wish to show the buttons below your blogger post title, simply follow the below steps.

Step 1

Using CTRL + F search for <div class='post-header'>

Note: you will find this code twice. The first one is for the mobile view, while the second is for the Desktop view. Should in case you wish to show the share buttons both on mobile and Laptop, do add the below code at both places.

Step 2:

Copy the below code, and paste it immediately after <div class='post-header'>

<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/AVvXsEhvknSIMBfaKudlQKCvDNXy90WZuNDinpwWKM5JC4ZHt3TvQ6pmDmfP4kiEP20mIY8QATCgVVtzuzeu4xf8AMDwPtvFpSQMEpTTGUtdQJfI25o_bmdUGaVcnfw3favOrDZ7x8sMtuRHuXrB/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/AVvXsEh2yodx18rYPOPY_R8NVZeWRRNB27W_EkN2YDnfxlzBf3oGw4o-uD4teO2WDkVjVz6If2ZUhmkWljkjE0ukrGD6phBvzrd6yUyLzOKX3f35THBtmG7wXEqmd7s7GQYR25LuyideRa-VPe6N/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>

Step 3

Save and Proceed.

Installing Blogger Share Counter Below Post

If you wish to add the share counter, to the bottom of each post on your blog, just as seen below this post, simply follow the below steps.

Note: You can show the share button, both below post title and below post at the same time. 

Step 1: 

Using CTRL + F search for <div class='post-footer'>

Part C - Show Below Post Title

Note: you will find this code twice. The first one is for the mobile view, while the second is for the Laptop view. Should in case you wish to show the share buttons both on mobile and Laptop, do add the below code at both places.

Step 2:

Copy the below code, and paste it immediately after <div class='post-footer'>

<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/AVvXsEhvknSIMBfaKudlQKCvDNXy90WZuNDinpwWKM5JC4ZHt3TvQ6pmDmfP4kiEP20mIY8QATCgVVtzuzeu4xf8AMDwPtvFpSQMEpTTGUtdQJfI25o_bmdUGaVcnfw3favOrDZ7x8sMtuRHuXrB/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/AVvXsEh2yodx18rYPOPY_R8NVZeWRRNB27W_EkN2YDnfxlzBf3oGw4o-uD4teO2WDkVjVz6If2ZUhmkWljkjE0ukrGD6phBvzrd6yUyLzOKX3f35THBtmG7wXEqmd7s7GQYR25LuyideRa-VPe6N/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>

Step 3

Save >> Visit any post on your blog and you should see the share counters doing the magic already.

Customization Guide:

• All button locations are labeled for easy readability. You can easily change/swap the locations of button within the widget.
• 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;'>

Save your template and you are all done!

Liked it? Share and leave your comments below. I remain your very own Esan Boy Prince John Okosun. Have a great blogging experience. Tip: Don't just blog! blog for passion and let every other thing come at it's appointed time.

Also From MBT: Introducing COPMO - Responsive, SEO Ready And Ads Ready Blogger Template

Widget Credits:

This widget named Jumbo Share Counter is the copyright product of Mohammed, blogger at My Blogger Tricks. He designed the widget and shared it on his blog. Visit him for great blogger widgets, templates and tricks.

References
Jumbo Share Counters - Horizontal Social Sharing Bar
Introducing "Jumbo Share Counters" Plugin

Easily add new fancy, responsive, expandable and MBT Jumbo Share buttons with counter to your blogger blog.

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

Subscribe to receive free email updates: