Home / Crafts & DIY / Blogging 101: Simple Navigation Bar

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.

27 comments

  1. 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!

  2. Tammy @ Not Just Paper and Glue

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

  3. 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. Amy Hooper

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

  5. 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?

  6. ColleenwithMurals&More

    Perfect timing! Thanks so much. I did this once, then redesigned blog & need to do it again.
    Do you know how to use decorative buttons? Like if I made them in Photoshop?

  7. Carol

    Do you have to create separate pages somehow for each of the links?(Home, About Me, etc.) That would be another tutorial I’d need…

  8. Fun On A Dime Lady

    Great! Thank you for the help. I just have one question? How do you choose the font/look of your Menu Bar? Like, if I wanted it bolder/different color/fancier font or even just different than the basic.

  9. Kelsey @ Kreated By Kelsey

    Since a couple of you asked questions like this, I’ll try to do a tutorial that gives you more options in the next couple of weeks!

  10. Kelsey @ Kreated By Kelsey

    Since a couple of you asked questions like this, I’ll try to do a tutorial that gives you more options–like using images–in the next couple of weeks!

  11. Kelsey @ Kreated By Kelsey

    Not necessarily pages, but they all have to have a separate link. I will add blogger pages to my list of possible tutorials for the coming weeks!

  12. Miss Muffin

    Sorry, this might be a stupid question – but where do I get the links from that I need for the menu bar? Like if I want to link to an “About me” page – where can I actually write down that page (if I do not want to do it as a blog post)? Sorry, if that is totally obvious for the rest …

  13. Deb Aleksic

    Hi Kelsey – My name is Deb – I’m from Melbourne, Australia. I am trying to set up a blog for my decorating business – but I am a complete novice! I have followed your tutorial about setting up a navigation bar and linking pages to it. The navigation bar has worked but when i click on the links it says the pages don’t exist. I can view the pages when I go to edit pages. Not sure what do to next. Could you point me in the right direction! Thanks Deb

  14. BlueCat

    Sure, I will try it.
    Great tut! Thank you very much.

  15. BlueCat

    I did 🙂
    Thanks again.

  16. Amber

    I’m in the same boat as you Miss Muffin (Love the name by the way), but from what I have been able to figure out, you have to create “pages” for your blog…I think they are stand alone pages but still attached to you blog-maybe?
    hmmmm.

  17. Amber

    I’m back! Here’s what I have discovered…Under your blog design options, click on the tab on the far left that says “posts”. When that opens, you will notice a sub tab that says “pages”. Now you can create all the pages you want! I am working on an “about us” page. When you are done, you choose post, and it will take you to some additional options/designs/links that will work with your blog front page! It’s easier than I thought!
    Hope this helps you!

  18. Kelsey @ Kreated By Kelsey

    Hi ladies! Yes, I actually wrote a tutorial about this since this question was asked! You can view it here:
    http://www.tipjunkie.com/blogging-101-blogger-pages/

  19. Laura Pryor

    Hmmmm….I followed your directions….When I click on the nav bar links I get a page not found error message. I really don’t know what I’m doing wrong. Hmm…

  20. Aja

    Thank you SO MUCH for these directions!! I just did it and it totally worked! YAY! 🙂

  21. Angela Sloane

    THaNk YoU!!! I have NO experience in this dept. & with your directions, was able to set up a couple things! (Husband is a Software engineer so I was pretty thrilled to “show off” my accomplishment…hee hee).

  22. Tiffani Vasquez

    I tried to do this tonight, but instead of it coming up across my blog, it is only in the top corner. Not sure what I did wrong, but I am wondering how to fix it. Can you help me please??

    Tiffani
    http://thoughtsfromtiffani.blogspot.com

    Thank you!

  23. Tiffani Vasquez

    Never mind!! LOL It worked!

  24. Emily

    Hello,
    I just used this tutorial to create a nav menu on my blog and am so happy. I just need one more thing…
    How can I enter padding between each button/image used in my nav bar?
    Thank you!

  25. Susan

    OMG!! Thank you sooo much! I’m soooo new to blogging & I so need the help lol.

    Ok gotta get back to studying your blog & doing my homework lol

    xoxo
    twentyfour7

  26. vivian moretti

    I’m a new-blogger and I am still playing around and learning how to use blogger tools! Thank you so much for your help… this was the only blog I could really use what I’ve read on the tutorials!

Leave a Reply