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):
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
The codes for the above will be something like this:
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
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.
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>
<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
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>
| <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>
| <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.