Freckles in April: DIY Blog Design Part 7: 200 Level Navigation

Monday, June 25, 2012

DIY Blog Design Part 7: 200 Level Navigation

This navigation is a little more difficult than the last one I showed you but it's not too bad. Last Thursday I showed you how to do text based HTML navigation. This is pretty much the same thing, but with images.

First, you're going to need to create images for each navigation item.

Figure out how wide your blog is. You'll recall that I made Summer's 1100 px wide. Divide that number by how many buttons you need (1100 / 8 = 137.5). You can't do half pixels and you do need to account for some padding at both ends so I'm just going to say that my buttons can't be any wider than 130 pixels (maybe even a little less so I have wiggle room).

I created a new element in Photoshop that was 130 x 50 pixels. Then I just created simple buttons with the brush and text tools. I didn't care too much about how they looked since these buttons are just for the sake of example (I ultimately plan on doing Summer's nav bar a different way, which I'll be posting about tomorrow).

I created all 8 buttons as individual .jpeg images then hosted them in blogger (see this post).

Here's the HTML for a linked image-

<a href="URL"><img src="http://blahblah.jpg" alt="Text"></a>

URL is where you put your link to the place you want the button to go to. Your homepage, contact page, etc.

img src is where you hosted your image.

Alt text is for people who set their computers to show minimal images on webpages. It makes for a less pretty browsing experience but greatly decreases load time. The end result, though, is that they can't see your images with text on them so you have to tell them what is on that image. I also like it just because it makes it easier for me to see where in the code I'm working.

So here's my HTML for Summer's nav bar with linked images-

<div align="center">

<a href=""><img src="" alt="Home"></a>

<a href=""><img src="" alt="About"></a>

<a href=""><img src="" alt="Tutorials"></a>

<a href=""><img src="" alt="Featured"></a>

<a href=""><img src="" alt="Follow"></a>

<a href=""><img src="" alt="Links"></a>

<a href=""><img src="" alt="Sponsor"></a>

<a href=""><img src="" alt="Contact"></a>


When I paste that code into the HTML section of this post, it looks like this-

Home About Tutorials Featured Follow Links Sponsor Contact
Obviously it doesn't line up all pretty since my blog posting space is smaller than Summer's full blog, but you can see that they're linked when you roll your mouse over them.

Installation for this one is the same as the text based nav bar.

Yes, the contact button is missing. I made the buttons a little too big initially and was too lazy to resize everything.

Also, if you used the same header tutorial as I did, your top widget might align funny. I've actually never had that happen until this particular blog design and it caused me a lot of grief. If your navigation bar is way off on the right, add this code to the CSS section of your template designer-

#HTML1 {
   margin-left: -70px;

HTML1 - input your widget ID.

In order to figure out your widget ID, go to your layout out and click "edit" on the widget.

You can find the widget ID at the end of the URL in the box. This particular example is HTML2.

-70 - you may need to mess with this number a bit in order to get your navigation to align properly. Smaller moves it left, larger moves it right (keep in mind that it's a negative number).


  1. Kayla, this is brilliant: thank you so much!! I have pinned it so I can come back to it when I need it (which'll be soon)!

    Catherine x

  2. I just did this on my blog and I LOVE it!!!!!! Thank you so much for making such a clear, cohesive tutorial for something that I thought was way beyond me!

    P.S. just in case you wanted to see....


Thanks for your comment!

Any trolls will be dragged into the trees and beaten soundly.

Related Posts Plugin for WordPress, Blogger...