Menu dentro da imagem do cabeçalho do blog

Oi meninas, sabe aquele menu dentro do cabeçalho que todas nós quando vimos queriamos aprender? pronto eu trouxe o tutorial .. é super fácil e só tem que seguir o tutorial que termina rápidermo, vamos ao tutorial, estou morrendo de sono (risos) daqui a pouco minha mãe vem falar algo! o tutorial eu aprendi lá no Cherry Bomb então os créditos vão para lá, agora vamos ao tutorial, clique em leia mais para ver o tutorial.

cliquem para ampliar mais 

cuidado o cabeçalho é meu viu? não peguem!

Pronto agora que viram o exemplo, vamos continua o tutorial, mais antes de tudo vocês fizeram o cabeçalho dentro da imagem , se ainda não fizeram, é só fazer e colocar os nomes das páginas! 

Antes de tudo vocês tem que tirar o cabeçalho, mais para isso tem que ir no HTML do blog de vocês!

vá em Designer > Editar HTML e procure por Header1, depois de achar apague algo parecido com isso:

<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/>

 então apague, e seu cabeçalho irá sumir!

Agora vamos ao mapeamento da imagem do cabeçalho, primeiro entre neste site aqui http://www.image-maps.com/ , lá tem duas opções ''upload da imagem e link da imagem'' eu uso o fazer o upload da imagem acho melhor, mais se vocês não quiseram então coloquem o link da imagem já hospedada, podem até postar a imagem no blog de vocês e pegar o link.

Coloquem a Url da imagem, pois o Image Maps ele armazena por um certo tempo, depois a imagem é excluída para dá espaço para outras, então façam upload dela lá no blog de vocês e depois abram em outra guia a imagem e peguem a url.

Quando sua imagem for carregada, procure na Lateral do site o nome  , e então vá fazendo um retângulo como na imagem abaixo, e colocando o link da página que irá abrir.

clique para ampliar.

Onde tem, Title/Alt for this map: coloquem algo que vocês querem que apareçam nas opção do menu quando colocar o cursor encima .

Quando fizer isso com todos os links do menu cliquem em SAVE, e cliquem em   , e na guia vai ter lá encima o nome HTML code, cliquem nele e vai aparecer um código então pegue ele e copie 

Agora vá no blogger e adicione um HTML javascript e cole, depois arraste o gadget pra o topo do blog onde ficava o cabeçalho, depois clique em salvar lá encima e pronto agora você está com o menu dentro do cabeçalho, que fica muito mais lindo!

Vocês podem usar o image maps para fazer vários outros mapeamentos, usem sua criatividade, espero que tenha dado certo pra vocês... conseguiu? se sim comenta aqui, e se não me peça ajuda e eu vou te ajudar! beijos até o próximo post *-*