Tutorial:Menu no cabeçalho(mapeando imagem)

Tumblr_llf0zry3kx1qhkx1mo1_500_large_large 
Oiee gente,hoje eu vim postar pra vocês como colocar o "menu" no cabeçalho,usando o mapeamento de imagens:
Muitos blogs já adotaram isso,e eu acho muito legal,muito obrigada ao Cherry Bomb! pelo tutorial vamos lá,clique em Leia Mais para ver o tutorial↓
Antes de tudo, você deve ter feito a imagem de cabeçalho com o menu dentro, é só fazer seu cabeçalho e colocar os títulos das páginas em algum lugar.

Agora você tem que deletar o cabeçalho original do blog pelo HTML. Não esqueça de salvar uma cópia do seu modelo antes caso algo dê errado.

Vá no HTML do seu blog, aperte Ctrl+F e procure por Header1

Você deverá achar algo parecido com isso: <b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/>

Apague essa parte e salve. Note que seu cabeçalho vai sumir.

Agora vamos ao mapeamento da imagem. Já ensinei como mapear pelo paint aqui no blog, mas se você quiser algo mais rápido entre nesse site: www.image-maps.com

Lá tem a opção de fazer upload da imagem, mas eles não hospedam ela. Você deve hospedar a imagem em outro site como o www.tinypic.com e depois colar a url dela lá no site. Veja o print:

a

Depois que sua imagem for carregada, clique no botão image  na lateral do site e faça um retângulo em volta de onde você quer por um link. Veja o exemplo:


Depois é só clicar em save. Faça isso em todos os links do menu. Quando terminar, clique em: , depois clique na guia HTML Code.
Selecione o código só até </map>  e copie.
image

Vá no blogger > Design e adicione um gadget de HTML/Javascript. Cole o código do gadget e depois do fim do código, coloque a tag </div> para fechar o código.

Salve o gadget e arraste ele para o topo do blog. Depois clique em Salvar lá em cima, e seu cabeçalho com menu está pronto!
imageEspero que gostem.


9 comentários:

  1. Oiee querida,até que enfim um comentário EBAAA,sim,fui que fiz o design do blog,e claro posso fazer um pra você se quiser*-*
    Bjos

    ResponderExcluir
  2. oooi bonita!

    fazia um tempinho que não passava aqui D:
    sorry !

    como sempre, SEMPRE anoto suas dicas no meu word hushushuahsuhuhaus adooooro elas!

    beijos bonita

    ResponderExcluir
  3. faz um favorzinho????
    segue meu blog????não tenho seguidores mais ja tenho post.então segue???e quem quiser tambem pode seguir por favor.
    http://diaryofteenagers.blogspot.com/

    ResponderExcluir
  4. oii gabi, eu tenho um blog, meu design é seu até (dos prontos) mas vc me ajuda a fazer um novoo? *-*) jáh to te seguindo, seguee de volta, beijinhoss !!! :)

    ResponderExcluir
  5. Não é possivel apagar, querida, ele dsiz que tem um erro D:

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir

Muito obrigada pela visita*--*
Siga e deixa o seu link que seguirei de volta^^
Ah e me sigam pelo Twitter também,sigo todos de volta.
Twitter:@heeysmile
Volte sempre!
Beijoos Gabriela