Floating Social Share Bar for WordPress Blog

If you would like to add a floating social media share icons bar to your wordpress blog then this post will help you out. I have also written a post on how to add floating share bar to your blogger blog.

Click here to see How to add floating share bar to your Blogspot Blog

I have added a floating share bar to my blog, that is on codefap. Its live on my blog while i write this post. But i hope that i haven’t removed it while you are reading this post. If its live, you can see it on the left hand side of my blog.

To add this floating share bar to your posts, you have to edit the single.php file of your wordpress theme. You can access this file by following these steps:

  1. Go to admin dashboard
  2. Click Appearance > Editor > Single Post
  3. Find : <div class=”entry”>
  4. And just below it, paste the code given below.

Save your file, by clicking ‘update’ button at the bottom of the page. And you are done.

Now go and visit any of your ‘post’, and the floating bar will appear on the left hand side of your posts.

How to change position of the Floating Bar ?

To change the position, you will need to edit this part of the code:

If you want to position it properly with respect to your page, then you will need to change the property named margin-leftCurrently it is margin-left: -95px; You can change the value and experiment it on your blog to get your desired result.

If you want to position it to right hand side. Then just change float:left to float: right. And margin-left to margin-right. These are all the CSS rules which define your web page. To be specific, just the floating bar in this case.

So when you change values and experiment with the code given above, you will learn a lot more than just adding a widget. By experimenting you are not just learning how to add a widget, But you are also indirectly learning CSS.

If you have any doubts or questions, feel free to comment below.

Leave a Reply