Horizontal Navigation with Images

Tuesday, July 24, 2012


nav navigation bar menu with images links




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

add nav navigation bar with image to blogger blog

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?

</span>add nav navigation bar with image to blogger blog<span class=

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