How to create a clickable header in Blogger

Tweet

Tutorial: If you would like your header image clickable, in lieu of the standard Blogger header with your links either on a sidebar, or below the header, just follow these simple instructions!

1. Create your image
I use a program called Gimp for all of my photo editing, and this is comparable to Photoshop, but FREE!

You can download the program HERE

2. Create an image map
An image map is a short html code that provides coordinates of an image, and links to those coordinates, rather than to the entire image. There is a service that automates this for you, (free) HERE. You will need to host your image on your own server, or photobucket, and replace the image url in the code with your own once completed.

3. Add an html gadget to your site 

Click on "Add a gadget" along the top of your design section, and choose "html".




Copy the code for your image map here, with NO TITLE, and save.

4. Remove the Blogger Header

Go to "edit html" under design, and Save your template before you begin any work! If you mess up your blog, you can use the saved version. Next, using ctrl +F, or Apple +F to bring up the search bar, find this snippet of code in your page: "header-wrapper" Your code might look like this:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='my family (Header)' type='Header'/>
</b:section>
    </div> 

Delete this entire piece of code, and you will get a warning:

Choose to "Delete Widgets", save your template, and you're done!
Check out your page, with your new clickable header!

If this doesn't work for you, feel free to email me at cindy(at)cute-ecakes(dot)com, and I will be glad to help you out!