Blogger DIY: Clickable Links In Header

So here's another cool blogger trick I recently learned. Making clickable images in my blogger header. I always thought it was some incredibly difficult css piece I had to put into the template.  But it wasn't!.  It was so super simple.

First off, I learned this from Miss Pickle.  Yup, I'm a big pickle fan now.  Love my template, love how easy it was to customize, love her! It's 3 part of a   video design series.  She teaches how to first design you header and all the neat things PS has.  I unfortunately do not have PS I have Paint.net, a free editing program.  Which in my mind has some pretty cool things too.

I'm going to assume you already have a header with images you'd like to be clickable.  If not, here's some places that offer "freebies".
www.justsoscrappytoo.com
http://www.scrapbook-papers-and-more.com/
http://misspicklesdesignstudio.com/

CLICK ON ANY IMAGE TO ENLARGE IT

This is my header:

I wanted the tabs and social icons linked.

After uploading your image to photobucket, or your favorite place, grab the direct link and go to http://www.image-maps.com/.  Insert link and wait for it to load. There you will find an easy walk through to link all those images in your header.

When your done look it over, test the links, add titles if you'd like {adding titles will display text when the mouse is over the image} and I unchecked the box that added "text links".  Thats the reason I want my header clickable!  So I don't have those text links under it!

Click To Enlarge

OK so everything good?  Great!  Click get your code.

On the next screen you want to click on "HTML"

Copy the whole code and head back to blogger "layout".

You'll want to "add gadget" then "html/css"  drop your image map code in there and move your gadget to under your original header.

Save.  Now don't worry if you have 2 headers.  We're going to delete the original.  But first I want to make sure you have an extra space uptop do put that gadget in.  If you find that your unable to move the image map gadget to right under your header, don't fret.  Go to the html editing part of blogger template and find this code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

You want to change the maxwidgets='1' 


Change it to '2'. Click save. Now go back to your layout page and you should be able to drag your gadget to under the header now.

OK we still have to get rid of your original.

Go back into the html editing of your template.  And find this:

#header-wrapper {
background: url(yourheadersdirecturl.com); transparent;

Just delete the direct link that's underlined.  If by chance you imported your header using the gadget method in layout like this:

Just click to remove that from your gadget.  Then go back to the editing html template and find

#header .description {

and

#header h1 {

and enter this under it

display:none;

 Otherwise you'll have blogger display your title and description in text form.

That's it!  Simple as a pimple!  You now have a header people can click on! 

**Please remember to download your template before any changes, that way if you mess up you can revert back.

I love finding tricks to make blogger more fun, I'm constantly searching and trying things out.  And passing on the know how ♥  I only pass on what I have done myself and know to be true, so don't worry if you follow exactly what I write then you can't go wrong. :)