Welcome to Week 2 of Tip Junkies Blogging 101 series!
This weeks question:
Q: How do you make a simple navigation bar?
A: First lets take a look at what a navigation bar (often called a menu bar) is and why its useful! A basic navigation bar looks like this:
Having important links in one place is a great way for readers to find what theyre 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:
– 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. Lets 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 Ive filled in the first link, Im going to fill in the titleor what I want the link to say. In this case, Im 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, were 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 youve 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.
Step 8: Save it to your blog! Lets 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 youre looking for ways to promote your blog, check out 31 Days to a Better Blog over on the SITSgirls Community.