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:

facebookmyspaceyoutubetwitterImage Map

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.
  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:
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='YOUR_BLOG_TITLE (Header)' type='Header'/>
  5. Change maxwidgets to 2, showaddelement to yes, and locked to false., like so:
    <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
    <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

  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 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 Code tab. 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 hit Save.
  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.


49 comments to "Replacing Blogger header with an image map"

Anonymous,  June 16, 2012 at 10:54 PM    

I Already Use this Site

Best Online Tool For Image Map Creating

Thanks Greenlava

Blogging Sentral June 17, 2012 at 9:55 AM    

very very useful article man!!
keep it up..

bhojpurigaane June 17, 2012 at 8:05 PM    

left side floating social sharing button is creating problem in reading your post (chrome browser). can you fix it please. it's irritating :(

srinath reddy June 17, 2012 at 8:49 PM    

cool article. really nice post. creating an image map is pretty cool. we can add more links to a single image. thank you for this post.

Rituparna sonowal June 18, 2012 at 12:20 AM    

Really nice article .. I really love your blog.. it is a very cool place to learn many things..

Swapan Das June 18, 2012 at 12:14 PM    

A great option indeed! Thanks for this tutorial, will keep in mind when I do any new project or enhancement to my present blog.Really was not aware of image-maps site.

GreenLava June 18, 2012 at 1:57 PM    

@techgod8, Blogging Sentral, srinath reddy, rituparna sonowal, Swapan Das
You're welcome guys.

It looks fine from here. I'm using Chrome 16.0.
What's your version and what is your pc's resolution?

Blogger Tools June 18, 2012 at 2:31 PM    

nice post. most of the blogger use text for their blog. I am designing an image for my blog header. when it will be final I will upload it to my blog.

hafizul June 19, 2012 at 1:14 AM    

i will be try..hehe

JLT Creative July 8, 2012 at 4:55 AM    

Thanks for sharing :)

Robert W. July 14, 2012 at 5:11 PM    

Thanks for the tutorial but how do I center the widget it's a little to the side.

rfw5 July 17, 2012 at 3:08 AM    

Nevermind, I went into Edit HTML and found some settings to tinker with :)

Geri August 9, 2012 at 8:36 AM    

Thanks for this - if I ever wanted to restore the header, how would I do that?

Greenlava August 10, 2012 at 1:11 AM    

Simply go to Layout, click Add A Gadget and select Page Header gadget.

Bonitiful August 23, 2012 at 3:49 AM    

Thanks so much for ALL the help here , omg , what would I do without your blog, When I'm finished organizing my blog I'll make sure I mention you there ALOT.
I'm a new blogger and was LOST untill I found your blog .

Mandy | Baking with Blondie September 8, 2012 at 1:18 AM    

Worked perfectly. thank you so much!

Unknown September 8, 2012 at 1:12 PM    

I got my image mapped ok and removed the original header image as it said, but now I have a dark blue (original template header area) above it. How can I remove that so it's JUST the image?


Greenlava September 9, 2012 at 1:47 PM    

@Shades of Safhire
From what I see you still haven't remove the original header.

Unknown September 17, 2012 at 11:46 AM    

Hi, I added the gadget bar above my configure header. I would like to keep my configure header. All I really wanted to do is to add 3 pictures at the top of the page that I could keep changing. See This is not my website but this is how I would like mine to look. I am totally lost on mapping my image. I hope you can help! Thanks

Anonymous,  September 19, 2012 at 9:22 AM    

Good evening, I was wondering if you could guide me a little further on this post. I am not at all computer savvy but I did manage to change the html and add a gadget. But what I really want are 3 gadgets on the top of my page of pictures (3)going straight across above my website name exactly how this website looks.
How did she do this? And I would like to be able to change the pictures whenever I need. Thank you in advance for your help.

megan {homemade ginger} September 20, 2012 at 8:06 AM    

this might be a dumb question, but there is no "remove" button on my header gadget. I don't know how to get rid of it.

Greenlava September 20, 2012 at 10:48 PM    

@Wendy Renton
What you want to do is replace the header with 3 horizontally-aligned Picture gadgets.
Use the following tutorial as guide:
Adding widgets on both sides of Blogger header

Greenlava September 20, 2012 at 10:59 PM    

@megan {homemade ginger}
It should be there if you do step I) correctly.

Jennie October 16, 2012 at 2:40 PM    

Hello, I made my header and image map but it is slightly off to the right. Can you help me fix this? I am using the simple template

hawwa October 16, 2012 at 9:13 PM    

I can't find the html code...what do I do?!

hawwa October 16, 2012 at 9:26 PM    

