All About: Add Menu Bar To Blogger Blog

I was able to add a nice multilevel dropdown menu to my blog. In this post I’m going to discuss how you also can add it to your blogger blog. Here I’m using pure CSS multilevel menu generated by Free CSS Drop Down Menu Generator.

You can’t use the code directly in blogger without some modifications; I’ll describe how you can edit the code to use it in blogger to get a menu bar like above picture (Figure 1).

Create the Menu

First get the following code and save it as .html file. Then edit the styles and links as you want. If you like this style, you only need add links for menus and sub menus.

Note : If you use the above mentioned Menu Generator in the HTML code you must replace "<![if gt IE 6]></a><![endif]>" using "</a>", otherwise it will not work in the Blogger.

Add Menu to Blog

1. Now you have to edit the HTML in your blogger template. To do that first go to "Edit HTML" (Figure 2). (Before editing your template, download the full template)

Find "b:section class='header'" and set the value of "maxwidgets" to 3, if it is less than it (Figure 2). Set "showaddelement" to "true",

2. Then Find the </head> tag in your template and paste the styles just before that tag. Make sure you should include <style type="text/css"> and </style> tags.

3. Now you can add new "HTML/JavaScript" Gadget to your blogger header and paste the code between <body> and </body> from the .html file you created using my code given in the top of this post (Figure 3). There do not give a Title for the Gadget.