Monday, August 29, 2011

How to create a clickable header in Blogger

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'/>
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!


Stephanie of Gumdrop Pass said...

AHHH, THANK YOU. I've been wanting to figure this out for awhile - and you've been so kind to share! I'll have to do this when I get some free time! :)

Self Sagacity said...

Nice post today. Many folks could benefit from reading.

LisaWeidknecht said...

Awesome tutorial!!! Stumbled you.

Kristen said...

Stumbled this post.

I would love to read a post explaining how to make labels like you have at the top of your page. Right now in Blogger, all I have are pages with links to my posts on my main page.