Replacing Blogger header with an image map

An image map is a single image that has multiple clickable areas and each area is linked to a different destination web page.

One of the more popular applications of image map is to use it as a website or blog header. Having image map as a header eliminates the need for a separate top menu bar or Pages gadget for navigation since your readers can navigate your blog right from the header!

Here an example of an image map, click to test:

In this tutorial we will show how to create an image map with ease -no coding knowledge required, and how to use it as a Blogger’s blog header.

I) Preparing your template

By default Blogger prevents you from removing the header widget or add any other widget into the header section. That has got to change otherwise you can’t put your image map in the header section. The following steps will allow you to add in the image map and remove the original header:

1. Go to Template > Edit HTML > Proceed.
2. Back up your template.
3. DO NOT check the  Expand Widget Templates check box on top right of the HTML window.
4. Look for the following lines in your HTML code:

   1	<b:section class='header' id='header' maxwidgets='1'showaddelement='no'>

   2	<b:widget id='Header1' locked='true'title='YOUR_BLOG_TITLE (Header)' type='Header'/>

5. Change maxwidgets to 2, showaddelement to yes, and locked tofalse., like so:

   1	<b:section class='header' id='header' maxwidgets='2'showaddelement='yes'>

   2	<b:widget id='Header1' locked='false'title='YOUR_BLOG_TITLE (Header)' type='Header'/>

The above changes will add a new Add A Gadget link in the header section on your Layout page. It will also add a Remove button in the Configure Header page.

II) Creating image map

The easiest method of mapping your picture is by using an online tool available at www.image-maps.com.

1. Create your image. Make sure you have the correct size because you will not be able to resize it after the image is mapped.
2. Upload your image using Blogger post editor and get the URL of the image.
3. Go to www.image-maps.com and and enter the image URL into the “From a URL” text box and hit the “Start Mapping Your Image” button.
4. Click “continue to next step”. The image will appear on the left of the screen and the mapping tools sidebar will appear on the right.
5. Start mapping out your links onto the image using your preferred shapes -one link at a time until all links are mapped. Follow the directions provided in the sidebar, it is easy.
6. Look under the image and notice the mapped links appear under the image. You want to remove them by unchecking the Show Text Links checkbox located under Advance Tool Box in the sidebar.
7. Click Get Your Code button. The code you want is under the HTML Codetab. Right-click inside the code field, Select All and copy.

The next step is to add the code to your blog.

III) Adding and testing the image map

1. Go to Layout page, click  the Add A Gadget link in the header section and select HTML/Javascript gadget.
2. Leave the title blank. Paste the image map code into the content field and hitSave.
3. View your blog. You should see two headers: the image map and the original header below it.
4. Test the image-map. Make sure the links work as intended.

IV) Removing the original header

Once you are satisfied with the results, go back to Layout, click Edit on the header widget and finally click the Remove button.

That’s it, now you have an image map for a header. Enjoy!