Add Transparent Floating Horizontal Social Bookmarking Widget In Blogger 2013

Add Transparent Floating Horizontal Social Bookmarking Widget In Blogger 2013

Fixed Floating on Blogger Top Widget 

 
Another widget for blogger which I am also using in my blog then its come in mind why not I should Sharing this beautiful widget with all my visitors. I don’t have to show you demo of this widget to somewhere other website because you can see it in here my blog by scrolling down this page. Before I have shared such very useful widgets for blogs . This time what I am going to share it is Social Media Sharing Widget floating on the Top of blog when you scroll down page then it will appear on the top. I have attached above a live image of this Widget. Hope you all will like my this post.

How to Add Transparent Floating Horizontal Social Bookmarking Widget 

Go to Blogger Dashboard >> Template Tab >> Edit HTML >> Expand Widget by Click on Format Template.

Before any amendment or editing in template you must backup your template.

If you don’t have installed JQuery Plugin in your blog then follow this step otherwise leave this step in you have already JQuery installed.
Copy this script and past it before </head> tag

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

Next step is find this code

 <data:post.body/>

May be you find this code more than 1 time so you have to try it in all. Now paste the following code below the <data:post.body/>

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

Now we have to add widget mean last step for the installation of this widget.

Copy below code and paste before the </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>

You have all done now Save you template, and check any post of your blog.