Design | Navigation Bar 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.

On blogger, click Layout > Add New Gadget > HTML/Javascript

<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

On blogger, click Layout > Add New Gadget > HTML/Javascript

Add a title, it will help with editing later on and you can delete it after.

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;

}

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.

Anything else, Let me know

Next up: Drop Down Menu