Do you have a responsive blogger template? If you are using the responsive blogger template then you must use responsive social media sharing buttons below/above blogspot post titles.In this article we are going to teach you how to add Social Media Sharing Buttons With Counter Above/Below/Footer in Blogger Post.This widget/gadget/plugin helps you to add sharing buttons below post titles.I'm already using in it my website for demo look below sharing buttons in footer.To add this blogger sharing plugin just follow the mentioned steps below.
how to add responsive social share buttons below post titles/footer in blogger
Installation steps:
1. Go to Blogger Dashboard -> Template -> Edit HTML ,Do Not Forget to take backup of your template.
2. Now Search For ]]></b:skin> tag,and paste the following CSS code just above it.
.bloggersstand table{width: 100%;margin:20px 0}4. Now To Add Social Buttons Below Post Titles Find <div class='post-header-line-1'/> "you will find this <div class='post-header-line-1'/> tag twice or thrice but we need to stop on second one" To Add Social Buttons To Post Footer Find <div class='post-footer'> or if you did not find the above line then look for <div class='post-footer-line post-footer-line-1'>and just below paste the following code.And you can also look for <data:post.body/> tag,and paste the code just below it.
.bloggersstand table td{background: #3d5a99;color: #D8DFEA;padding: 1%; line-height: 50%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
@media screen and (max-width: 980px) {
.bloggersstand table{margin-bottom: 10px}
.bloggersstand table td{float: left;margin-bottom: 10px;width:49%}
.bloggersstand table td+td{float:right}
.bloggersstand table td+td+td{float:left}
.bloggersstand table td+td+td+td{float:right;padding-bottom:3.5px}
.bloggersstand table td+td+td+td+td{text-align:center;width:100%}
}
@media screen and (max-width: 640px) {
.bloggersstand table td{float:none;width:100%;display:block}
.bloggersstand table td+td+td+td+td{text-align:left}
}
<b:if cond='data:blog.pageType == "item"'>Note:In Above code highlighted script is for facebook,if your blogger template already have facebook script then you don't need to add it again,just remove the (orange) part of the above code and paste in your template.
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Code by www.Bloggersstand.com -->
<div class='bloggersstand'>
<table cellspacing='0'><tbody>
<tr>
<td style='background: #3B5998;'>
<div class='fb-share-button' data-layout='button_count'/></td>
<td style='background: #DD4B39;'>
<div class='g-plusone' data-size='medium'>
</div></td>
<td style='background: #2BA9E1;'>
<a class='twitter-share-button' data-via='bloggersstand' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td>
<td style='background:#0077B5'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script>
<script data-counter='right' type='IN/Share'/></td>
<td style='background:#BA1E2D;padding-right:10px'>
<script type='text/javascript'>
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
<div id='pin-wrapper'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:blog.postImageUrl + "&description=" + data:post.title' rel='nofollow'>Pin It</a>
</div></td></tr></tbody></table>
</div>
</b:if>
5.Save your template,Done.
That's it Folks !
We hope this article helped you to learn How To Add Responsive Social Media Share Buttons Below/Footer Blogger Post.If you liked this article please Join us on Facebook,Twitter,Google Plus.