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.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
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!):
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:
- Add some styling code to your blog's template
- 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
23 comments:
Hi Amanda
Great tutorial it worked really well
But I was just wondering hw you got the navigation buttons to go onto the red line on the header
same trouble as Isa and yvart
Thank you Amanda. This tutorial is well designed. I got myself something I was looking for. I got the navigation buttons was looking for. It is working well too.
I created a linklist for a navigation and then styled it to my liking.
Here's a link to my test site --
http://godcenteredtest.blogspot.com/
I think you are going to be my best friend... I am joking.... I have a question like the one Kris had... I have thought to use links for two or three different blogpages I want to create and relate as well but some of the buttons I want to make I think it would be better to have particular posts as a target. I think I want to link them to labels of my posts... if it works in any way! I haven't experimment on that yet... Do you think you could help me on this?
THANK YOU ANYWAY!
Thanks for nice sharing. It is very helpful me. Again Thanks.
I made this nav bar. Thank you. It was fairly simple. However, why does the font or size/color of the font on the nav bar change when you change the font size/color for your blog? Can't this be made independent?
Hi....where do I find the style section...or where do i find the layout?
how do i remove the date of the post?
it links to the post that i want it to link..but the date stays there...any idea how to remove it? because i want it to look like shop and not have dates and all..
Thank You! Very much! It worked in first Try!!
Nice Job..
Love everthing about your blog! Thanks. Brilliant. Most useful blog I've seen for a long time!
Thank you.very nice informations
Thanks for you help. The best part of your wonderfully helpful blog is that you explain things clearly. Your blog is a special gem in a field of stones.
Hey!
I've had an art blog for quite a while and recently used GoDaddy to make my own domain for an online portfolio. I wanted a navigation bar to link to my images, artist info, contact, etc. on a separate page. I got all of that down, but when I click on the links I made, it sends me to blogger's "this page doesn't exist" page. What am I doing wrong? How do I make pages branching off my website?
www.abigaillarson.com
This has been most helpful. Thank you for your time, and for sharing this.
Thank you for a great blog!
I followed your instructions and it works perfectly.
However, I can't get the blank space filled in with the menu color. IOW, the menu stops when I stop adding menu items instead of continuing to the right side of the page.
Is there any easy fix?
Here is my blog: http://www.drugchannels.net
Thanks in advance!
Adam
I answered my own question -- but I'm curious if it is correct. It works fine on windows computers but does not display correctly in mac.
I added the following line as the last item in my menu:
style="width: 357px; background-color: #445566;" class="navigation"> 
where "357px" is the extra space that needed to be filled in with my menu background color (#445566).
On mac (both firefox and safari), the spacing is off so this blank item wraps to the next line.
Any thoughts?
Now thats what i needed to know...You have helped me out bunches.....And another thing,you have a kick butt website...
Keep up good work,,i'll be watching
I used this one on my site http://www.mzansitoday.co.za and it worked perfectly. Visitors told me that it is now easier to navigate my site...great stuff
Hi Amanda!
I admitted your neat tip and succeed.
But here I faced a problem!
I was using IE, I could not see the Navigation Buttons, I tried the latest IE version but failed again, then I installed AVANT Browser but here that trouble was waiting for me too!
Atleast I installed Mozilla FireFox 3 and WOW i could see the Navigation Buttons!
This all things I thought that should be acknowledged to you, so whenever someone ask you about this problem then instruct them to change their Browser.
Thanx for the TIP!
Lastly I have a question here!
You instructed the method to show the Navigation Buttons below the BLOG TITLE, but you didn't tell about the procedure to show these buttons above the BLOG TITLE!
I think (& suggest too) that EDIT your ARTICLE and include the complete procedure for placing the Buttons at appropriate places!
Thanx again and Regard for you Effort (Infact the Great Effort)!
Hello thanks for the tuto; however after having changed it all i have an error message in the page elements if i want to add widgets or reorganise things on the page. the template is not recognized and this message appears
"Invalid data reference post.dateHeader: com.google.layouts.framework.widgetview.GoogleMarkupException: No dictionary named: 'post' in: ['blog']"
I am having the same problems as Yvart & Isa aswell :-(
Need help pls, ty
Hi, thanks for this tutorial. I got the buttons up just fine and edited them. I then went on to make static pages, as in backdated blogposts. However when I enter the link to said blogposts in the HTML Java script I get the error code that the page does not exist. I checked and doublechecked the link is correct and works when entered directly into an address bar. I linked to my homepage (link ending in .com) and that works, but all the links ending in .html do not work.
Can you help out, please???
Post a Comment