How to Add Jumbo Social Share Bar with Counters in Blogger

Advertisements
How to Add Jumbo Social Share Bar with Counters in Blogger
Are you looking to add a Jumbo social share bar in Blogger? Why it is called a Jumbo Social Bar? What's the catch? You might have seen those nice looking social sharing buttons that show the total number of social shares counts that your particular post or page has received. Today in this article, we will show you how to add jumbo social sharing bar with counters in blogger.


What is Jumbo Social Share Bar?

In the past, we have all shown you how to add social sharing buttons in blogger but with the latest improvements, social sharing buttons are now being replaced by Jumbo Social Share plugins and widgets. This social share bar work like mashable.com social share bar. It consists of a big Ajax build counter that counts overall shares for your posts and pages.
MyBloggerLab Jumbo Social Bar
To add Jumbo Social bar we will be using a plugin called donReach social plugin that is flexible, easy to customize, responsive and more over it is FREE. They are one of the most lightweight and user-friendly social share buttons which will certainly increase your social signals and shares.

Now let us take a look at how to easily add a Jumbo Social Share Bar with Counters in Blogger.


Add Jumbo Social Share Bar with Counters in Blogger

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

To add Jumbo social share bar, 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 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>

Finally to display the Social share bar, paste the below code anywhere you want it to appear in your blog. Ideally, 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>

Currently, the widget show 3 share buttons but you can add more buttons as per your needs. Check out the examples at donReach page.

Once everything is done, press Save template button and you have successfully added Jumbo Social Share bar in Blogger.

You can check out the demo if this widget here.

We hope this tutorial has helped you in learning how to add a jumbo social share bar with counters in blogger. If you know a better and simpler Jumbo Social Share plugin feel free to share them in comments below. 
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

2 comments

July 20, 2016 at 9:57 PM

I don't see a search function and I want to add all of the social share buttons on a dynamic template. Is there someone that can help me do this?
straats At symbol gmail.com

July 23, 2016 at 1:38 AM

Hello Dr. Good. If you want to use the search function press "ctrl + f" on your keyboard.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.