Wednesday, June 19, 2013

How to make a clickable header a.k.a. Image Map


If you’re thinking about making your header clickable and linking to different places then you probably already have a design in mind.

Make a header with whatever software you have. It doesn’t matter if you want different pictures to be clickable or just words or even just different parts of the same picture (for example if you have seven birds in your header). You can use Photoshop, Paint or even PicMonkey. Or you can draw it / paint it yourself and just scan it to your computer.

Make sure you re-size the picture to your blog requirements. Mine is width="960" height="200"

Now we’re getting to the technical part.

1. FIX THE TEMPLATE
First you need to enable adding widgets in your header. As it is now by default, you can only have one header widget and you cannot replace it with an image map.
  • Go to your Template > Edit HTML
  • Back up your template.
  • Search for 'header-wrapper' and find these lines:
Click the picture to see it bigger
  • Change the following: maxwidgets to 2, showaddelement to yes and locked to false
It needs to look like this:
Click the picture to see it bigger

Go to Layout page and check to see if there is an additional widget there and a “Remove” button on the default header when you click "Edit".
  • To avoid uploading your header picture to third parties (web albums), use the default header widget to upload your new header picture and preview before you save. Use the right click of the mouse on your new header and select “Copy Image Location”.
2. MAP YOUR IMAGE
Now go to http://www.image-maps.com/
  • Paste the link you just required to the “From a URL” form and click “Start Mapping Your Image”.
Click the picture to see it bigger
  • When you get to this part first change the “Base URL” to your blog URL and click “Update”. This is so when you click on your header it will take you to your blog Home. And also unclick the “Show Text Links” unless you want your titles to show underneath the header. (as shown in picture one below this one)
Click the picture to see it bigger
  • Then use “Rectangle” or “Custom shape” to select areas on your picture to be clickable. Add the link to where you want this selection to link to and add title. Title shows when you hover your mouse over the area. 
  • Click “Test the Link” to see if it works. A separate tab should open at this point taking you to the URL that you linked.
  • Click “Save” and repeat as many times as you need your header selections to link to other places. When you’re all done click “Get Your Code”.
  • You are redirected to a page and look for the tabs on top. Click on the first one “HTML Output” and check if all selections are working properly.
Click the picture to see it bigger
  • Click “HTML Code” tab to get the code and go back to your blog layout.
3. ADD IMAGE MAP AS YOUR HEADER
  • Click on “Add a Gadget” on your header section and select HTML / Javascript gadget. Paste the code but leave the “Title” field blank.
  • When you view your blog you’ll see two headers. Test the image map to see if everything works fine. Go back to layout, click “Edit” on your default header and click remove so only the image map remains.
You can stop here because you have an awesome new clickable header. But if you’re bothered that the links open in the same tab and you would want them all or just some of them to open in a new tab, then follow the tip below.

4. OPEN LINKS IN SEPARATE TAB
  • Go to your blog Layout page and click “Edit” on your header widget. Look at the code and find the parts which you’d like to open in a new tab. Just look for the links like twitter, Facebook, Pinterest, e-mail, etc. and paste target='_blank'/ before the closing >. See below picture for reference.
Click the picture to see it bigger

Save everything and you’re done!



Share/Save/Bookmark

17 comments:

  1. Thanks so much Natasha! I had been wondering how you made that header ...

    ReplyDelete
  2. THANK you so much for the tutorial - gonna have to try that!!

    ReplyDelete
  3. Thanks for the great explanations, I have saved it so I can have a try when I feel brave enough! Valerie

    ReplyDelete
  4. Thank you!! This is so useful, I have saved it to look at later.

    ReplyDelete
  5. Good Grief, Natasha May! You are so knowledgeable in so many areas of this techie world. You amaze me. I simply don't have the patience, and frankly I would much rather have someone else do it for me. Have you thought about setting up blogs for other people? You would be so good at it. I just had a really good look around all the information you have in your area and it's awesome. You do have a wonderful giving spirit and it is appreciated by all who some here. Thank you for being who you are - I am so pleased to have met you in blog land. xoDonna

    ReplyDelete
  6. krasno, moram si vzeti čas in malo naštudirati ;)
    HVALA TI!

    ReplyDelete
  7. so kind of you to share this info.
    yours is awesome!

    ReplyDelete
  8. fab that you share it - great to know how to do this!
    Thank you!

    xxx Susi

    ReplyDelete
  9. Great tutorial Natasha, thanks for sharing:)

    ReplyDelete
  10. Very kind of you Natasha ;o) Thank you ;o)

    ReplyDelete
  11. Thank you for the post. For some reason it does not work on my blog. Only the old image header shows and the new html doesn't.

    ReplyDelete
  12. Thanks a bunch. Easy step by step instructions, just what I needed! :-)

    ReplyDelete
  13. Hi! There is no such thing as a "header-wrapper" in my html. what should I do then?

    ReplyDelete
  14. I just completed my clickable header. I saw several tutorials that had the same information but you explained it so much better and the photos were helpful. Thanks

    ReplyDelete
  15. Hi I have done this a few different ways but none work on the mobile view? is there any more I can do?

    ReplyDelete
  16. This is brilliant. There are a few changes that have happened to Blogger since your article was original published. Instead of "header-wrapper" I found "header", "header-inner", "header-outer", and "titlewrapper". Just look for the "maxwidgets" in this area and keep working. Thanks much for your work.

    ReplyDelete
  17. This is brilliant. There are a few changes that have happened to Blogger since your article was original published. Instead of "header-wrapper" I found "header", "header-inner", "header-outer", and "titlewrapper". Just look for the "maxwidgets" in this area and keep working. Thanks much for your work.

    ReplyDelete

Popular Posts

 
Go To Top