Clever Social Media Sharing Buttons In Blogger Post Footer

0
Adding a Clever Social Media Sharing Widget in Blogger Post Footer
Hello Folks,Today in this article we are going to explain you How to add Smart Social Media Sharing Widget In Blogger Post Footer.There may be no question that social sharing widget can accelerate content promotion around the internet. at the same time readers like your article or tutorial then they have a tendency to be share on their social media profile. As a result it enables to unfold your content URL firmly.Many Blogger do that mistake that they don't add social sharing widget on their web page Or sometimes they add social sharing widget in incorrect location.In this widget we are using pure java script and also a use of font awesome icons.we have added 12 social media sharing buttons but from them top 3 will display on the page i.e Google +,Twitter and Facebook and rest our in share more button.To grab this social profile sharing buttons follow the steps mentioned below.

How To Add Clever Social Media Share Buttons In Blogger Post Footer

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for <head> by Pressing Ctrl+F keys.
Step 4.Copy the below code and paste it just below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 5. Now Search for ]]></b:skin> by Pressing Ctrl+F keys.
Step 6.Copy the below code and paste it just before the ]]></b:skin> tag.
/* Clever Social Share widget by http://www.bloggersstand.com */
.smartshare,.sharewrap{position:relative;display:block;font-size:0;margin:auto;text-align:center}
.sharewrap{display:block;text-align:center;margin:30px 0 0 0}
.sharewrap a.sb,.sharewrap a.fb,.sharewrap a.gp,.sharewrap a.tw,.sharewrap span.pl{text-decoration:none!important;display:inline-block;margin:0 .5px;font-weight:400;font-size:12px;color:#fff;text-shadow:none;padding:6px 10px;opacity:1;transition:all .3s}
.sharewrap a.sb {background:#222222;}
.sharewrap a.gp {background:#f20000;}
.sharewrap a.fb {background:#516ca4;}
.sharewrap a.tw {background:#00baff;}
.sharewrap span.pl {background:#ff6600;}
.fbbutback,.googlebutback,.plusbutback,.twbutback{font-size:13px!important;vertical-align:middle}
.sharewrap a.fb:hover,.sharewrap a.gp:hover,.sharewrap a.tw:hover,.sharewrap span.pl:hover{color:#fff;opacity:.9}
.sharewrap a.fb:active,.sharewrap a.gp:active,.sharewrap a.tw:active,.sharewrap span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
span.pl{color:green;cursor:pointer}
#sharepop{display:none}
.sharepopup{position:absolute;bottom:100%;right:15%;z-index:99;float:left;min-width:100px;padding:5px 10px;margin:0;font-size:13px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ddd;border-radius:3px;}
.sharepopup li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}
.sharepopup li a{color:#333!important;font-weight:400;display:block}
.sharepopup li a:hover{color:#078FF8!important}
ul#sharepop{margin:10px 0;padding:5px 15px}
Step 7. Now Search for <data:post.body/> by Pressing Ctrl+F keys and if you are not able to find this code search for <div class='post-footer'>
Step 8.Copy the below code and paste it just after the <data:post.body/> tag.
Step 9. Now if you want to show sharing buttons below the post title then paste the below code just above <data:post.body/> tag.(*Step 9 only for sharing buttons below post titles)
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="sharewrap"><div class="smartshare"> \
<a class="sb" <h2>Sharing is Caring </h2><i class="fa fa-share-square-o"></i></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 googlebutback"></i> Google</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 fbbutback"></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 twbutback"></i> Twitter</a> \
    <span class="pl" data-target="#sharepop"><i class="fa fa-share-alt plusbutback"></i> Share More</span> \
<ul class="sharepopup" id="sharepop"> \
    <li><a class="social-popup" href="javascript:pinIt();">Pinterest</a></li> \
    <li><a class="social-popup" href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
    <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
    <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
    <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \
    <li><a class="social-popup" href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \
    <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \
    <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
    <li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
    </ul> \
</div><div class="clear"></div></div> \
');
$(document).ready(function(){$(".pl").click(function(){$("#sharepop").slideToggle("fast")})});
function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};
//]]>
</script>
<div class='clear'/>
            </b:if>    
      </b:if></b:if>
Step 10. Now Save your Template..Done !

We hope this article helped you to learn How to Add Clever Social Media Sharing Widget In Blogger Post Footer.If you liked this article please Join us on Facebook,Twitter,Google Plus.
Clever smartest responsive social media sharing buttons for blogger post footer and also the below post titles,learn the trick to add sharing buttons widget gadget after post titles or above post footer near adsense ads trick.
Hello Folks,Today in this article we are going to explain you How to add Smart Social Media Shar...
SUMMARY

Clever smartest responsive social media sharing buttons for blogger post footer and also the below post titles,learn the trick to add sharing buttons widget gadget after post titles or above post footer near adsense ads trick.

You Might Also Like:

We hope this article helped you to learn Clever Social Media Sharing Buttons In Blogger Post Footer. 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 "Clever Social Media Sharing Buttons In Blogger Post Footer" 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