Blogging 101: Simple Navigation Bar


Welcome to Week 2 of Tip Junkie’s Blogging 101 series!

This week’s question:

Q: How do you make a simple navigation bar?

A: First let’s take a look at what a navigation bar (often called a menu bar) is and why it’s useful!  A basic navigation bar looks like this:

Having important links in one place is a great way for readers to find what they’re looking for on your blog.  Common links found on navigation bars include “About Me” pages, posts with contact information, or even links to your other blogs.  So let’s get started!

Step 1: Decide what links you want to include on your navigation bar.  Find and copy the links to these locations.  For example, I want to include the following information:

–       Home:

–       About Me:

–       My Portfolio:

Step 2: Copy the following HTML code exactly as it appears here.

<center><b><span style="font-size:18px;"><a href="LINK1 GOES HERE">TITLE1 GOES HERE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="LINK2 GOES HERE">TITLE2 GOES HERE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="LINK3 GOES HERE">TITLE3 GOES HERE</a></span></b></center>

Step 3: Next we need to fill in the different parts of the code.  Let’s start with the first link.  In my case this is my homepage,  I am going to replace the blue words LINK1 GOES HERE with this link.

Step 4: Now that I’ve filled in the first link, I’m going to fill in the title—or what I want the link to say.  In this case, I’m going to fill in the red words where it says TITLE1 GOES HERE with the word Home.  My HTML now looks like this:

<center><b><span style=”font-size:18px;”><a href="">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=”LINK2 GOES HERE">TITLE2 GOES HERE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="LINK3 GOES HERE">TITLE3 GOES HERE</a></span></b></center>

Step 5: Repeat steps 3 and 4 for the rest of the links you want on your navigation bar.  Depending on how many links you want on your navigation bar, we’re now going to have to dig a little deeper into the HTML…

Step 6: The original code I gave you in Step 2 is for 3 links.  However, if you want more links you will need to copy the following code for each additional link that you want to include:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="NEXT LINK GOES HERE">NEXT TITLE GOES HERE</a>

The above code needs to be placed directly after the last </a> you see in the original code.  This is shown in the picture below.

Step 7: After you’ve inserted all of the links and titles you want on your navigation bar, we need to insert it underneath your header.  Go to your dashboard and click “Add a Gadget”.

Select HTML/JavaScript and paste your completed code into the box.  Make sure to leave the gadget title blank as shown in the picture below!

Step 8: Save it to your blog!  Let’s take a look at what the final product looks like…

You’re done!  Make sure to test out your links to see if they take you to the right places.  🙂

Thanks for all of the comments last week!  Do you have a question you want answered?  Leave a comment!

P.S.  If you’re looking for ways to promote your blog, check out 31 Days to a Better Blog over on the SITSgirls Community.


  1. Comment-Anonymous Nicole G.

    AWESOME Thank you so much for the tut. I am creating a photography blog/website and after entering the code it looks beautiful on the mock up…but I can’t get the links to load properly. The site is currently private, could that be the reason?

  2. Comment-Anonymous Amy Hooper

    Hey, have you been reading my mind? This was perfect timing for me! Thanks a bunch. 🙂

  3. Comment-Anonymous Linda @alamodestuff

    I just came upon your blog via a Mister Linky question via google. I’m now a new follower both here and on Twitter.

    Glad to have found you!

  4. Comment-Anonymous Tammy @ Not Just Paper and Glue

    Is this the same thing as “Pages” in blogger?

  5. Comment-Anonymous Crystal & Co

    Thank you so much! I totally needed this… my designer is on vacation and I needed to change something on my navigation bar.

    You rock!

Leave a Reply