Add Images to your Navigation Bar

June 22, 2009

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="http://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 powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.