How To Add Jumbo's Social Share Bar With Post Viewers Counters in Blogger Blog.

- July 02, 2019

Looking to add a blogger Jumbo social share bar? Why is a Jumbo Social Bar called? What's that catch? You might have seen those nice looking social sharing buttons showing how many social shares your specific post or page has received. We're going to demonstrate you how to add jumbo social sharing bar with counters in blogger today in this post.

What is Jumbo Social Share Bar?

Jumbo Social Share Bar Mr Tech Site

We've all shown you how to add social sharing buttons to your blogger in the past, but with the recent changes, social sharing buttons are now being substituted with Jumbo Social Share plugins and widgets. This social sharing bar works as a social sharing bar for mashable.com. It comprises of a large Ajax build counter, which for your posts and websites counts general stocks.

We will use a plugin called donReach social plugin to add Jumbo Social bar which is versatile, simple to customize, responsive and FREE. They are one of the most user-friendly and lightweight social share buttons that will surely boost your social signals and shares.

Now let's look at how to add a Jumbo Social Share Bar in Blogger with counters readily.

Add Jumbo Social Share Bar with Counters in Blogger

The  first thing you need to do is just to take a backup of your Blogger template,  to be secure incase anything goes wrong. Hint: (Go to Blogger >> Template >> Backup/Restore >> Download Full Template).

To add Jumbo social share bar, Just Go to Blogger >> Template >> Edit HTML and Search for the ]]></b:skin> tag. After finding the ]]></b:skin> tag, just above it paste the following code:



/* Jumbo Social Share Bar By MBL */

.don-share .don-share-total .don-count {
font-size: 40px;
text-align: center;
font-weight: 600;
color: #ff0036;
border-right: 1px solid #eee;
padding-right: 18px;
margin-right: 20px;
margin-bottom: 0;
}
.don-share .don-share-total .don-count:after {
line-height: 30px;
color: #a6a6a6;
font-weight: 300;
font-size: 12px;
text-transform: capitalize;
content: "Share";
}
.don-btn {
background-image: none;
box-shadow: none;
}
.don-share i {
border: 0!important;
text-align: center;
width: auto;
font-size: 16px; margin-bottom:10px;
}
.don-share .don-share-total:after {
display: none;
}
.don-share .don-share-total {
line-height: 45px;
margin: 0;
}
.don-share [class*=' don-share-'],
.don-share [class^=don-share-] {
margin: 0px 10px 0px 0;
}
.don-share {
margin: 15px 0px 15px 0;
border-bottom: 1px solid #eee;
padding-bottom: 15px;




Now you need to install the donReach social plugin, in the Blogger Template editor search for </head> and just above it paste the following JavaScript code:



<script type='text/javascript'>
(function() {
var dr = document.createElement('script');
dr.type = 'text/javascript'; dr.async = true;
dr.src = '//share.donreach.com/buttons.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
})();
</script>



Lastly, in order to display the Social share bar,  you need to paste the below code anywhere in your site you want it to appear in your blog. Mostly users like it to display either below or above the post content . To display it above post content and below post title, in the template editor search for <data:post.body/> and just above it paste the following code:-



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='don-share' data-limit='3'>
  <div class='don-share-total'/>
  <div class='don-share-facebook'/>
  <div class='don-share-twitter'/>
  <div class='don-share-pinterest'/>
</div>
</b:if>



We hope that this tutorial has helped you learn how to add a blogger jumbo social share bar with counters. If you understand the Jumbo Social Share plugin better and simpler, please share it in the remarks below.



EmoticonEmoticon

 

Start typing and press Enter to search