HOW TO INSTALL JUMBO SHARE COUNTER IN BLOGGER BLOG
The morning is bright and fantastic, Hey guys hope you Enjoying blogging we are always happy to give you back to back tips, Tricks and turn this platform to a knowledge base for all newbie and daylife bloggers, today we bring to you the fantastic Social share counter, but first most of you may have install other social share counter well that's good but if you haven't install a social share counter then here is a chance for you to install the beautifully made Jumbo share counter in a simple format, And if you don't know what is even a social share counter then let me give you a little tip about what a social share counter is:::
A social share counter is a widget or plugin that is coded to help you count your visitors who shared a post from your blog to there various social media pages that means if your visitor share a particular post on your blog the jumbo counter will take it down just as seen above the picture [ 1.2k ], It is a beautiful way of drawing your visitors attentions cause if your post get high shares it makes people want to share it more
So now i have given you a little tips about a Jumbo counter i hope you like it and want to install it now let me guide you on how we can install this wonderful script on our template are you ready ..... ARE YOU SURE YOU ARE READY !!! HMMM YOU MUST BE KIDDING YOU REALLY WANT TO INSTALL THIS Okay let get started see below
STEP 1: Login to your blogger dashboard
STEP 2: Click on Theme or Template
STEP 3: Click on Edit Html
STEP 4: Use ctrl+f to search for ]]></b:skin>
STEP 5: Paste the below code above the ]]></b:skin>
.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 let head over to the nextstep which is adding some Js script just search for </head> and above it paste the below 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>
Now the final steps is to place the share counter code where you want it to appear you know that so many people prefer it to stay below there post or above it well if you want it to be place there then search for <data:post.body/> and below it paste the below code but if you want the share counter to stay on top of your post then paste the code above <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<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>
There is love in sharing
NOTE: Hope you don't mind leaving a comment below if you have any query, we want to know our visitor cause we will be given free gift to our potential visitors we don't want you to be left out just comment below so we will be keeping record till date
Thanks
Editor's Room
No comments: