Floating Navigation Menu

by - Thursday, April 23, 2009

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 --> Design --> Add a Gadget and then select HTML/JavaScript.

  • Copy the HTML code above and paste it on your HTML/JavaScript box.

  • Decide how many icons you want to put. If you want to place 4 icons, just copy the HTML code and paste it 4 times on the same HTML/JavaScript box. You can create as many icons as you want.

  • Find a photo you want to display. You can go to Photobucket (and other websites) where you can create and personalize the 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 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>
    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 LOCATIONtakbole). Replace direct link to image of the given code with the link of your icon/image.

  • 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 your readers will be redirected whenever the icon is clicked.

    If it's your Back to Top icon, just replace page URL here to this symbol: # [only the # sign. If you change this to anything else, your Back To Top button will never work]

    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. No worries! Just do trial and error until you get the spacing that you want.

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 adjusting the px until you are satisfied with what you see. 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!!!minumbabai

Share
Tweet
Pin
Share
Tags :

You May Also Like

6 comments

  1. Bill23 April 2009 at 18:07

    Wow this is great Maxie where did you learn all this from. You are very very talented. I am going to try and use this on my site. Thanks ;) :)

    ReplyDelete
  2. maxiVelasco23 April 2009 at 21:35

    as I've said, everything's just about trial and error. i guess it took me four hours to figure out everything. hehe. but it seems to be working really great. and it's really a great navigator for me. very useful.

    hope find the tutorial easy bill when you try applying this to your blog. see you around! :-D

    ReplyDelete
  3. Lynn25 April 2009 at 09:01

    thank u for sharing, sis. i find your floating navigation menu cute talaga. maybe i'll try this soon. ;)

    anyways, got something for u...
    http://tweetartz.blogspot.com/2009/04/blog-award.html

    ReplyDelete
  4. maxi25 April 2009 at 19:54

    thank you Lynn for appreciating. oo nga. cute ng floating nav ko. hehe. kaya mong gawin yan on your own... ikaw pa?

    thanks. i will be visiting your blog soon. dito pa kasi ako sa house ng parents ng brother ko celebrating my boyfriend and i's third anniversary... ;) see yah later!

    ReplyDelete
  5. wendyinkk.blogspot.com28 December 2009 at 14:05

    Thanks for the info :)
    Great explanation

    ReplyDelete
  6. MaxiVelasco2 October 2010 at 00:34

    Welcome.  Glad you find the tutorial great. 

    ReplyDelete

Thank you for dropping by and sharing some love! You're lovely!

Maxi
Ovah Coffee
Homeaholic
Travels and Wish Lists