Part 4 Custom Menu Blogger

Now for the final part of the tutorial.

• Once you have as many links as required, place them in a 'div'.

This is shown in the Image highlighted blue. The name can be any thing
other than a reserved html or css word. myMenu will be safe.

• Don't forget to close the div which is the second highlighted bit.
• Now for the style highlighted red.

position: absolute;  tells the browser where to place the menu in the window.
top:50px; tells the browser to drop it down 50 pixels from the top,
this could also be a percentage say 2% or whatever.
left:380px; tells the browser to place the menu 380 pixels
in from the left hand side of the screen. May also be a percentage.
Don't forget to put this all inside curly braces(next to the 'P' on the keyboard.

 

• You are better off making all your code up in notepad then copy and pasting it into a new gadget.

• Use the HTML/ Javascript  gadget by clicking add a gadget in your blogs layout window.
• Save and test.
• The numbers used for top and left may need to be changed to see where it looks best.
• Check in as many browsers as you can. Firefox and Internet Explorer will display it differently.
• Good luck. Post a comment if you need help. There are ways to have it display the same in both browsers however a little more detailed.