Smart Social Share widget for Blogger Template

How to add a Smart Sleek Social Share widget Below Blog Post Title and at the end of your Blog Post?

social share widget

There is no doubt that social sharing widget can boost up content promotion around the web. While readers feel interest or like your article or tutorial then they tend to be share on their social media profile. As a result it helps to spread your content URL firmly. Many Blogger do this mistake that they don’t add social sharing widget on their site. Or they add social sharing widget in wrong place.
There are 2 most productive spaces where social sharing widget can be effective to triple your content sharing by your Blog readers.
  • Below Blog Post Title
  • End of the Blog Post
Most of the readers tend to click on those spaces. So by placing social media share widget you increasing your content sharing chances. But for this you need a Smart and simple social sharing widget which looks professional and fast loading.

Live Demo

In this tutorial I am sharing with you a smart sleek social sharing widget which will help your Blog readers to share your content smart way.

In this widget only JavaScript has used and this is very fast to load. The widget is looks like Add this widget but this is completely different. I have included Facebook, Twitter, Google Plus, Digg, Linkedin, Stumbleupon, Delicious, Tumblr, BufferApp, Pocket, Evernote and Pinterest. And for the hidden option only 3 sharing option is visible and rest of them remains hidden. After click on share more button more sharing option will be visible.

social sharing widget

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Locate <head> and copy the below Font Awesome script and paste it below <head>
<link href='//' rel='stylesheet'/>

Step 4 Now Find this ]]></b:skin>  by pressing 

Step 5 Paste the below script Before/above ]]></b:skin> 

/* Smart Share widget by */
.sharewrap{display:block;text-align:center;margin:30px 0 0 0}
.sharewrap,.sharewrap a.fb,.sharewrap,.sharewrap,.sharewrap{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 {background:#222222;}
.sharewrap {background:#f20000;}
.sharewrap a.fb {background:#516ca4;}
.sharewrap {background:#00baff;}
.sharewrap {background:#ff6600;}
.sharewrap a.fb:hover,.sharewrap,.sharewrap,.sharewrap{color:#fff;opacity:.9}
.sharewrap a.fb:active,.sharewrap,.sharewrap,.sharewrap{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}{color:green;cursor:pointer}
.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 6 Now again Find this code <data:post.body/> or <div class='post-footer'>  by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 7 Paste the below code below/after <data:post.body/> or <div class='post-footer'> and for placing the widget below Blog post title then paste the script above/after <data:post.body/> 

<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'>
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="' + siteurl + '" target="_blank" title="Share to Google+">\
    <i class="fa fa-google-plus googlebutback"></i> Google</a> \
<a class="fb social-popup" href="' + siteurl + '" target="_blank" title="Share to Facebook">\
    <i class="fa fa-facebook fbbutback"></i> Facebook</a> \
<a class="tw social-popup" href="'+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="//' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
    <li><a class="social-popup" href="//;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
    <li><a class="social-popup" href="//' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
    <li><a class="social-popup" href="//' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \
    <li><a class="social-popup" href="' + 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="'+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \
    <li><a class="social-popup" href="' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
    <li><a class="social-popup" href="' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
    </ul> \
</div><div class="clear"></div></div> \
function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src",""+99999999*Math.random()),document.body.appendChild(t)};
<div class='clear'/>

Step 8 Now hit the Save template button.

Now check your any Blog post and see smart social sharing widget displaying on your posts. This widget only display in your post page because I have used conditional tag. But my recommendation is to add this widget at the end of the Blog post. Because if you have placed advertisement below of your Post title then your Blog visitors may not like it.

Let me know how is going on your new smart social sharing widget after adding it on your Blogger template. 
Smart Social Share widget for Blogger Template
4 Stars stars - "Smart Social Share widget for Blogger Template" There is no doubt that social sharing widget can boost up content promotion around the web. Whi...

Post a Comment

ভাই,আমার টেমপ্লেটে তো আগে একটা শেয়ারিং অপশন আছে সেটা রিপ্লেস করবো কিভাবে?

Please find below code block and delete them..

/* CSS Share Button */
#button-share h2{font-size:22px;line-height:40px;margin:0;text-transform:uppercase;display:inline}
#button-share h2 span{background:#2c3e50}
#button-share a{position:relative;font:normal 13px 'Oswald',sans-serif;color:#fff;text-transform:uppercase;padding:10px;box-shadow:1px 1px 1px #222}
#button-share a:hover{background:#222}#button-share a:hover span{color:#222}
#button-share a span{line-height:40px;width:40px;padding:10px 0px;top:0;}
#button-share a span.fb{background:#436FC9;padding:10px;margin-left:-10px;}.fb{background:#3967C6}
#button-share a{background:#40BEF4;padding:10px;margin-left:-10px;}.tw{background:#26B5F2}
#button-share a{background:#EC5F4A;padding:10px;margin-left:-10px;}.gp{background:#E94D36}
#button-share a{background:#DB232B;padding:10px;margin-left:-10px;}.pin{background:#CB2027;}
#button-share a span.lindn{background:#0976b4;padding:10px;margin-left:-10px;}.lindn{background:#087EC1}
#button-share a span.stumble{background:#F54E27;padding:10px;margin-left:-10px;}.stumble{background:#EB4924}


<div id="button-share">

after that save the template

vai, apnar dekhano system a previous code remove kore new sharing option add korar sob code add kore save template dilam. ekhon to powered by blogger abar show kortece, contact menu hide kora abar show kore, and sharing option aseni, aro onek problem hoye gece.ekhon ki korte pari?

Apni mone hoy onno code delete kore felcen.. Template er backup file thakle abar install kore nen.

Sir i have a question related to sitelink.I know that Google generate sitelink automatically.Sir my question is how i can show a page as a sitelink like your html editor is.I know is is not post it is a page.So what i should do for show my page as a sitelink.

Dear Wan...Users don't have any control on sitelink. Google automatically generate sitelink. Even I have demoted some of my Blog pages from Google webmaster tool but still those page URLs are appearing on search engine as sitelink.

Vai apnar kotha moto sob kore dekheci, amar duita site a try koreci but konotatei hoy na, apnake jodi template ti send kore pathai tahole ki edit kore ager share option bad diye new ta add kore dite parben?

ok send koren.. add kore dibo.

vai pathiye diyeci

your template has updated and sent through email. please check your email. Thank you.


vai, template upload hosce na! ei lekha ase- We were unable to save your template.

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message:
Content is not allowed in prolog. what can I do now?

Please open the template file with notepad and copy the code and paste it in HTML Editor directly. It will work. ^_^

It worked! Thank you for taking the time to me.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *