Navigation Buttons in your blog

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.







To create these buttons for your blog, we don't need to use any external images!

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 before the closing 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 prefer, you can change the color of the backgrounds to colors which better suit your blog.

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.