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
DemoHTML
Go to Blogger » Template » Backup your Template » and Edit HTMLCopy the following code and paste it before </body>
<b:if cond='data:blog.pageType == "item"'>
<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='"https://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/><br/>Facebook</a></li>
<li class='tw'><a expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/><br/>Twitter</a></li>
<li class='gp'><a expr:href='"https://plus.google.com/u/0/share?url=" + 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='"https://reddit.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Reddit'><i class='fa fa-reddit'/><br/>Reddit</a></li>
<li class='in'><a expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&source=" + 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='"https://del.icio.us/post?url=" + data:post.url + "&title=" + 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>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!
Rate This Article
Thanks for reading: SLIDE IN: Social Sharing Widget for Blogger, Stay tune to get latest Blogging Tips.