28 [Tutorial] - Link dentro do banner (cabeçalho)!!

Graças a uma dúvida da Camille,leitora fiel aqui do blog,decidi fazer esse post para responder a uma dúvida que muitos de vocês devem ter. Eu mesma demorei pra achar a resposta também...=*

A imagem da header (cabeçalho) com links inseridos dentro dela (também chamado 'Mapeamento de Imagem') dá uma aspecto mais profissional ao blog,e economiza espaço já que você não precisa usar o espaço da sidebar ou acima dos posts para colocar os links do menu. Além disso,a pessoa que estiver visitando seu blog pela primeira vez não vai se sentir perdida na hora de 'explorar' seu cantinho. Resumindo: é uma aposta super útil para o seu layout,e é mais fácil de se fazer do que parece!

Sem mais,vamos ao tutorial:



1º Crie uma imagem,de sua preferência,com o texto do menu já em seu devido lugar. Exemplo:

2º Abra o site Image Maps. É nele que vamos 'trabalhar' okay?!

3º Escolha uma imagem do seu computador (From your pc) ou de um link externo (From a URL) para mapear. Depois,clique em "Start Mapping Your Image".

4º Na página que abrir,clique em: 

5º Irá abrir a página de mapeamento,que é assim:

1 - Rectangle ~ Você cria um retângulo,onde irá colocar o link para o 'pedaçinho' de imagem.
2 - Custom Shape ~ Você cria uma forma customizada,onde colocará o link,assim como na forma do retângulo. Não é indicado para os iniciantes! Indico sempre o uso do retângulo,que é bem mais fácil de se entender...

Nas configurações que aparecem abaixo,você não precisa fazer nada,mas tenha certeza de desmarcar a opção 'Show Text Links',que é importantíssimo fazer!

6º Clicando em 'Rectangle',vamos começar a mapear a imagem:

 Você poderá aumentar e diminuir esse quadradinho que aparece,e deverá colocar o endereço que você quer que seja clicável quando passar o mouse sobre o 'pedacinho' da imagem com o retângulo em cima.
Caso tenha alguma dúvida se o link escolhido é o certo,clique em 'Test Link' e veja se a página correspondente vai abrir.
Na parte 'Title/Alt for this map:',você poderá deixar em branco.
Não se esqueça de clicar em 'Save',e se quiser excluir o retângulo para criar alguma outra forma,clique em 'Cancel'.

7º A imagem,totalmente mapeada,deverá ficar assim:

Aí você deve clicar em 

8º Na página que aparecer,clique em 'HTML Code'. Você vai ver essa página:

Copie TODO o código,e agora vem um segundo tutorial pra ensinar vocês a colocarem no lugar do cabeçalho padrão estabelecido pelo Blogger...

Vá em Modelo > Editar HTML > Prosseguir.
Clique em 'Expandir Modelos de Widgets',e dê um Ctrl+F para abrir a caixinha de busca do seu navegador. Procure por <b:widget id='Header1' locked='true' e mude o "locked='true'" para "locked='false'". Isso dará a opção de excluir o cabeçalho padrão do Blogger,que no modo 'true',não é possível!
Vá no layout do Blogger e exclua o cabeçalho,deixando a header 'vazia',e após isso volte à edição do HTML.
Lembra do código que você copiou no 8º passo do tutorial?? Pois é,agora você vai precisar copiar ele e colar logo abaixo do <header>. Caso tenha dificuldade para achar o <header> no código,vá ao Ctrl+ F de novo!
Após tudo isso,clique em Visualizar, e se estiver tudo certinho,clique em Salvar Modelo!

Prontiinho! Seu cabeçalho está devidamente mapeado! Haháá...\Õ/

Galera,sorry pelo post imeenso! Mas se tratando de um tutorial,não dá pra fazer um post pequeno,porque fica super mal explicado...e eu espero ter conseguido explicar direitinho pra vocês. Na prática isso tudo é mais fácil do que a teoria aparenta...rsrsrs
Enfim,espero ter ajudado a Camile e todas as leitoras que também tem essa dificuldade!