How to Add Wordpress Style Floating Social Sharing Bar Widget For Blogger

When I browsing into the internet i found this one of my favorite Fixed / Floating Social sharing Horizontal Bar Widget for Blogger. Sharing the articles on web and with friends of social networks like Facebook, Google plus,Etc. . have became one of the biggest activity on web. If So, why not take an advantage of it and let your blog visitors to share your blog content on web and with their friends. Isn't it one of the best way to promote your blog on social networks without any risk!. As the whole world is lazy, making your blog visitors feel like sharing your content deals with providing them with a way in which they can share your blog with a single click. Am i right !:). So today i am giving you fixed / floating social sharing horizontal bar widget for blogger. I'm using this widget, scroll down so that you can view the live demo.Future to this widget, it is crosswise party distribution bar widget with furniture and is displayed when you scrolling this horizontal mixer bar is specified to the top of Communication. which gift lot to readers to assets the page straightaway by the floating bar. This hack is done by NIHIN MAHETA of Making Different blog. All credits goes to Making Different. This awesome trick done using some jquery script.

Add JQuery Plugin!

• If your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step. If not add the below snippet code before </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

• Sign in to the Blogger Account
• Select Template and click Edit HTML (Click on Proceed)
• Find <data:post.body/> (Find using ctrl + F)
• Immediately below it, add the following snippet. .
• Click on Save

<b:if cond='data:blog.pageType == "item"'>

<div id='md-active-share-comment-marker'></div>

</b:if>

• Find </body> (Find using ctrl + F)
• Add the below snippet code before </body> tag.
• Click on Save

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://makingdifferent.github.com/blogger-widgets/Floating%20Social%20sharing%20Horizontal%20Bar.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#appId=155934781145405&amp;xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>          
<div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'>
Are you Awesome? Legend has it that Awesome people can and will share this post!<br/>
<span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>

• Now save your template and you have done !!
• If you have any doubts don't hesitate to ask.Please Comment.
• Now If  You Enjoy This Post! Please Take 5 Seconds To Share It.

Share it Please

Tweet