Blog Tutorial - Changing Header With An Image Map

Changing Blogger Header With An Image Map - An image map is a single image with multiple clickable areas where generally each area is linked to a different page/destination, the "owner" sets where each area's linked to. By changing your header with an image map you won't need to have menu bar anylonger since the image map itself can be a navigation for your readers. Here i'm going to tell you how to create an image map. It's so realy easy and you don't even need to have knowledge about coding to make it, yet you have to do something with your template code. Here we go..

1. Go to your blogger.
2. Go to design.
3. Edit Html.
4. Back up your template.
5. Find the following code in your template:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your_Blog_Title (Header)' type='Header'/>

6. Just change the value for "maxwidgets" to 2, "showaddelement" to yes, and "locked" to false. Or just copypass the below:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Your_Blog_Title (Header)' type='Header'/>

By making the above, later you'll have a new "Add A Gadget" element on your header plus a "Remove" button where you could need it sometimes.

The purpose you make the above is to provide place for the image map you mean to create, while to create the image map itself, the easiest way that you may wanna take is by using an online tool, and here i suggest you www.image-maps.com. Read the below.

1. Create your image. Just make sure that the size of your image suits your header.
2. Upload your image and take the address (url). You may upload it everywhere as you want, but i myself would upload it to blogger, for i'm a Blogger.
3. Go to www.image-maps.com and type in your image URL in the "From a URL" (it's a text box) and then hit the "Start Mapping Your Image" button.
4. Click "continue to next step" and you'll find your image appears on the left side along with the mapping tools sidebar, on the right side.
5. Now start mapping out your links by following the directions provided in the sidebar. Piece a cake.
6. Click "Get Your Code" button to get the code to place on your blog.
7. Now go back to your Blogger and get on the "Design" tab. Click Add A Gadget in the header section and select HTML/Javascript gadget.
8. Just leave the title blank and put the image map code you just got from image-maps.com in the box available and then click Save.

Now check your blog, you should find two headers on your page, the header with an image map you just created and the old one. Just test your image map to make sure that the links are working as intended. And if so, go back to your Design tab and then remove your old header from your page and you're done..