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
 |
| 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”.
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.
- 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.
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!
. The story has a nice pace and interesting twists. It was a really enjoyable read. The author had a nice way of world building but I didn't expect science vs. religion concept.
