23 Create navigation buttons to enhance your blog Friday, October 26, 2007 /

Many blogs and websites feature "navigation button" links like a menu at the top of the page or beneath the header. This can be really helpful for readers to navigate to areas of interest in your blog, such as the home page, about page and contact links.

In this tutorial, I'll explain a very simple (but effective) method of creating such a "navigation buttons" for your own blog, which you can use to add easily accessible links to your post pages.

Here is an example of the buttons you can create using this tutorial (though the links in these buttons all point back to this page!):

HomeAboutContact

To create these buttons for your blog, we don't need to use any external images! With a little CSS styling, you can easily create navigation buttons which change color when your mouse hovers over them, making it easier to see that these are indeed clickable links. This style of button is helpful to your visitors and invites them to view the important pages you link to using these links.

There are two main steps to creating these buttons for your blog:

1. Add some styling code to your blog's template


2. Create a new HTML/Javascript widget, and create your links

You can use these links anywhere in your blog that you are able to place an HTML/Javascript widget, such as your sidebar, the header section, or above your blog posts.

Here are the steps in detail:

Add some code to the style section of your blog template

The "style" section of "layouts" blogs is contained between the <b:skin> and </b:skin> tags in your template. The simplest way to add extra styling code is to place this just after the closing </b:skin> tag (key CTRL+F to easily find this in your template).

The styling code used for the buttons featured above is as follows:

a.navigation {

background: #000000;

color: #ffffff;

margin: 1px;

padding: 5px 35px 5px 5px;

border-width: 0;

text-transform: uppercase;

text-decoration: none;

font-weight: bold;

}

a.navigation:hover {

background: #5d5d54;

text-decoration: none;

}

If you copy and paste this code just before the closing </b:skin> tag in your blog template, you will easily be able to create your navigation buttons. If you prefer, you can change the color of the backgrounds (highlighted in red) to colors which better suit your blog. You can easily find the hex values for the colors you need by using the Color Calculator in the tools section of this site.

You will notice that there are two statements in this styling: the first defines what the buttons will look like as they appear in your blog, while the second (hover) statement defines the background color of the button when you place your cursor over the button (the "mouseover" effect).

Create your links in an HTML/Javascript widget

Once you have added this style code to your template, you should save your template and go to the layouts section of your blog (Template>Layout). Here you should create a new HTML/Javascript widget where you would like your buttons to appear.

In this new widget, you should add your links in the following format:

<a class="navigation" href="http://your-link-url.blogspot.com">Your link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your second link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your third link</a>

Be sure to replace "http://your-link-url.blogspot.com" with the URL of the post page (or link) you would like the button to link to, and replace the link text (eg: Your Link) with the text you would like to display.

Once you have created your links (you can add as few or as many as you like), save your HTML/Javascript widget, and take a look at the effect in your blog.

How this works

The styling code we add to the template creates styling rules for "anchor links" which are given the class of "navigation". We can use different "classes" to create different effects for elements which appear in your blog layout; the class we give for the navigation links does not affect other links in your template, only those which have the class of "navigation".

With a few tweaks, you can change the style of these buttons to completely blend with the overall appearance of your blog template, and create attractive clickable buttons to your important pages which your visitors will love.

Technorati Tags: buttons | navigation | menu | links | css | template | layout