Navigation Bar - Using Pages

A good blog needs to be easy to navigate. If your readers can't search through your posts quickly and easily to find what interests them, they probably won't be looking at your blog for long. There are so many different ways to make a navigation bar but I am going to explain very basic ones for now. Navigation bars can range from a very basic list of links to complicated drop-down menus. Some blogs even have their navigation bars creatively embedded in their header design.

I can definitely help you make a basic navigation bar, but I still don't know how to make the really creative types of navigation bars. I created my navigation bar a few years ago and I don't remember how I did it well enough to explain it. I do remember that it took me forever to figure out how to do the drop-down menus. I encountered a million glitches and eventually figured it out, even though the spacing in some browsers keeps it from lining up as well as I would like. However, if I have time after I finish this basic nav bar, I will look into my drop-down menu and try to figure out how I put it all together.

So let's get started on a basic navigation bar!


The easiest way to create a navigation bar and be able to customize it is to use Blogger's Pages. So let's begin by creating your own Pages.

1. To set-up your Pages, go to your Blogger Dashboard and choose "Pages" from the drop down menu:

You will then see this page:

The Pages gadget will automatically create a "Home" page which directs readers back to the main page of your blog. 

2. To create new pages, simply click "New Page". You will then be given 2 options: "Blank Page" and "Web Address".

"Blank Page" allows you to create a separate page on your blog apart from your blog posts. There is no date attached to these pages and readers can't leave comments. On my blog, I have used blank pages to create a list of "Frequently Asked Questions", an "About Me" page and other pages that are set apart from my posts.

"Web Address" allows you to create a link to any website, within your blog or outside your blog. I use this on my blog but I don't use it for outside links. For example, if you click on "Free Designs" in my navigation bar, you will see all of my posts that include my free designs: backgrounds, template and headers. You will not see any of my tutorials or other posts. At the end of this post I have included instructions on how to get the web address that displays a group of posts from your blog. 

For this tutorial, I am going to create a page for "Frequently Asked Questions" and "About Me" and then a link to my blog, Blog Designs by Dani, and a link to a specific set of posts on Blog Designs by Dani, my free backgrounds.

3. To create a "New Page", choose "Blank Page" after clicking "New Page". You will be directed to the following screen where you can create you page.

I entered the title for my page where you see "Frequently Asked Questions". I then typed my FAQ's in the page section. To make this page useful, I need to link each question to a post on my blog that explains that 

question.

To add a link to a section of text, highlight the text that you want to be linked and then click "Link". A window will pop-up as you see below:

In the box next to "Web address", enter the web address that you want that text to link to. I also click "Open this link in a new window" so that readers don't have to leave the FAQ page to read each tutorial. However, this is optional. Once you are done, click "OK".

Now, if you do not know how to find the web address for a specific post, do the following. Go to your blog and find the post that you want to link to. Click on the title of that specific post. You will then be directed to the specific web page for that blog post. In fact, each post has its own web address. Once you are on that web page for your blog post, find the web address at the top of your browser. Copy the web address by highlighting it and then copying it (Ctrl+C or right click "Copy"). Then in the pop-up window that you see in the image above, paste the web address (Ctrl+V or right click "Paste"). (Macs have different commands for copy and paste.) I recommend clicking "Test this link" to make sure that you copied the correct web address.

4. Once you finish this page, click "Publish". You will then be directed to this screen:

At this point, you can add more pages or links. You can also rearrange the order of these pages and links. To rearrange them, hold your mouse over the light blue rectangle on the left side of each page/link. When your cursor turns into cross arrows, hold down your mouse and move it over the top of any of the boxes above or below. If you are happy with your arrangement, click "Save Arrangement".

5. To add a link instead of a Page, click "New page" and choose "Web Address". Enter a title that describes that link and the web address to that link and then click Save as shown below:

6. I have gone ahead and added the rest of my pages and links. You can rearrange the order however you like as explained in step 4. I now want to tell Blogger to place my pages/links at the top of my blog so that it will act like a navigation bar. To do this, click the button next to "Show page as" as shown below:

From the drop-down menu, choose "Top tabs" (unless you want your navigation bar on your sidebar). By placing it in the top, you can customize the look of it in the Template Designer. Be sure to click "Save Arrangement" before moving on.

7. Now that our navigation bar has been created, we need to customize the look of it. To do this, click "Template" from the menu on the left. You should see the following screen:

Click "Customize" to go to the Template Designer.

8. In the Template Designer, click "Advanced" and then "Tabs Text" as shown below:

Adjust the font, font size and style, text color and selected color to match your blog. (Those red lines will not show up on your blog.) "Selected Color" is the color of the text when the reader is on that specific page.

My changes are shown below. I adjusted the size of the text so that my navigation bar covered the width of my blog.

9. Next click "Tabs Background" to adjust the background color of each link. You can adjust the backgrounds however you choose, but I am going to show you how to remove the background colors and borders so that all you see is the text. From the color menu for the Background Color and Selected Color, choose "Transparent" as you see below:

10. Now to remove those border lines (or change the color of them if you want to keep them), scroll down and choose "Accents". Where you see "Tabs Border Color", selected "Transparent" as you see below:

If you like what you see, click "Apply to blog" and then "View Blog". Now you have a basic navigation bar!

Be sure to test out your links once you view your blog. 

**At the beginning of this post, I said I would explain how to find the web address for a group of posts on your blog. Here is a short tutorial on this:

A. To be able to link to a group of posts that are all in a specific category, you need to have labels set up on your blog. Labels are set up when you create a new post. On the page where you edit your posts, there is a button on the right that says, "Labels". Click this. (If your posts are already created and you want to add labels, go to the "Posts" page from your Dashboard and click "Edit" for the particular post you want to add a label to.)

B. Now, enter the label you would like to give your post. For my blog, I have a lot of labels, but a few of my main ones are "Free Designs", "Design Secrets" and "FAQ's". So for example, on each post with a tutorial, I have added the label, "Design Secrets". Be sure to separate labels with commas. When you first enter labels, the screen will look like this:

If you already have labels set up, you can just click on the ones that apply to your post or add a new one as shown below:

C. Once your labels are set-up, go back to your blog and click on one of your labels. You can do this by clicking the label at the bottom of a blog post or, if you have the "Labels" gadget added to your sidebar, you can click on a specific label from your sidebar. 

You should then see all of your posts that have that label. On my blog, if I click the label "Design Secrets", my blog will show all of my tutorials. To get the web address that corresponds to this label, go to the top of your browser window and highlight the web address. You will paste this web address in step 5 above.