Add a Unique Wordpress Style Floating Social Sharing Bar Widget

Wordpress Style Widgets are very important for blogger be'coz it's always gives the unique look and feel to your website that's why we also embed one awesome wordpress plugin, which is known as Floating Social Sharing Bar, it's simply when you scroll down your page then you can see this widget and also you can change the color according yourself and according to your theme color. It's simply made by the CSS and JavaScript and flexible codes, so it will not be problem to install it in your blog.

Live Demo

Add Wordpress Style Widget

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below.

</head>

• Paste below code before </head>

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

Note: If Your Template Already Installed Above jQuery Code then Skip First Step

• Press Ctrl + F and search the code shown below.

 <data:post.body/>

• Paste below code just after it.

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

•  Press again Ctrl + F and search the code shown below. 

</body>

•  Paste below code just before </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://dl.dropboxusercontent.com/u/63968842/Floating%20Social%20sharing%20Horizontal%20Bar%28www.widgetgenerators.blogspot.com%29.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 Finally Save your template.

If Any Problem Comes, Ask in Comments