How to Add Any Navigation Menu Bar in Blogger

Recently l have shared some CSS dropdown menu bars, but our some readers are unable  to install on blogger. So, today I decide to provide step by step guide that how add a navigation bar in blogger. After reading this post  you will be able to add any menu bar on your blog. Before add a navigation menu in a blog, first you need to understand its structure which is usually contain on CSS and HTML but some time also contain with JavaScript and jQuery. Now we are going to learn how to add these codes one by one in blogger.

How to Add any Navigation Menu in Blogger

Adding CSS to blogger

First copy the CSS code, the menu which you want to add in the your blog and then follow the below steps.
Login your blogger account and select template, then edit html find  ]] ></b:skin> and paste the CSS code just above it.

Adding HTML to blogger.

This depends on you where you want to appear navigation menu in your blog.  People usually put it on the top of the header or bottom of the header. If you want to appear menu in top your blog header, then find </head> if can’t find then search <div class=’content-outer’> and paste the HTML code just below it.
If you interested to appear menu in below of header, then find header tags in paste the HTML code just below it. Click on the save template button.

How to replace a new menu with old one.

Sometimes you don’t satisfy from your blog’s menu bar or you have a single line menu and you want to add a CSS dropdown menu bar. It’s very easy to replace your old menu with new one. First add it CSS codes such as first step and then replace its all HTML code with new menu code and save template.

Adding JavaScript

Some navigation menu also contain on JavaScript coding, to put the JavaScript in your blog search </body> and paste just below.

Adding jQuery in blogger

Some advance navigation bar such as responsive dropdown menu also contain on jQuery file. To add it, find <head> tags and place JQuery file just below it and save template.

You are done

Leave a Reply

Your email address will not be published. Required fields are marked *