SLIDE IN: Social Sharing Widget for Blogger

Introduction

Good day bloggers! Are you looking for a sleek and stylish way to show your social sharing widget or in a more fashionable way? Look no more for I have made it with simple Jquery on a flat and stylish look. This social sharing widget is not as ordinary as other sharer, because it slides in right after your viewers or readers finished your article! Yes, it will allow your user to share your content on social networks whenever they finish reading. Want it? Just follow these simple steps to get it working in your blog right now!

External Scripts

Jquery Library vX.X.X or higher ?

Live Demo

Demo

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
 Copy the following code and paste it before </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mba-social-sharing'>
<div class='closethis'><i class='fa fa-times'/></div>
<h1>Share this page.</h1>
<p>If you liked this post share it with your friends!</p>
<ul>
<li class='fb'><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/><br/>Facebook</a></li>
<li class='tw'><a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/><br/>Twitter</a></li>
<li class='gp'><a expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus'/><br/>Google Plus</a></li>
<li class='re'><a expr:href='&quot;https://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Reddit'><i class='fa fa-reddit'/><br/>Reddit</a></li>
<li class='in'><a expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' id='linkedin' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'/><br/>Linkedin</a></li>
<li class='st'><a expr:href='&quot;https://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Delicious'><i class='fa fa-delicious'/><br/>Delicious</a></li> 
</ul></div></b:if>

CSS

Search for ]]></b:skin> then add this css code before it

#mba-social-sharing ul{display:block;position:relative;line-height:2em!important}#mba-social-sharing{z-index:9999999999;transition:all .2s;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s;position:fixed;bottom:-240px;right:-400px;width:400px;height:240px;display:block;background:#fff;border:1px solid #eaeaea;padding:10px 15px;font-size:12px;color:#666}#mba-social-sharing h1{font-size:22px;font-weight:400;line-height:18px;padding:0!important;margin:5px 0 0 5px!important}#mba-social-sharing p{margin:0 0 0 5px!important}#mba-social-sharing ul li{float:left;display:inline-block;margin:5px}#mba-social-sharing ul li a{font-size:12px;color:#fff;width:111.6px;padding:10px 0 5px;text-align:center;display:block;border-radius:3px}#mba-social-sharing ul li a:hover{text-decoration:none;opacity:.9}#mba-social-sharing ul li a i{font-size:16px;padding:10px;border-radius:100%;background:rgba(0,0,0,.1)}#mba-social-sharing ul li.fb a i{padding:10px 14px}#mba-social-sharing ul li.fb a{background:#38559b}#mba-social-sharing ul li.tw a{background:#00aaf2}#mba-social-sharing ul li.gp a{background:#d74628}#mba-social-sharing ul li.re a{background:#f04a24}#mba-social-sharing ul li.in a{background:#12689b}#mba-social-sharing ul li.st a{background:#f04f23}.come-in{transform:translate(-400px,-240px);-moz-transform:translate(-400px,-240px);-webkit-transform:translate(-400px,-240px);-o-transform:translate(-400px,-240px)}.come-back{transform:translate(0,0);-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0)}.closethis{position:absolute;right:10px;top:0;cursor:pointer}

JScript

 Find (ctrl+f) </body>
 Copy the following code and paste it before </body>

<b:if cond='data:blog.pageType == "item"'><script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(o){var a=o(".post-footer").offset().top
setInterval(function(){o(window).scrollTop()>=a&&o("#mba-social-sharing").addClass("come-in")},0)
o(".closethis").click(function(){o("#mba-social-sharing").addClass("come-back")})})//]]>
</script><b:if>

 Save your Template

Final Words

Simply SLIDE & SHARE! Happy Blogging everyone!

Let me know in the comment section below if you're facing any problems installing this widget. Enjoy blogging!