Sunday, February 07, 2010

Simple text horizontal navigation bar


Skip to instructions if you are only interested in reading the instructions on how to do create the navigation bar. You may also be interested in How to create static pages as things like contact forms, About this blog, etc is ideally suited to using Pages and the horizontal navigation bar.

Preamble
There are 2 things that we want in designing a blog or website. One is to make it easy for visitors to find content and the other is to make full use of the portion above the fold. And both of these can be fulfilled by creating a horizontal navigation bar either just below the Header or even within the Header itself.

Because I am comfortable with tables (<table>) I have used I have used table to create horizontal navigation bar before. However, current opinion is table should be used for data, and navigation bar which contain links are not data and the proper HTML tag to use for navigation bar should be list (<ul>). This has to do with web sematic which I think relates to how a computer, not a human, see a website. However, this will involve CSS (Cascading Style Sheet) and a lot of coding. The method I am going to describe here just use a simple <div> tag and http://bloggerfordummies.blogspot.com/2008/07/dummies-guide-html-tutorial-hyperlink.html" target="_blank">hyperlinks and is simple to do.

I am not a trained programmer so don't know yet the significance of web sematic and don't know yet what is the significance of using this method on the blog, SEO, whatever, but any significance I doubt it will have a large bearing on the blog, and I quite like the simplicity. If you have doubts regarding using this method, perhaps you can wait until I publish a new post on using CSS. In the meantime, I am very happy using this method for my blog.


How to create simple text horizontal navigation bar without CSS

Step 1: extra "Add a gadget" in the LAYOUT for the blog Header. Briefly, this just involved the simple step of finding editing showaddelement='no' to showaddelement='yes' in the template.

Step 2:Go to LAYOUT, click ADD A GADGET in the blog Header section and choose a HTML/Javascript gadget (formerly called page element). Then type in this HTML, with any number of links you wish(the first code is just to show how it is done, the following codes are to show how to make it look better):

<div>
<a href="URL 1">Link 1</a>
<a href="URL 2">Link 2</a>
<a href="URL 3">Link 2</a>
</div>

where you should change the URL and the "Link 1" to any text that describe the page you want to link to like HOME, ABOUT US, etc.

Now if you use the code above, the links will all be bunched together. If you don't like that, you will have to add space by using the space bar. You can only use the space bar once. If you want to add more space, then you will have to type where nbsp stands for non breaking space.

Further, you may also want to consider putting a vertical bar | (one with the backslash key) to separate the links like what I have done for this blog. I have also experimented with [ ] as separator and if you want to see how it looks, refer to FAQ for Blogger Tips and Tricks

The codes for the above will be something like this:

<div>
| <a href="URL 1">Link 1</a> |
| <a href="URL 2">Link 2</a> |
| <a href="URL 3">Link 3</a> |
</div>


Step 3:If you are happy with the navigation bar above the Blog Title, you may leave it as it is. Otherwise, go back to LAYOUT and drag the gadget to wherever you want.

If you still want to embellish the navigation bar, perhaps you may want to add background color to distinguish the navigation bar from the rest of the blog Header. You can add an attribute background-color:red to the div tag like this

<div style="background-color:red;>
| <a href="URL 1">Link 1</a> |
| <a href="URL 2">Link 2</a> |
| <a href="URL 3">Link 3</a> |
</div>


I have used the example red for the color, but you can use any color or use HTML color code #E1E1E1; for more color choices. For tasks related to color, I have found the free Iconico Color Pic and Color Blender invaluable. For color, I may write a general blogging tip on colors for blog later. In the meantime, this getting started with Color Pic may be useful.

