The term navigation bar is typically used to refer to an array of hyperlinks allowing visitors to quickly move around in a web site. Navigation bars can be in horizontal or vertical arrangements. This article will explain how you can add a simple, vertical navigation bar at the top of your Blogger blog. (This is called ‘simple’ because it is text-based and will not appear as a tabbed array of buttons)
This method is so simple that all you need is a simple Text Widget placed at the Header section of the template. (See this article to learn how to add Blogger gadgets to the Header section)
For example, consider a navigation bar such as the one shown in the figure below.
For the purpose of demonstration, I will only use the first two links in that bar. To add those two links, this is the HTML code you need. (IMPORTANT: All of this must be in a single line, and the line breaks are added only for clarity)
<a href="http://bguide.blogspot.com/2008/02/three-column-templates-explained.html">3 Columns Explained</a>
It’s a mere sequence of URLs separated by a pipe ( | ) character. The separator can be any character, but the pipe is the best fit there. The general form of a URL is as follows.
The Link Text is the portion of text displayed on the browser. The URL is the reference (or web address) of the actual page to link to. The following snippet shows a sample HTML code to create a navigation bar with some hypothetical links from a Blogger blog.
<a href="http://myblog.blogspot.com/YYYY/MM/post-one.html">Post One</a> |
<a href="http://myblog.blogspot.com/YYYY/MM/post-two.html">Post Two</a> |
<a href="mailto:myemail@example.com">Contact Me</a>
As stated earlier, all of the above code must be in a single line. Line breaks are added for clarity only.
Adding this alone using a text widget would serve the purpose, but to get the hovering effect to highlight the links when mouse is moved over, we need a little bit of CSS. Given below is a CSS class selector called mynav limited to the scope of div elements. The properties highlighted in red should be adjusted to match the colors and layout of a given blog.
{
margin : 0 14px .1em;
font-size : 12px;
font-weight : bold;
}
div.mynav a
{
text-decoration : none;
}
div.mynav a:link, div.mynav a:visited,
div.mynav a:active
{
color: #ffffff;
}
div.mynav a:hover
{
color: #eebf9f;
}
Explaining the above set of CSS rules is beyond the scope of this article. If you need to use it however, just copy the above code snippet and install it in your template as illustrated in the article How to Add a Custom CSS to Blogger. Once the CSS style is installed, we need to apply that style to our navigation bar code. That is done by enclosing that entire code in a <div> element with the class mynav. The following code snippet shows the final result.
<a href="http://bguide.blogspot.com/">Home</a> |
<a href="http://bguide.blogspot.com/2008/02/three-column-templates-explained.html">3 Columns Explained</a>
</div>
All right, that’s it. Formulate all the code you want in your navigation bar and install it using a text widget in to your blog Header.
