How To Add Together Jumbo Social Percentage Bar Amongst Counters Inwards Blogger

Are you lot looking to add together a Jumbo social portion bar inwards Blogger? Why it is called a Jumbo Social Bar? What's the catch? You mightiness lead maintain seen those overnice looking social sharing buttons that present the amount expose of social shares counts that your detail post or page has received. Today inwards this article, nosotros volition present you lot how to add together jumbo social sharing bar amongst counters inwards blogger.

What is Jumbo Social Share Bar?

In the past, nosotros lead maintain all shown you lot how to add together social sharing buttons inwards blogger but amongst the latest improvements, social sharing buttons are similar a shot beingness replaced past times Jumbo Social Share plugins as well as widgets. This social portion bar piece of occupation similar mashable.com social portion bar. It consists of a big Ajax cook counter that counts overall shares for your posts as well as pages.

To add together Jumbo Social bar nosotros volition endure using a plugin called donReach social plugin that is flexible, tardily to customize, responsive as well as to a greater extent than over it is FREE. They are 1 of the well-nigh lightweight as well as user-friendly social portion buttons which volition sure as shooting increase your social signals as well as shares.

Now permit us lead maintain a hold back at how to easily add together a Jumbo Social Share Bar amongst Counters inwards Blogger.

Add Jumbo Social Share Bar amongst Counters inwards Blogger

The real get-go affair you lot involve to produce is to lead maintain a backup of your Blogger template, but to endure on prophylactic side if anything goes wrong. Hint: (Go to Blogger >> Template >> Backup/Restore >> Download Full Template).

To add together Jumbo social portion bar, Go to Blogger >> Template >> Edit HTML and Search for the ]]></b:skin> tag. After finding the ]]></b:skin> tag, but to a higher house it glue the next 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 company #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 company #eee;
padding-bottom: 15px;
} 

Now to install the donReach social plugin, inwards the Blogger Template editor search for </head> as well as but to a higher house it glue the next 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 portion bar, glue the below code anywhere you lot desire it to appear inwards your blog. Ideally, users similar it to display either below or to a higher house the post content . To display it to a higher house post content as well as below post title, inwards the template editor search for <data:post.body/> and but to a higher house it glue the next 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 present iii portion buttons but you lot tin add together to a greater extent than buttons equally per your needs. Check out the examples at donReach page.

Once everything is done, press Save template push as well as you lot lead maintain successfully added Jumbo Social Share bar inwards Blogger.

You tin banking concern fit out the demo if this widget here.

We promise this tutorial has helped you lot inwards learning how to add together a jumbo social portion bar amongst counters inwards blogger. If you lot know a improve as well as simpler Jumbo Social Share plugin experience gratuitous to portion them inwards comments below.