About   All Tips   Tips by Category   Tips by Ability   Help!

How To Create Pages for a Custom Navigation Bar

A navigation bar is a great tool to have. It helps your readers easily find the information that they are looking for. Most readers spend less than one minute on each blog that they visit. They do not have the time (or the want-to) to browse through your sidebar for information. Having a navigation bar at the top of the page will make it easier for your readers to spend a little more time learning about your blog and all it has to offer.

Many of my customers who order a custom navigation bar feel overwhelmed by having to provide a url for each nav bar tab. They think that they have to create a special 'page' for it. The good news is that this is a super easy thing to do! It looks intimidating because it is a foreign idea, but the truth is that you can create a page for your nav bar by simply WRITING A POST. A page is a post, a post is a page. Earth shattering news, I know! Once you understand that concept, creating nav bar links is easy!

You can easily create a simple navigation bar by adding a 'Pages' gadget from your Page Elements page. When you create a nav bar using the Blogger gadget, it is probably easier to use the built-in pages function instead of posts. Be forewarned, nav bars created this way do not lend themselves to customization. If you are wanting a custom nav bar, one that is nicely centered below your header or that uses different fonts and colors than the ones on your blog, you will either need to hire a blog designer to create one for you or build the gadget yourself. Posts on how to create your own nav bar (advanced) and how to create a simple Blogger one (beginner) are coming soon.

This tutorial will focus on how to create posts for a custom navigation bar. Before we get started, you'll need to know a little nav bar lingo.

Navigation Bar Terms

Nav bar (navigation bar, menu bar): A navigation bar is a group of links that helps your readers easily navigate your blog to find what they are looking for. The nav bar on my blog is a row of links that sits below my header.

Url: A url is a web address. Every website has a url. Every post on your blog has a url. The url for this blog is http://sneakymommablogdesign.blogspot.com/. The url for this post is http://sneakymommablogdesign.blogspot.com/2010/10/how-to-create-pages-for-custom.html. A url can be found by going to the page you would like the url for and looking up at the very top of your computer screen (refer to above image) The long, skinny box will contain most (if not all) of the url. Simply clicking on the characters should highlight the whole thing, even the characters that are out of view. To see the url for a specific post, you'll need to click on its title. Click here for help locating the url for a specific post.

Tab (hotspot): A tab is the individual word(s) or image in a nav bar that your readers will click on to get where they want to go. Each tab needs a url to link to. My nav bar contains five tabs. Each tab consists of a flower and word(s). Each tab links to a specific post (url) on my blog.

Steps to writing posts for nav bar tabs

1. Write the post. Include everything in the post (photos, images, links, etc.) that you want your readers to see when they click on the tab that will link to it.

2. Backdate the post if you wish. When you backdate a post, it will not appear as the first post on your blog. It will appear on your readers' reading list when you first publish it, though.

3. Publish the post.

4. Click on 'view post'.

5. Copy the url (web address) at the very top of the computer screen and paste it somewhere for future use. I like to open up a new Word or Wordpad document so that I can easily keep up with the urls for all of my nav bar tabs. For more help with finding the url for a specific post, click here.

Common Nav Bar Tabs

Home: The home tab does not need a post. All it needs is the url of your blog.The url of your blog can most often be found by clicking on your header.

About: Write a post about yourself and/or your blog. Stick a photo in it if you'd like.

Friends: Create a post with your friends' blog buttons in it. To do this, click on the 'edit html' tab and paste the html codes to the buttons into it. If you'd like them all to be centered, put centering tags at the very top and bottom of the post.

Contact: You can link directly to your email address (no post needed) or you can create a post with your contact information in it.

Etsy shop/Flickr/Other Blog or Website: No post needed for this one, either. Go to the site you want to link to and copy the url up at the top of the screen. Easy peasy.

Previously Published Posts: Go to your 'Edit Posts' page. Scroll down to the post you'd like to link to. Click on 'view'. Copy the url and you're all set!

Labels: Want to link to a specific label on your blog? Perhaps you would like to share all of the posts labeled 'recipes' on your blog. To get the url, you'll need to click on the recipes label in your sidebar and copy the url at the top of the page. If you do not have the labels gadget on your blog, you will need to temporarily put one there so that you can get the url. Once the recipes tab has been created and clicked on, all of the posts that you have labeled 'recipes' will show up in order, most recent first.

If you have not labeled all of your recipes with the same label, you'll need to go in and do so before you can get the url for it. Check out Sondra's blog and click on her recipes tab to see an example of this. Her household, giveaways, and reviews tabs are also linked to labels.

Multiple Posts: Want to link to several posts from one tab in the nav bar? Not going to happen! You can only link to one url per tab. You can link to multiple posts only if you create a single post that contains links to all the posts that you want to share in it. The Favorite Posts tab on Aleta's blog was created this way.

In order to have a nav bar, you must have a url for each tab. If you do not have a url for a tab, you must create one. There is NOTHING difficult at all about creating a page for a tab to link to. A nav bar page is just a post. JUST A POST. A simple post that you can write just like you write any other post. A simple post that you can edit, add photos to.....it's just a post!

Have fun creating the pages for your nav bar! Be creative! Let the blogging world have easy access to the things on your blog that you think are most important. You (and your readers) will be glad you did!

Related Posts
Backdate a Post
Nav Bar w/Images
Link to Specific Posts
Put a Photo in a Post
Center HTML Images 
Link Directly to an Email Address 
Order a Custom Navigation Bar

Please do not copy and paste my words and images into your own posts. I work hard on my tips and wish for everything to remain on this blog. Want to share this tip with your readers or blog design customers? Feel free to link to this post: http://sneakymommablogdesign.blogspot.com/2010/10/how-to-create-pages-for-custom.html     Thanks! :)


Payton said...

Hi! I've been slaving away trying to get my nav bar to look cute like yours! I have the pages on my blog but as you can see they are all over to the left and just links. I want it cute like yours but I cannot for the life of me figure it out! Your help would be MUCH appreciated! Thanks!! www.paytonandandrew.blogspot.com

Jill @ Sneaky Momma said...

Hi Payton! Try this: http://www.sneakymommablogdesign.com/2010/04/navigation-bars-advanced.html

Anonymous said...

ya, really nice post. very useful thanks for sharing.