Add Floating Share Bar in WordPress Without Any Plugin

Social Networks play an important role in driving huge traffic to your blogs.Adding an eye catching share bar with floating option can get your readers attention to share it.This Floating Share bar includes three type of social media buttons the first one is Twitter,second is Facebook share and the third one is the newly created social networking site called Google+.Although these sharing buttons are floating so you can also choose to float it left or right of your blog post pages.This widget can only be shown in home pages only.I myself using this widget in my blog so you can see the live demo without navigating to other page.This hack can also be applied on Blogger blogs.I will tell you where to add it in Blogger later but first follow these steps to add it in WordPress.

Adding Share bar in WordPress

Follow all these steps carefully to add share bar in your blog!

1.  Go to your WordPress Admin panel>Log in>Navigate to plugins.
2. Search “Quick AdSense” Plugin.
3. Install it and activate it.
4. Now go to settings and click Quick AdSense.
5. Select “Ads1″ to the beginning of the post and scroll down where you see an empty box with “Ads1″ written beside that.
6. Paste the following code in that empty box.

<style> /*-------MBT Floating Sharing Widget------------*/ #deviltsdiv {   position:fixed; bottom:2%; margin-left:-740px; z-index:10; float:left; padding-bottom:2px; } #deviltssidebar {         background:#fff;         border-top:1px solid #ddd;         border-left:1px solid #ddd;         border-bottom:1px solid #ddd;         border-radius:5px;        -moz-border-radius:5px;        -webkit-border-radius:5px;         padding-left:5px;         width:60px;         margin:0 0 0 5px; } .fb_share_count_top {width:52px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id="deviltsdiv"> <div id="deviltssidebar">     <table cellpadding="1px" cellspacing="0">     <tr>     <td style="padding:5px 0px 0px 0;"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>     </td>     </tr>     <tr>     <td style="padding:5px 0 2px 0;">     <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>     </td>     </tr>     <tr>     <td style=" padding:5px 0px 0px 0px;"> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script> <g:plusone size="Tall" expr:href="data:post.url">     </g:plusone></td>     </tr>     <tr>     <td>     </td>     </tr>     </table> </div> </div>

Save it and the floating share bar will start floating on every of your posts.

We want help From You!

If this post helped you a little kindly share this post with your friends,like us on Facebook and subscribe!