New Floating Social Sharing Bar Widget for Blogger / Blogspot

N

ew Fixed / Floating Social sharing Horizontal Bar Widget for Blogger. im also use this widget on this blog, you can see the live demo in this page. :) Coming to this widget, it is horizontal social sharing bar widget with counter and is displayed when you scrolling this horizontal social bar is fixed to the top of Post. which will give to readers to share the page immediately by the floating bar. This widget comes with Twitter, Facebook, Google plus buttons.

Live Preview
Scroll down to the bottom of the post and you should see the Floating Social Sharing Bar.

How To Add Floating Social Sharing Bar Widget?First,

• Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
• Select the Template > Click on Edit HTML > Proceed
• Check/Tick the Expand Template Widgets checkbox

Just follow 3 Simple steps,

The JQuery Plugin!

As always, it is jQuery based widget, and your blog must have the 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>

 Adding Marker
End Of Post marker – The social bar comes out when the user scrolls down to a particular point in your Blog.(the bottom of the page by default) To mark this point, you can add an HTML element there. The element should have the id md-active-share-comment-marker

e.g.: <div id='md-active-share-comment-marker'></div> would do the job. The best place to add this marker would be at the end of the post. If you want to do it easily, you can add this to your Blogger Template.

In your template Find,(You will have to expand the Widget Templates)

<data:post.body/>

Immediately below it, add the following snippet. 

<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>

Now when the reader scrolls down to this div, the Social bar will open up.

Adding Social Buttons Widget

Let’s add the final Social horizontal bar widget code.
Add the below snippet code before </body> tag

<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>

Save Template!!!
Save the template and check your blog post pages, a working and awesome jQuery based floating social horizontal bar on your blog.

Hope this widget is helpful to you, Please leave your comments, and share this Widget.