August 14, 2012

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.

If you have any questions, feel free to leave a comment. I'd love to see your navigation bars when you are done!

26 comments:

  1. Wow! You are doing a wonderful thing here. I just popped over from another blog not knowing what to expect. I am not disappointed! I can't wait to start using some of the info you have published here. Thank you sooooo much!

    ReplyDelete
  2. I can't find tabs text and background option in my template designer.

    ReplyDelete
  3. Thank you so much for posting these tutorials - they are so useful! I am a brand-new blogger, with 0 followers, haha, and it's great to get some information on how to set up. You're awesome!

    ReplyDelete
  4. I am loving playing around with these tutorials.. However, I have an issue but I have a huge gap between my new header and my regular content on my blogger. Can you PLEASE help me get that huge gap off of there - I know how to get rid of the border, I just can't figure out how to get rid of that gap? I would really appreciate the help. Thank you. here is my blogger web address:
    http://www.georgiacoalition.blogspot.com/ you can email me at paigeroberts8@gmail.com if you need to.

    ReplyDelete
    Replies
    1. When you uploaded your header did you click "Shrink to Fit"? Try removing your header and uploading it again but clicking "Shrink to Fit" before you upload it. Let me know if that helps.

      Delete
  5. hi! how can i put the menu bar at the very top of the screen, touching the top?? thank you!

    ReplyDelete
    Replies
    1. I don't know. I've wondered the same thing but haven't gotten around to figuring it out. If I do, I will post about it.

      Delete
  6. I just made my pages and navigation bar at the top but how do I post to certain pages, I dont really understand that part? Thank you!

    ReplyDelete
    Replies
    1. Each page has just one post. You get to this from your Blogger Dashboard and choose "Pages". If you make a new post, it will not be linked to any particular page. For example, I only used my pages for things like my "About Me" page or my "Terms of Use" page. These are things that I won't be makingn additional posts for. If you do want several posts to be linked together, you need to use the widget/gadget "Labels". If you add the same label to all posts that have a certain characteristic, then they will all be linked together.

      Delete
  7. Oh my gosh, THANK YOU!!!! I have been searching for a clear way to do this!!!!! Very nice and easy to follow, love your designs!

    ReplyDelete
  8. Thanks for all the tips! I have one problem that I can't seem to find the answer to anywhere on the internet. I made pages, but I can't figure out how to customize the font and color of the title of the page. It is just light gray with ugly block lettering. I tried to put html in the title section and also the body, but that doesn't work. Do you know how can this be done? Thanks!

    ReplyDelete
  9. Thanks. I was searching all over for a easy explanation how to do this. I figured out my self how to make navbar but couldnt think of any way how to get posts classified under topics. If that makes sense. :D

    ReplyDelete
  10. So simple, but this saved me a major headache! Thank you so much! :)

    ReplyDelete
  11. Thank you so much! This was the most simple explanation I have found and it worked perfectly!
    Corey at tinysidekick.com

    ReplyDelete
  12. This was so helpful, thank you!! I am so excited to have a navigation bar on my blog now. Thanks again!!

    Chelsea at anchorsaweigh-ouradventure.blogspot.com

    ReplyDelete
  13. i did this some time ago but i m stuck with a problem and i din t know how to fix it
    i added the nav bar from pages but it is hudge, neverending in the right and left...
    HOW CAN I MAKE IT SHORTER?
    :((
    this is my blog so that you know what i mean: http://rucsacdemunte.blogspot.ro/

    pls help, anyone :D

    ReplyDelete
    Replies
    1. Go to your template and advanced. Find tabs background. Make the background colors transparent. Not sure if that'll help and adjust the widths maybe??

      Delete
  14. http://fantasymaza.blogspot.com/

    ReplyDelete
  15. Thank You so much for this post I've learned a lot.

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. hello! i'm a novice blogger (my blog is still under construction) and i'm trying to understand all this code things, which your tutorials have made really easy and i thank you so so much for it!! i'm trying to customize my page list, which i turned into a navigation bar, but i just can't seem to figure out how to put an image for the page list background, so that it is from one end to another of the content. i also wanted to put my list in the center of the content page, just like you have done here, but i really need help with this! can you help me, please?

    ReplyDelete
  18. There is no Any above Options In Pages

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.