Horizontal Navigation with Images
The lovely Mel from mediamarmalade asked how to make a horizontal navigation bar using images so I decided to turn it into a blog post. Here's two quick tutorials on how to do so. Let me know if you have any problems and if you need to know anything else. Hope you're all having a lovely Tuesday!
Step 1
Firstly, you need to design your buttons and upload them to a hosting site (such as Photobucket, Tinypic, etc)
Step 2
Backup your template.
<center>
<table width="TOTAL WIDTH OF NAV BAR" height="TOTAL HEIGHT" cellspacing="0" cellpadding="0" border="0" id="Table_01">
<tbody><tr>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL" /></a></td>
</tr>
</tbody></table>
</center>
Alternative Option
Step 1
Firstly, you need to design your buttons and upload them to a hosting site (such as Photobucket, Tinypic, etc)
Take note of the width & height of each image.
Step 2
Add a title, it will help with editing later on and you can delete it after.
![</span>add nav navigation bar with image to blogger blog<span class=]()
Margin-bottom will add space between the navigation bar and start of your blog posts. You can edit padding & margin depending on how you want it to look.
Then copy and paste the following for as many links you need.
<a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>
Problems
Gaps, Spaces?
If there is any gaps between the images, remove the spaces so instead of
<a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>
<a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>
<a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>
you're left with;
<a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a><a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a><a href="URL"><img src="DIRECT IMG URL" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>
Margins & Padding?
Click Template > Edit HTML
Search for the title, you'll see HTML# (# = number)
Click close > Customise > Advanced > Add CSS
Paste the HTML# and the following
{
padding: 0px;
margin-bottom: 10px;
}
