Add Images to your Navigation Bar

Sometimes it's the little things we don't think much of that can make a blog pop. A well-designed banner can tell your visitors in a single glance what your blog is about or show that you have a funky, fun, or romantic personality. A simple, clean layout can showcase your post content by allowing it to speak for itself without the distraction of other items fighting for visibility. Beautiful photographs can catch the eye, compelling visitors to stay a while to appreciate the hard work that went into them.

That much-requested horizontal navigation bar, which sits between your banner and post content, is loaded with potential. Since the navigation bar is a new feature, you may not have thought much about how you can spruce it up. "It's just a list of links," you say. "Let it just do its job," you plead. To which I have to ask, "what if it could do more for you?"

By creating some simple images and adding them to the navigation bar, those links suddenly stand out more and will attract the attention of your readers. Your visitors’ eyes will be drawn to where you want them to look. Then the navigation bar becomes more than just a list of links - it becomes a design element.

Interested in doing this on your own blog? Great!

Here are the steps to get you started:

1. Create, or commission someone to create, some fantastic images for your navigation.
2. Upload them to your File Manager at Control Panel > Files (we recommend clicking on your blog's folder name and uploading there in case you want to repeat this for your other blogs!)
3. Click on the filename of your images, one-by-one, and copy the URL of each image. (Save these URLs because you'll need them later!)
4. Go to Weblogs > Design > Content, and make sure the module box for "navigation bar" is checked.
5. Click on the pencil icon in the same module box. A pop-up window will appear.
6. Where it says "Home" in the #1 position beneath "Title", delete the text and type in:
   
   <img src="">
   
   
7. Between the two quotation marks, paste in the URL for the "Home" image you created. The "Title" field will now look similar to:
   
   <img src="https://example.typepad.com/blog/home.jpg">
   
   
8. Verify that the URL that is in the URL field to the right of your "Home" image code is correct. If it's not, correct it. For example, I would use:
   
   http://example.typepad.com/blog
   
   >
9. Repeat the process for the remaining navigation bar images you want to add. It'll look like:
   
   
   
   
   
   
10. Save your changes on the pop-up, then again on the Content screen.

The only step left is to reload your blog and enjoy the work you put into sprucing up your navigation bar!

Comments

[David Saunders]

That is really nice! I'm actually hopeless at design - I stopped in 97.

I'm still looking for someone to "fluff up" my blog like this!

David

http://www.joetheseo.com

http://www.hiphooray.com

[Lance Eh.]

Great new feature. Thanks.

[Account Deleted]

This is good. But I wish you could come up with better features such as adding images under the header/banner , like sidebar items, putting Adsense text ads ----as Adsense is maximized through above-the-fold placement. Here in Typepad, we can't do that here, except probably for those who know HTML that can create their own layouts.

[Johnny Moyles]

I got most of that right but I loaded a jpg image, and while the link that I put in works, the image does not display.

Does image need to be of a certain format?

[Trevor Wilcox]

How do I change the target of a hyperlink in Typepad?

I have some external links which I would prefer to open in a new window rather than in itself. Not sure how to go about that with typepad's navigation configuration panel.

[Account Deleted]

Same problem, here. Can anyone help us out?

[Bri]

Hi Johnny!

The image(s) needs to be either GIF, JPG or PNG files. Are either of these what you're using?

Are you still having trouble with this? If so, please feel free to open a support ticket and we can work one-on-one with you.

[Bri]

Hi there!

Thanks for letting us know you're experiencing this issue too. What type of image(s) are you using? PNG, GIF, or JPG? Are you uploading them into your File Manager?

If you're still experiencing this issue, please feel free to open a ticket and we can work one-on-one with you.

[Ginevra]

hi trevor! my apologies that we didn't get back to this question - you can do this in a few ways - but curiously, are you trying to do this in a post, or in the navigation bar? (tech support can also help you with this if you open up a ticket with them - it's a much faster way to get these sortsa questions answered!)

[Michele Bailey-Lessirard]

Thanks for the tip, I've been trying to figure out how to do this, and wow it's so simple.

[Kate]

LOVE this! Thank you for posting!! Am working on a new design and will be using this tip.