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: http://kreatedbykelsey.blogspot.com

–       About Me: http://kreatedbykelsey.blogspot.com/p/about-me.html

–       My Portfolio: http://kreatedbykelsey.blogspot.com/p/portfolio.html

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, http://kreatedbykelsey.blogspot.com.  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="http://kreatedbykelsey.blogspot.com">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.