Menu dentro da Imagem

Oi meninas! Hoje vou ensinar como fazer um menu personalizado, dentro da imagem, tipo o meu aqui do CottonCandy. O bom é que você pode personalizar com a sua cara, do seu jeitinho. Eu aprendi esse tutorial no blog Cherry Bomb. A primeira coisa que você tem que fazer é a imagem do seu cabeçalho com o menu dentro.

Fiz um exemplo para vocês entenderem:

Vamos Aprender ? Então clique em Leia Mais...

Agora você deve deletar o seu cabeçalho original no HTML do seu blog.

Para isto abra o HTML do seu blog, abra a caixa de busca (Ctrl+F) e procure por:

Header1

Você vai achar o seguinte código/ou parecido:

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

Apague tudo isso, e note que o seu cabeçalho sumirá!

Agora vamos para a próxima etapa, Mapear a Imagem.

Abra o site www.image-maps.com

Você vai colocar a URL da sua imagem que você fez ! Caso a imagem ainda nao está hospedada, hospede-a, eu uso este site para hospedar minhas imagens >  www.tinypic.com 

Após hospedá-la, (se você usou o site que eu uso) pegue o link da última caixinha que está escrito> Direct Link for Layouts.

Com o site de mapeamento aberto ponha a URL no local devido, observe a imagem:

 Quando sua imagem carregar, clique no botão RECTANGLE

Na lateral do site, e faça um retângulo em volta da onde você quer que seja um link, olha o exemplo:

 

 

Quando terminar de Mapear todos os links, clique em Get Your Code

Vai abrir uma página e você clica na aba HTML CODE

Vai ser gerado um código e você seleciona até </map> e copia. 

 Entre no seu painel do Blogger, na aba Design> E adiciona um Gadget:

HTML/JAVASCRIPT

Cole o código que você copiou e no final acrescente :

</div>

Para fechar o seu código!

Salve o Gadget, e coloque ele no topo. Salve as modificações, e visualize seu novo menu com imagem !!!