Floating Navigation Menu

This is a tutorial on how you can create a floating navigation menu on your website. You can see an example of this type of menu at the bottom right hand corner of this blog. These icons are floating which means, whenever you scroll over the pages of this blog (up or down and left to right), the icons will always stay on place.

Floating navigation menus are useful for both your visitors and you (the admin) especially the Back to Top, Home, Subscribe and Admin icons. Of course, if you feel like you want to add some more icons to these four, you can always do so. As for me, i also added a Blogroll and Recent Comments icons to my floating navigation menu. If you are a member of Twitter, Digg, RedIt, Technorati (etc.), you can also create your icons for them.

Basically, what you need is this HTML code which you can play with. Don't be scared to do a trial and error floating nav. menu. If you create a mistake, you can just always delete or fix it.

{a style="position: fixed; bottom: 5px; right: 10px;" href="page link here" title="title of your icon here">{img src="direct link to image" />{/a>

• First, you have to go to your Dashboard --> Layout --> Add a Gadget and then select HTML/JavaScript.
  
  
• Copy the HTML code above and paste it on your HTML/JavaScript box. Remember to change { to <
  
  
• Decide how many icons you want to put. If you want to place 4 icons, just copy the HTML code and paste it 3 more times on the same HTML/JavaScript box. You can create as many icons as you want. Just make sure that they are useful for your visitors and you.
  
  
• Find a photo you want to display. You can go to Photobucket (and other websites) where you can create personalized icons. You can also find some icons by googling but you need to either download the icon program or purchase the icons yourself. If you don't want to go through all these, feel free to use the icons i've created myself here.
  
  So again, here's our code:
  
  {a style="position: fixed; bottom: 5px; right: 10px;" href="page link here" title="title of your icon here">{img src="direct link to image" />{/a>
  
  If you have already changed { to <, we then need to get our icon's direct link to image. When you already have the icon of your choice, right click the icon (or photo) and click COPY IMAGE LOCATION (not COPY LINK LOCATION). Highlight your HTML code's direct link to image right click your mouse and click PASTE.
  
  
• Change the title of your icon here part of the code. It can either be your Back to Top, Home, Subscribe, Blogroll (etc.).
  
  
• Change page link here to the link where you'll be redirected whenever the icon is clicked.
  
  If it's your Back to Top icon, just replace page URL here to this symbol: #
  
  If it's your Home icon, replace page URL here to your homepage's URL. (http://www.yoursite.com or http://www.yoursite.blogspot.com etc.)
  
  If it's your Subscribe icon, you need to get your Feedburner URL for this one or your RSS Feed URL. If you already have it, you can then replace page URL here with the URL.
  (For example Ovah' Coffee's email subscription URL (provided by Feedburner) is http://feedburner.google.com/fb/a/mailverify?uri=OvahCoffee. So I just change page URL here to this URL and it's done.)
  
  If it's your Blogroll icon, replace page URL here to the exact URL of your blogroll.
  
  And so on....
  
  
• This last step is very important. You need to change the 5px part of the code. Otherwise, the icons will overlap each other.
  
  {a style="position: fixed; bottom: 5px; right: 10px;" href="page link here" title="title of your icon here">{img src="direct link to image" />{/a>
  
  I suggest that you change 5px by 40px starting from the bottom most icon (only if you are using the icons I've provided here. If you want to use your own icons, you have to decide the change of px on your own. No worries! Just do trial and error until you get the spacing that you want.)
  
  For example, if you have 4 icons, the icon on bottom will retain the 5px, the following icon will get 45px, the next one will have 85px and your icon on the very top of your menu will have 125px.
  
  I've created this floating nav. menu as an example:
  
  
  
  
  

  Where I've used this spacing code:
  
  

  
  

  
  So if you want to add more icons, just keep on adding 40px on it. But if you are using other icons other from ones I've provided here, you have to adjust the px on your own. Remember, there's no harm in trial and error so be as creative as possible.

That's it! Hope you find the tutorial easy to follow. See you later everyone!!!