Floating social media bar at bottom for blogger

Here is New floating social media bar which floats at bottom with various social share buttons of different social networks and also with facebook like button, tweet, google+ and stumble button.

While working on social widgets and on blogger widgets previously I have created and shared with you subscribe box with morphing effect, animated radial menu and some others. But in this post I have created a new floating social media bar which floats at bottom. 

I have also implement that widget on my own blog pakmax.net. Well guys, first I have created this widget for only my blog because I notice that it may prove beneficial if I provide an social options to the visitors at the bottom which floats along with the visitors and when they scroll down. So, for this I have created a floating social bar and implement on my blog 

First I have no plan to publish it but then I changed my mind and plan to share this widget with you guys. 

Reason is that when I see that with this social bar widget my social signals are improving then I plan that I also share it with you so you also get benefit from it.

Add it to blogger

1. Go to Blogger dashboard >> Template
2. Backup your template
3. click on EditHTML
4. Now search for the ]]></b:skin> tag
5. above the ]]></b:skin> tag paste the following code:

#pmbottom
{
position:fixed;
bottom:0px;
}
#barcredits
{
text-align:right;
font-size:12px;
}

• Now, again search for <data:post.body/> and just above it paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pmbottom'>
<div style='background:#ecf0f1; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC; height:30px;'> <table border='0'> <tr>
<td><!-- Twitter -->
<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>
<td><!--Facebook-->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>
<td><!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;PakMax.net&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>
  <!-- AddThis Button END --></td> <td><div id='barcredits'><a href ='http://www.pakmax.net/'>PakMax</a></div></td></tr> </table></div></div>
</b:if>

Further Customizations 

After doing above steps now its time to do some little customization in the code so that the widget can easily interegate with your template.

• This widget only appears on your posts not on homepage. To also make it appear on home page simply remove the Yellow colour bold code at top and bottom.
• To change the background colour of the widget according to your one simply replace the #ecf0f1 , with your colour.
• Don't forget to change the PakMax.net  with your blog's Name.

Voila! You have successfully installed the new floating social bar.

Credits

If you want to share this widget with your own readers then you are welcome but you have to give proper credits to PakMax blog by attaching a link back to this post. And also Don't remove the credit link from the widget. WE HAVE ALL RIGHTS STRICTLY RESERVED.

Recommended Posts:

1. New Box Subscription with morphing button effect
2. Subcribe Box with Pure CSS Social Buttons
3. 14 css scrollbar styles for blogger
4. 11 Excellent CSS image hover effects for blogs

Final Words

Well guys, this the method to install the floating social bar in your site. I surely say that this widget will help you to improve your social signals. If you have any problem in installing the widget or found any bug then must inform us we should solve it as early as possible.

If you like this widget then also share it with your friends and followers on your social media profiles, and hope that this widget will add a new life to your blog. :)