**update** I found it, changed it and tried to add a html code to the top as I used a rollover code to make my header and it says that the photobucket images have been moved or deleted when they haven't..what do I do?

Greenlava October 17, 2012 at 7:46 PM    

@Jennie Newsome
What is your blog URL?

@(EbonyBlackLines)(Once Upon A Fairytale)
Perhaps the image URLs are wrong.

Unknown November 1, 2012 at 10:29 PM    

Greenlava, thx m8 ;)

I got this to work... on the 1st try!
awesome stuff!

if you want links to open in new tabks add target='_blank'
after the links

greets xD November 17, 2012 at 2:29 AM    

Thanks for the tutorial brother........

Anonymous,  November 17, 2012 at 7:27 PM    

you rocks i am Egyptian guy and i have searched alot to get to this point ,,,thanks alot

Spicecheck November 19, 2012 at 7:56 PM    

This is nice I have Bookmarked this page and will try today.

Anonymous,  December 12, 2012 at 6:32 AM    

ah this was sooo helpful thankyou so much!!

missy,  December 14, 2012 at 7:53 AM    

YOU. Are awesome. :)

Blanca December 16, 2012 at 7:17 AM    

Hi Greenlava, thank you very much for this, i also tried and although it has worked, the image is to the right, as Jenny's above do you know how I can centre it?

page is

thank you

Anonymous,  December 16, 2012 at 7:13 PM    

Hi Greenlava, I'm having the same issue as Jenny was above, blog is and I believe I have followed the instructions correctly but the header is showing to the right, I have tried messing with div's and centers but to no avail, can you see anything i'm doing incorrectly?

thank you

BillnotBob January 1, 2013 at 5:47 AM is phenomenal. Thanks so much for sharing this valuable resource!

And, Greenlava, excellent instructions... very easy to understand for a non-techie like me!

Unknown January 18, 2013 at 5:40 AM    

awesome tutorial...used it....and now I'm trying to figure out how to put the header BACK IN on one I originally took out.....any help available there?

Greenlava January 18, 2013 at 7:42 PM    

@Melanie LaDue
Go to Layout and remove the HTML/Javascript gadget containing the image map. Then click Add A Gadget.
On the Add A gadget page, click the "next>>" link on top right corner to go to the second page. Finally select "Page Header" gadget.

Unknown January 19, 2013 at 11:59 AM    

you ROCK! Thank you so much...I never thought to go to the second page....and was stuck there! Thanks!

Michelle Marino February 25, 2013 at 5:18 AM    

Hey I am having the same troubles with the new html/java header showwing off to the right , whats the fix to center it ? (tried doing and ) neither helped ...does this need to be adjusted in the template? TIA

This is the first of like 20 sites Ive read on this subject that I could actually follow and understand !!

Anonymous,  February 26, 2013 at 9:53 AM    

you are star.....for this simple thing i struggled many days and found your post today....thanks a ton

Greenlava February 26, 2013 at 10:15 PM    

@Michelle Marino
It looks like you've fixed it.
Anyway the reason the image map shifted to the right was you added the widget in the tabs section, instead of the header section. Tabs section has 35px margin on both sides, which makes your widget width smaller than the image map, thus causing the shift.
You can undo the shift by dragging the widget into the header section.

Chlo ODonnell April 4, 2013 at 4:03 AM    

Absolutely useful and efficient. Thank-you so much! I'm about to write a blog and I'm referencing your website! Thanks again :-)

Unknown April 9, 2013 at 2:06 AM    

I'm also having an issue with the header not being flush-left, so it doesn't line up with my nav bar. How were other bloggers with this issue able to resolve it?

Bailey July 6, 2013 at 12:30 PM    

Thank you SO much! This worked wonderfully and has made my recent blog redesign look amazing :D

JN July 12, 2013 at 4:49 PM    

great tutorial, thanks! sure i will read some of your tips and tricks :)

Barbara August 12, 2013 at 12:34 PM    

thank you! This is the BEST!

Bethany September 2, 2013 at 11:55 AM    

For those that are having trouble getting the header to line up, this is what I did. In the code generated by, change this code:

<div style="text-align:center; width:1000px; margin-left:auto; margin-right:auto;"

to this:

<div style="text-align:center; width:1000px; margin-left:-30px; margin-right:auto;"

I've noticed that removing the Blogger header widget removes the header from the mobile version. Is there any way to make a header for the mobile site? Or change your code to use the Blogger provided header widget for mobile site only?

Unknown December 8, 2013 at 2:28 AM    

Thank you SO much!!!! This was exactly what I was looking for!!!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.