41 comments:

  1. Hello :D

    I used to come to your blogger once and your blog is still awesome! Ttoday I need your help becuase i dont know what happen to my blogger, when I post something it doesnt show the date I published T^T

    Please help me!!!!


    Thank you..

    ReplyDelete
  2. hmm what do you mean??? I got the template from some website T^T

    ReplyDelete
  3. Peter,
    Blogspot has a new feature that allows tabs under Add/Edit Pages.

    http://sarikei-time-capsule.blogspot.com/

    I tried in my blog. The feature works but the colour of the links does not turn out well because of my template background. That's not the problem of the feature though

    ReplyDelete
  4. Did you get that problem immediately after publishing the first post without changing anything?

    ReplyDelete
  5. Hello Peter, Thank you for the information about the navigation bar - I much prefer the look to what I initially set up - however, how do I get the pages I created to link to the nav bar codes? Does that makes sense? Can I edit the gadgets choice without losing the page? ugh
    thanks, hls

    ReplyDelete
  6. http://www.heidispiegel.com/

    ReplyDelete
  7. I intend to elaborate in a post. If I take too long, pester me.

    ReplyDelete
  8. Heidi I Spiegel. I think you should learn to make active links in posts and comments or active links when commenting (I may need to update. Let me know if you have any problems using it)

    I think also the information you need to make those links in your nav bar is already in this post but if you cannot find it, ask me to edit this post.

    ReplyDelete
  9. For Daniel Yiek,

    Sorry for late response, your comment notification ended up in spam folder.

    Anyway you may be interested in Create static pages. I should add this to related posts I think.

    ReplyDelete
  10. sir your blog is second to none on the internet i want to be like you but there are a few restriction in so that i can make some money from my blog and sent my kids to school to i need your help pls reply olarichy.blogspot.com

    ReplyDelete
  11. Write good content and if you are selling products, do product reviews

    ReplyDelete
  12. A BIG thank you. Those were such easy instructions. I did it!

    Blessings!

    ReplyDelete
  13. I have looked and looked for a simple clear navigation bar and tried over a dozen. They either didn't work or where so complicated, it wasn't worth it.

    This is simple, fast, easily changed and DOES THE JOB.
    Thanks!
    Ziggy

    ReplyDelete
  14. Hi Peter, this was so easy. Thanks! Date

    ReplyDelete
  15. hi peter,
    i just wanted to know if i can create in my blog just like those at the top of this article like -"instructions","How to create static pages" which takes us to another page of my blog itself.

    ReplyDelete
  16. Heart, I am afraid I can't understand exactly what you want done. You will have to elaborate.

    ReplyDelete
  17. I was able to use this in a Wordpress.org blog by switching the link and text around. It did not work as is. When I pasted it as is, it would only show the links.

    Thanks so much for this!!! I have been searching all over trying to find out how to create a "horizontal" navigational bar!

    ReplyDelete
  18. How do I get my bar centered? It is aligned to the left and I can't get it centered.

    http://thedirtroaddiva.blogspot.com

    ReplyDelete
  19. You mean this? test centering tab for blogger? Tell me how you enabled those tabs.

    ReplyDelete
  20. I've found your tips useful through the years of working on blogger.

    I'm trying to do a navigation bar sort of like this, but here's the kicker: I want it only on some pages, not all of them. If it's in the template, it's on all pages. Currently all I can think to do is to copy the HTML onto every page where I want it. But then if I want to add one link to the navigation, now I have to go back and edit the html in every page where it occurs. Pain in the you-know-what. I tried an "include virtual" of my html in a separate file on my own system, but apparently blogger doesn't allow it--got nothing.

    Any ideas? You can see an example here: http://dogblog.finchester.org/2010/10/memorizing-numbers-or-not.html.

    ReplyDelete
  21. Hi again Peter,
    I think I have a problem.
    I have made the horizontol bar but the FIRST HOME LINK shud be with the Dynamic page which when i provide and save...It is not accepted ...and the link is gone n what remains is simple text..I am not sure if I cud put the idea across but i hope you can solve the problem

    ReplyDelete
  22. Hi Peter, I just created my navigation bar by adding the htlm/java script element as a gadget under the header. I got the nav centered, and everything looks good, but now I can't figure out what I should make these links actually be. I don't want them to be static content pages, I want them to function as a blog category (I write a post, select the category, and then it shows up on the blog homepage, and in that category, located on the navigation bar) How is this done? I don't really like the way that Labels does it, as I can't get it to look right as navigation (custom colors, etc.), and it organizes either by alphabetically or order of posts, and I would rather choose my order and have it stay that way (so that it functions more like a custom blog!!) Please help!!

    ReplyDelete
  23. The links that you add in this navigation bar can be any webpage you want, they need not necessarily be static pages or labels and in any order you choose.

    &lt'a href="URL 1">Link 1</a>

    ReplyDelete
  24. So when I write a blog post, how do I tell it what "page" to go on? (ie - lets say I have a Navigation item called "Nutrition", and I write a blog post that I want to go into the "nutrition" category - how do I make these to areas communicate? What do I make the link be for Nutrition, and where on the blog post do I tell it to live on that page? (I'm essentially trying to make the navigation items act as categories, and it is harder than I thought!) I hope this makes sense, and any help you can provide is absolutely greatly appreciated!!

    ReplyDelete
  25. If you understand the content of this post, you will know that links in the navigation bar are all manually added by you using the hyperlink tag <a href="URL">....</a>

    Now all you need to do is to get the URL of the label (category) for which you will have many choices, example, at the bottom of your "Nutrition" post, you will have Nutrition label (note: this active link is the actual URL for the "Nutrition" label for my foodasmedicine blog.

    ReplyDelete
  26. Forgot to add, go to one of my "Nutrition post", example Strategy to reduce salt consumption and blood pressure and at the bottom of that post, you will find this label Nutritio label (among 4 labels). Just right click on Nutritio and select "copy link address" (actual words depend on browser) and the label URL will be copied to clipboard to be pasted to wherever you choose.

    ReplyDelete
  27. Thnx sir thank you I have implemented it http://defencedog.blogspot.com/

    as a matter of fact I have just added floating button at bottom corner to redirect viewers back on top but I can view it using opera though work fine on firefox & IE??

    ReplyDelete
  28. Hey Peter,

    I was able to get everything expect the background code, I was wondering if there was a way change the size and the font?

    ReplyDelete
  29. Very easy just edit <div> to <div style="font-size:80%; font-family: times, serif; font-size:14pt; font-style:italic"> or something similar

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

    ReplyDelete
  31. is there a way to be able to put the nav bar inside the banner?

    selah from:
    http://newbiesmoneymakingonline.blogspot.com/

    ReplyDelete
  32. You mean those like buttons or tabs? That will be slightly more complicated requiring CSS (Cascading Style Sheet)

    ReplyDelete
  33. Hi Peter just wanted to say thank you!
    Your website really awesome!

    Best rgds,
    Minnie Miumiu

    ReplyDelete
  34. hi,how to increase font size?
    my bolg

    ReplyDelete
  35. Which font? Content? Sidebar? Title?

    ReplyDelete
  36. Hey, Peter!
    Here's my blog:
    free-techs.blogspot.in

    Now, here's my problem. I want the latest posts of a particular category to be displayed on a particular page.

    For example,
    I want all latest posts labelled "Tech" to be displayed in Blogs --dropdown--> Tech Blog and all posts labelled "Freebies" in Blogs --dropdown--> Freebie Blog.

    Also, I want to convert the Home page to a static page.

    Could you please help me with these problems? Thank you! :D

    ReplyDelete
  37. Hi Peter,

    I added the navbar and it works great. I am using Simple Template. I want to move the text in my navbar to align on the left matching my logo. I think I need to stretch the gadget to go far enough left. Can this be done and if so how?
    Thanks!
    Here is my site:
    http://russstoeckelphotography.blogspot.com/

    ReplyDelete
  38. Instead of just <div>, edit it to <div style="text-align:center;">

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics