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> <a href="LINK2 GOES HERE">TITLE2 GOES HERE</a> <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> <a href=”LINK2 GOES HERE">TITLE2 GOES HERE</a> <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:
<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.
Comments
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!
Is this the same thing as “Pages” in blogger?
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!
Hey, have you been reading my mind? This was perfect timing for me! Thanks a bunch. :)
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?
Hi Nicole! It is very possible that the reason it’s not working is that the site is private. If you email me at kreatedbykelsey@hotmail.com I can help you further!
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?
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!
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…
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!
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.
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!
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 …
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.
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!
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/
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
Sure, I will try it.
Great tut! Thank you very much.
I did :)
Thanks again.
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…
Thank you SO MUCH for these directions!! I just did it and it totally worked! YAY! :)
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).
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!
Tiffani Vasquez recently posted..U R My "Sun" Shine
Never mind!! LOL It worked!
Tiffani Vasquez recently posted..U R My "Sun" Shine
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!
Don’t have enough cash to buy a house? You not have to worry, because this is achievable to take the personal loans to work out such problems. So take a car loan to buy all you need.