How to Add a Drop Down Menu Navigation Bar

Some of my friends and other bloggers were asking me How do I create drop down Menu Navigation bar. Menu bar really helps as it is the easiest way to Categories contents of your Blog posts. 

Adding Drop Down Navigation is very easy in blogger. but explaining how to do this to non-coders is really difficult. And there is know other option available in Blogger you have to edit your template. 

I found a great site that will make it more easier. 

But still you have to edit your html and CSS template. 

Ok lets start:

First head on to CSS menumaker and create your nevigation menu! there are so many styles are available pick any one of the pre made styles and click on "Customize". Then you can add your links to the menu, drag them change the titles, insert the URLs. For each menu you have to do this copy & paste the URLs from your site. 

Once You are done click on "Download" button!

After downloading you should have .zip file in your computer. Unzip it so that you have access to the files inside. You can use WinZip to Unzip files. There should be a folder called "menu.assets" and a file called "style.css". Open Up that file using some kind of editor. (Notepad++ Or Sublime Text). Now just copy the code and put it in your blog. But wait, leave it open in the text editor, and open up your Blogger. 

You have to click on the tab to go to  "Template". You should  remember that before doing anything in your template always make backup of your blogger template. Since We're editing the code it's really important that you back it up beforehand in case you make any mistakes and need to revert them. So in the top right corner, click on "Backup/Restore", and then click the button to download full template.

Once you have your template backed up click on "edit html" And look for the bit of code that look like this:

(Serach for <b:skin> in your template, use Ctrl+F to search)

Click on the text <b:skin>.....</b:skin> to expand it. Then scroll all the way down until you find the </b:skin>  tag again.

Make a new line Before the </b:skin> line. This is where you put your new code! So just go back to your text editor with the style.css document and copy everything, then paste it in your template and click on save template. Make sure than nothing is broken. Nothing should look new after adding the code, so make sure everything is working as expected. :D

Next, we have to add the html code. Go back to the files you downloded from CSS menu Maker. There should be a file called readme.html double click that file and open it. Ignore all instructions except #3. 

3. Copy and paste the html below where ever you want your menu to show up.

Copy all the codes below that line. This is your html code. 

Now, The question is: where do we put the html? It depends on your template. As different templates contains html in different formats. Even if you have a custom made template, the HTML may vary. So, this is so hard to explain because it seriously depends on where You want your navigation(above or below the header) and what template you're using.

If you are using a custom made template, a good place is to put it right below this line.

 <div class='content-outer'>  

Right below that, enter the dropdown HTML text. 

If you want it to be below your header? Here is a good place.

 </header>  
 <!--menu HTML TEXT goes right here-->  
 <div class='tabs-outer'>  

Paste the html where I'hv written menu HTML TEXT goes right here. In between the closing </header> tag and <div class='tabs-out'> tag.

That's all!!! 

Stay Connected Stay Updated!!