Create Hovering Button in WordPress Blog

It is important to give proper and maximum exposure on something that is crucial for WordPress blog. One of the examples is the RSS subscription button.

This is because without being ‘persuaded’, our WordPress blog’s visitors will probably miss that out or couldn’t find the subscription link.

One of the ways to maximize the exposure of button for RSS or Facebook Fan Page is by creating hovering button at the side of our WordPress blog. Through this method, the button will always be in our visitors view although they scroll down our site page.

Therefore, they can easily hit the button without have to look for it later on plus it will not distract the visitors at all as it is located outside reading area.

If you still does not see the clear picture on how does it work, you can see it in my WordPress classified site – DBS – Classifieds: Find Anything for Everything.

Let me show you how can this be done but first, please back up your theme file first especially if you are still not familiar with code modification as you may accidentally deleted or make unnecessary adjustment to your theme file.

Basic Modifications

– You need to know the basic code behind the hovering button. Below is the code for the red RSS button in Huzzer Magazine.

<div style=”top: 30px; right: 30px; position: fixed;”><a href=””><img style=”border:0;” src=”” alt=”Subscribe to Huzzer Magazine” width=”87″ height=”87″ /></div>

– The basic concept behind this coding:

<div style=”top: 30px; right: 30px; position: fixed;”><a href=” Site URL that you want to link with the button “><img style=”border:0;” src=” URL of the source of your button image ” alt=”Description of your button” width=”87″ height=”87″ /></div>

– After you have modify the above code according to your target link and own button image, you can further modify the hovering button. If your button image are too big to be put at the side of your WordPress blog, you can adjust the size of your image by adjusting the figure of 87 (located at the end of the line) base on the above code.

– To insert your hovering button into your WordPress blog, you have to go to the theme editor section (Appearance > Editor). There are 3 options available for you to insert in the hovering button. You can insert in the hovering button to either main page, single post (content page) or pages such as about page.

– If you want to put it in each of the three sections, you have to open the header.php and paste the modified code at the top of the header.php section and then, hit the Update button.

– If you want to put it on certain section ( for me, I insert in the RSS button just for single post), paste the modified code base on below guidance:

  • Main page – Index.php
  • Single post – Single.php
  • Page – Page.php

Further Modifications.

– The position of the hovering button may not suit your WordPress blog at the moment due to the fact every blog themes have its own size. Therefore, you can adjust the position the hovering button by modifying the 30px figures. Top means the distance from the top of your page while right means the distance from your right side of your page.

– You can also change the position of the hovering button from right to left by modifying the code further. You just need to change the right to left which is located at the beginning of the above code.

– You have to keep modifying your code until it fits and blends into your WordPress blog.

– With the same basic code, you can also replace the hovering button with advertisement banners. It is all depends on your creativity.

That is all the process on creating hovering button in your WordPress blog. Feel free to ask about this tutorial and I would love to see you to showcase what you have done from the help of this tutorial. Share your site URL in the comment section below.

5 Responses to Create Hovering Button in WordPress Blog

  1. It is realy useful way to get more tweets, more followers, and more subscribers. However, I have a suggestion for you: Wouldn’t it be better if you move (I am not sure if you can do that or not) the floating retweet and fShare button to the left, so they won’t stand on top of the text. I think it would look much nicer like that and your readers won’t get distracted.

    Thanks for the nice tip though.

  2. Helmi Asyraf (admin) says:

    What do you mean by moving the buttons to the left? It is because at the moment, the buttons are located on the left.

    Or do you mean the buttons in the classified site?

    By the way, thank you for your suggestions.


  3. ariff says:

    I guess what he meant was to the left, hovering outside of the post area. Great idea because there are still lots of space there.

  4. Kushal Chap says:

    I need your help. How do you change the color of the box?

  5. Mike says:

    the link to see your example no longer works

Leave a Reply

Your email address will not be published. Required fields are marked *