We’re talking about custom navigation bars! To be honest, this can be pretty overwhelming but don’t worry… follow the directions carefully and you will be just fine 
Creating Navigation Buttons:
Step 1: Decide where you want to place your navigation bar. If it’s beneath your header, you will need to know the width of your header in pixels. If it’s in your sidebar, you will need to know the width of your sidebar in pixels.
Step 2. Create your navigation buttons: I use picnik.com (free) or Microsoft Powerpoint (Click here for a great tutorial on how to use picnik). You’ll want to read the next part about sizing your buttons before you create them.
Sizing your buttons:
Beneath your header: You want the width of all your buttons to equal the width of your header. So if your header’s width is 1000 pixels and you want 5 buttons, make each button 200 pixels wide.
In your sidebar:
- If you want your buttons to go from top to bottom, then it doesn’t really matter what size you decide to make each button, as long as the width of button does not exceed the width of your sidebar.
- If you want your buttons to go from side to side (like the “Find me here buttons” in my header), you need to make sure that the cumulative width of your buttons does not exceed the width of your sidebar. If your sidebar is 300 pixels wide and you want three navigation buttons, then be sure that the three buttons are smaller than 100 pixels wide.
Step 3: Upload your images to imageshack.com (free) and copy the “direct link.” Insert your information into the highlighted section of this code:
<div id=”newnavbar”><ul> <li><a href=”the page your button links to“><img src=”your image’s direct link” /></a></li></ul></div>
This code is written for one button. If you want to make this code work for say 5 buttons, you need to add this code for each new button:
<li><a href=”the page your button links to“><img src=”your image’s direct link” /></a></li>
Your resulting code will look like this:
<div id=”newnavbar”><ul> <li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li></ul></div>
Looking at the different colored sections, you’ll see all I did was add the code immediately after the </li> of the previous code.
Adding your navigation bar:
Step 1: Go to “design,” then “edit html,” then click on “expand template widgets” {remember to save your template at this time- click “download full template”}. Search for the following code:
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1‘ showaddelement=’no‘>
<b:widget id=’Header1′ locked=’true’ title=’Test Blog (Header)’ type=’Header’/>
</b:section>
</div>
Chane the the highlighted “1″ to a “3″ and the “no” to a “yes.” Your code should now look like this:
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’3‘showaddelement=’yes‘>
<b:widget id=’Header1′ locked=’true’ title=’Test Blog (Header)’ type=’Header’/>
</b:section>
</div>
Step 2: Click save.
Step 3: Go to “design,” then “add a gadget” then click on “html/javascript.” Paste the navigation bar code you just made into that box and click save.
Step 4: Go to “design,” then “edit html,” then click on “expand template widgets” {remember to save your template at this time- click ” download full template”}.
- If you want the navigation bar beneath your header: Search the HTML code for the “header” section (may also be called “headings”).
- If you want the navigation bar in your sidebar: Search the HTML code for the “sidebar” section (may also be called “widgets”).
Paste the following code anywhere inside the header section as long as it is after a }
#newnavbar ul li{
font-size: 180%;
font-family: verdana;
display:inline;
padding: 15px;
margin: 15px;
margin-right: -10px;
}
#newnavbar li a{
color:#2cae1f;
}
#newnavbar li a:visited {
color: #cb2a2f;
}
#newnavbar li a:hover {
background: #b2c74f;
}
Step 5: This code is customizable. You can shift the buttons to the right or left by adding different values to the “padding,” “margin,” and “margin-right.” You can place both positive and negative numbers depending on how you would like the buttons to shift. The numbers that look like this #b2c74f are color hex codes. They can also be changed, if you download colorzilla from firefox (also free) you can copy any color from the web and get the hex code for it.
Step 6: Click “preview template.” Make sure everything looks good before saving your template.
A few tips:
1. You can create as many navigation bars as you like. With each new navigation bar repeat the entire process except step 1 in “Adding your navigation bar.” This only needs to be done once.
2.You need to make each navigation bar unique, I do this by simply adding a number to each code. For example:
Second navigation bar:
<div id=”newnavbar2“><ul> <li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li></ul></div>
#newnavbar2 ul li{
font-size: 180%;
font-family: verdana;
display:inline;
padding: 15px;
margin: 15px;
margin-right: -10px;
}
#newnavbar li a{
color:#2cae1f;
}
#newnavbar li a:visited {
color: #cb2a2f;
}
#newnavbar li a:hover {
background: #b2c74f;
}
Third navigation bar:
<div id=”newnavbar3“><ul> <li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li></ul></div>
#newnavbar3 ul li{
font-size: 180%;
font-family: verdana;
display:inline;
padding: 15px;
margin: 15px;
margin-right: -10px;
}
#newnavbar li a{
color:#2cae1f;
}
#newnavbar li a:visited {
color: #cb2a2f;
}
#newnavbar li a:hover {
background: #b2c74f;
}
3. You can center your navigation bar in your header/column by simply adding <center> and </center> to the beginning/ending of this code:
<center><div id=”newnavbar”><ul> <li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li><li><a href=”the page your button links to”><img src=”your image’s direct link” /></a></li></ul></div></center>
That’s all for today folks!
Something that is also nice to add for a custom navigation bar is a little box that pops up when someone hovers on your link.
(for example, hover your mouse over the blogger logo in the very top left corner of this page, see the message "Go to blogger.com"?)
You add this by adding the "title" attribute to a link. In the example above you would have:
<a href="the page your button links to" title="I am the message that will show when hover"><img src="your image's direct link" /></a>
This can be a really nice touch to personalise your blog by having things like:
<a href="link" title="This is my blog about all the stuff I do"><img src="link"/></a>
<a href="link" title="All about wonderful me!"><img src="link"/></a>
<a href="link" title="Get in touch! I would love to hear from you!"><img src="link"/></a>
You can also do the same for images. See the boxes pop up when you hover over someone who is following this blog? That is done by a "title" attribute in the image.
<img src="link" title="This is a cool image"/>
And well done again Heidi for another great addition to your blog design posts!
Seriously LOVE this! Great idea!!! Thanks!
-Heidi
Great info! Thank you!
~Kimberlee
http://www.TheSpunkyDiva.com
Wow, I can't wait to hop on the computer tomorrow and beef up my blog, thanks!! I'm just getting started and think I am "talking" to myself at this point!!
Heidi,
Finally, I found some instructions that I can follow without any problems…thank you, thank you!! I applied it to my test blog
http://wwwdawggonecutecreations.blogspot.com/
How can I get rid of the gray boxes behind my images? I've played around with the color wheels on the template designer but can't figure out how to get rid of them…can you help? Haven't tried it on my new blog but just in case….:)
Hi Velma! Sorry for the wait. I receive many emails each day and it takes awhile to respond to each one.
There are two ways to solve this problem. One way is significantly easier than the other, so I will tell you that one. If it doesn't work email me again I will walk you through the more difficult one. Go to "design" on your blog. Then click "template designer" go to "advanced" then "tabs background" then choose white (#ffffff).
That should be the trick.
Hope this works! Thanks for reading my blog!
-Heidi