Easiest way to add responsive share buttons to your blog

    Welcome back to a new Blogger add-ons topic.
Today I will show you how to add responsive share buttons for social networking sites and WhatsApp.

READ ALSO :  How to optimize blogger template for mobile

 
As you can see, the add-on is very simple and responsive to all devices. It is also easy to install.
First, open your Template editor and add this css style before the head tag

<style>
/* Share Button */
.bottomshare{display:block;padding:0 20px;margin:auto;text-align:center;    width: 100%;}
.sharede,.sharesimp{position:relative;    width: 100%;}
.sharesimp{margin:20px auto 0 auto;}
.sharesimp a.fb,.sharesimp a.gp,.sharesimp a.tw,.sharesimp a.wa{position:relative;display:inline-block;margin:auto;color:#fff;text-shadow:none;padding:8px 0;width:24%;font-size:14px;font-weight:700;overflow:hidden;text-transform:uppercase;transition:all .3s}
.sharesimp a.gp {background:#f20000;}
.sharesimp a.fb {background:#516ca4;}
.sharesimp a.wa {background:#25D366;}
.sharesimp a.tw {background:#00baff;}
.fbtea,.gotea,.plustea,.twtea{vertical-align:middle;margin-left:5px;transition:all .3s}
.sharesimp a.fb:hover,.sharesimp a.gp:hover,.sharesimp a.tw:hover,.sharesimp a.wa:hover{color:#fff;opacity:.9}
.sharesimp a.fb:active,.sharesimp a.gp:active,.sharesimp a.tw:active,.sharesimp a.wa:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
</style>

Now add this code in wherever you want it to appear, for example if you want it to appear at the end of post, add it after the blog-post tag

<span class='bottomshare'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="sharesimp"><div class="sharede"> \
<a class="wa social-popup" href="https://api.whatsapp.com/send?l=ar&amp;text=' + siteurl + '" target="_blank" title="Share on Whatsapp">\
    <i class="fa fa-whatsapp"></i> Whatsapp</a> \
<a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <i class="fa fa-facebook fbtea"></i> Facebook</a> \
<a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
    <i class="fa fa-twitter twtea"></i> Twitter </a> \
<a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
    <i class="fa fa-google-plus gotea"></i> Google</a> \
</div><div class="clear"></div></div> \
');
//]]>
</script>
<div class='clear'/>
</span>

And that is that.