03 dezembro 2011

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 *-*

Comentários
8 Comentários

8 comentários:

  1. Muito complicado. Não consigo fazer. Não sou boa em mexer em html de blog.
    De Princesa ♥ Para Princesa

    ResponderExcluir
  2. Oi Flor, eu não entendi o comentario q vc postou no meu blog -> "Voto não! só por um motivo, você foi no meu blog, nem pra comentar antes sobre o post e tal, foi logo dizendo: VOTE NO FLASH TEEN POR FAVOR!! http://teenscupcake.blogspot.com/2011/12/inscricoes-encerradas-votacoes.html"

    ResponderExcluir
  3. Flor, você tem todos os requisitos, seu blog é lindo e tudo mais, só que no momento estou sem vagas!
    Em breve vou fazer um novo design e mudar os afiliados, e se tiver vagas, eu faço um post e ai vc pede de novo, ok? Ai eu com certeza aceito
    Desculpe novamente, mas é as vagas mesmo...
    Bjjos
    blogloucamistura.blogspot.com

    ResponderExcluir
  4. Oiii!
    eu estava procurando esse tutorial faz um tempão, você ajudou muito!!!
    Seu blog é muito lindo, eu adoro ele!!! Já estou seguindo!!
    Segue o meu também!
    Mil beijos,
    Biah.

    beatriz-pg.blogspot.com

    ResponderExcluir
  5. Oii Duda!!
    Brigada por seguir meu blog!!
    Eu vou usar esse tutorial no meu próximo layout (o layout de Natal)!!!
    Brigada de novo por seguir meu blog!!! *-*
    Mil beijos,
    Biah.

    beatriz-pg.blogspot.com

    ResponderExcluir
  6. Que legal que fica , este jeito é bem mais prático néa ?

    Beijos.
    http://amazingmoda.blogspot.com/

    ResponderExcluir
  7. Ah obrigada pela visita querida :D

    Beijos.
    http://amazingmoda.blogspot.com/

    ResponderExcluir
  8. Anw linda , obrigada pelo elogio ♥
    Aqui ta perfeito !

    Beijos.
    http://amazingmoda.blogspot.com/

    ResponderExcluir

- Fique a vontade para comentar, mas seja sempre educado(a)
- Seu comentário precisa ser relacionado com o assunto do post, caso não seja use a Cbox AQUI :)
- Não falar palavrões e não ficar criticando.
- Se for dar sugestões que seja para a melhoria do blog.
- Quer Parceria? então siga meu blog e coloque meu banner e me avise.
- Deixe a URL do seu blog para que eu possa retribuir.
- Não precisa pedir pra seguir que eu vou.
- ah e Não participo de concursos,e tags NÃO INSISTA!