Add Responsive Social Media Share Buttons Below/Footer Blogger Post

0
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>
<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)?&#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'>
(function(d){
    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);
}(document));
</script>
<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>
</div></td></tr></tbody></table>
</div>
</b:if>
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.
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.
Do you have a responsive blogger template? If you are using the responsive blogger template then...
SUMMARY

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.

You Might Also Like:

We hope this article helped you to learn Add Responsive Social Media Share Buttons Below/Footer Blogger Post. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Responsive Social Media Share Buttons Below/Footer Blogger Post" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand