How to Change the Links in Your Navigation Bar

With my templates, the navigation bar doesn't automatically update whenever you add a new page. If you'd like to change the links in your navigation bar, either to add a new page or to take one off and replace it with another, here's how:

*Note: This works for all of my templates except the Reese. For the Reese, the general instructions are the same, but your code will look just slightly different*

Step 1: Login to your Blogger Dashboard.

Step 2: Go to the Layout section of your blog. To get there, select the "More Options" drop down to the right of your blog name and select Layout. It will look like this:

Step 3: Once there you'll see the "skeleton" of your blog layout. You need to find the HTML/Java Script gadget that houses your navigation menu. This is in a different place depending on your blog template. Usually it is just above your "Blog Posts" area or just below your "Header" area. You'll need to edit the HTML in this gadget. You'll know you have the right one if it looks something like this, but without the highlighted colors. It will say "newnavbar" somewhere near the top of the code:

Step 4: Here's what all the colors represent: 
  • The red highlighted area shows the link itself
  • The green highlighted area is the text that shows up in your navigation menu
  • The yellow highlighted area is the entire code for one link. If you need to add a link, copy everything in the yellow section, and paste it directly after the yellow section. Each link should start with a <li> tag and end with it's matching </li> tag
Before you edit anything, copy and paste the entire code into a text editor like Notepad (not Microsoft Word, as that will change your formatting). This way you'll have a back up to put back in there in case you accidentally break something. 

To change where the link is going, edit the red area. To change what shows up in your navigation menu, change the green. To change or add an entire link, edit the yellow section.You MUST be VERY careful not to edit the wrong part of the code or accidentally delete anything like an apostrophe. If you do that, you will break the code and you will have to pay me a small fee to come in and fix it. If you take your time and make sure you do it right, you should be fine!



  1. Why is the code in picture form?
    Can't copy and past text from a JPG.

    1. Copy and paste your HTML/Java script...not hers :)

  2. Thanks for the info! But I have tried following this method but yet am unable to edit both "top and middle navigation" of my blog. Though I just changed my template to Punjab Press v5.0. you can check the blog
    I would appreciate any recommendations on this.
    Thank You!



Facebook Fans

Connect with Us

Search Away

Get Our Button


Subscribe by Email