20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Add Responsive Social Media Share Buttons Below/Footer Blogger Post

How to Add Responsive Social Media Share Buttons Below/Footer Blogger Post,100% responsive mobile desktop tablet view social media sharing buttons with with Counter like Facebook, Google+, Twitter, LinkedIn and Pinterest to Blogger Posts Below/Above to Post Content. post titles below and you can also add in post footer,social media sharing widget.
How to Add Responsive Social Media Share Buttons Below/Footer Blogger Post
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}
.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}
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.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.4&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

<!-- Code by www.Bloggersstand.com -->
<div class='bloggersstand'>
<table cellspacing='0'><tbody>
<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'>
<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)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</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'>
    var f = d.getElementsByTagName(&#39;SCRIPT&#39;)[0], p = d.createElement(&#39;SCRIPT&#39;);
    p.type = &#39;text/javascript&#39;;
    p.async = true;
    p.src = &#39;//assets.pinterest.com/js/pinit.js&#39;;
    f.parentNode.insertBefore(p, f);
<div id='pin-wrapper'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' rel='nofollow'>Pin It</a>
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.

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.

Post a Comment