Colocando Cabeçalho Mapeado no Blog

6.9.12

Tumblr_m9y5ktkyha1qhxs5oo1_500_large  

Oi gente! Depois que eu mudei o meu layout para esse tema agora atual, algumas pessoas na minha ask e no meu e-mail perguntaram como eu fiz esse cabeçalho diferente. Todo mundo percebeu que ele é mapeado, ou seja, é uma imagem com links. Hoje eu vou ensinar vocês a mapearem um cabeçalho e colocá-lo no blog. Espero que gostem fiz com todo carinho !

Primeiro passo :

Faça um cabeçalho normal, só que com o lugar que você quer que fique clicável. Pra ficar mais fácil, faça com um menu do seu jeito do seu gosto. Se não sabe fazer cabeçalho ou quer aprender alguns truques clique aqui.

Segundo passo :

Hospede sua imagem em algum site. Pode ser o We heart, Aquele lá que tem um sapo que eu esqueci o nome kkk ou até mesmo num blog de testes. Para hospedar a imagem em um blog de testes é só criar uma nova postagem e adicionar uma imagem e fazer o Upload dela. Depois disso é publicar a postagem e clicar com o botão direito na imagem e copiar " Url da Imagem "(ou semelhante).

Guarde a URL da imagem porque iremos usá-la em seguida. Pra facilitar cole no Word.

Terceiro passo : Mapeamento

Vamos mapear agora nosso cabeçalho! Vamos deixar ele com o efeito clicável kkk

1 -Vá até o site Image Map Tool e cole a URL da sua imagem no local indicado. Depois clique no botão como na imagem abaixo:


2- Após clicar em" Mapping Your Image" o site vai carregar sua imagem e em seguida apos o carregamento irá aparecer uma página como esta abaixo. Significa que sua imagem já foi carregada e pronta para ser mapeada. Então clica em " continue to next step " ;

Não copie o cabeçalho por favor gente! Sejam criativos e façam o de voces proprios!
 3- Agora chegou a parte do mapeamento ( finalmente né Gessy kk ). Antes de tudo vamos desmarcar todas as caixinhas marcadas (como na imagem)  e clicar em "Rectangle" .

É importante sempre desmarcar essas caixinhas, se elas voltarem a ficae marcadas, desmarque porque senão dá erro!  

4- Após clicar em Rectangle, vai aparecer um retangulo onde devemos redimensionar ele para o tamanho de cada aba do menu. No primeiro espaço digite o URL da página, no segundo, o título (opcional) e depois clique em save.


Vai fazendo isso até que todas as abas estejam com seus respectivos links. 

5- Depois de ter colocado link em tudo, clique em GET YOUR CODE. Vai aparecer uma janela nova então clique na aba HTML CODE e copie o codigo.

Quarto e Último Passo: Colocar no Blog

Até que enfim chegamos no ultimo passo kk valeu aos poucos que chegaram aqui. Para colocar o cabeçalho no seu blog faça o seguinte:

- Exclua o Cabeçalho do seu blog;

- Depois editar Modelo >> HTML >> Prosseguir . Dê F3 e busque por <*/head> (retire o *)
.- Abaixo dessa tag cole o codigo e visualize. Se tiver tudo Ok salve.

Bom gente é isso, espero que tenham gostado! Não esqueça de comentar hein!!

Compartilhe esse post!

Tags: ,

Veja Também:

34 Recados

  1. Milláh6/9/12

    já conhecia esse tutorial a bastante tempo e sempre uso =)
    e tem um jeito mais fácil, ao invés de colocar o link, vá direto na imagem salva no pc...
    bjs

    http://crazyggirls.tk/

    ResponderExcluir
  2. Jéssika Vitória 6/9/12

    Oi Gessy, já sabia como fazer, já até fiz um só que ficou feio demais kk' Quando tiver tempo vou tentar fazer um, acho lindo mapeado. Achei bem legal o seu!

    Beijos,
    Jéssika, do blog: For Princess|Jéssika Vitória

    ResponderExcluir
    Respostas
    1. Gessica Alvim7/9/12

      Fica lindo mesmo <3
      Que bom que gostou gata!

      Excluir
  3. Gessica Amaral6/9/12

    Ah eu já sei mapear , mas de qualquer maneira é util para quem ainda não sabe,ótimo tutorial xD
    beijos:*

    Lady Geh ( Clica no meu perfil para visitar o blog )

    ResponderExcluir
  4. Anônimo6/9/12

    Ficou legal seu tuto flor!!

    ResponderExcluir
  5. Izabela de Lima6/9/12

    Gostei bastante do tuto! Acho que vou tentar fazer alguma coisa desse tipo pro meu blog.
    Beijo!
    Elfa do PhotoScape

    ResponderExcluir
  6. Unknown6/9/12

    ótima dica,super funcionou no meu blog, solução :)

    mil beijos, seguindo
    se gostar visita :)
    http://meninadesapatilha.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Gessica Alvim7/9/12

      Ahhhh que bom ^^ Ficou lindo!
      Eu já sigo você.
      Obrigada por fazer o tuto

      Excluir
  7. Luana Beaut6/9/12

    Adorei a dica, vou tentar fazer no meu!
    Seguindo aqui...
    www.powergirl.com.br

    ResponderExcluir
  8. Ana Guedes6/9/12

    boa dica :D mas eu ainda preciso fazer um menu clicavel bonitinho sabe, com deseinhos e tals. poderia me ajudar? OASIOASIOASIAOSIAOSIAOSIASOIAS

    Beijinhos querida e bom feriadoo *.*

    inventadoserecriados.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Gessica Alvim7/9/12

      Posso sim, mas no momento eu to muito ocupada. Voce
      pode me enviar um emal depois ok?

      Excluir
  9. I Lov Maquiagem7/9/12

    Amo seus tutoriais. Aprendo muito com eles.
    Beijo!

    ResponderExcluir
  10. Just Listen7/9/12

    Que legal o tutorial, eu já tinha aprendido faz um tempinho. Mas não lembrava como era kkk Agora eu sei.
    Adorei o post (:

    Beijos, Juliana.
    http://bloggirlpop.blogspot.com.br/

    ResponderExcluir
  11. Mariana7/9/12

    Já conhecia esse tutorial. Já fiz isso uma vez no meu blog, mais a imagem ficava invisível e ai eu tinha que ficar mapeando toda hora. Ai eu tirei =/

    Bezoos, Marii ;*
    mundoo-cute.blogspot.com

    ResponderExcluir
  12. Unknown7/9/12

    que maneiro gessy, otimo tutorial! é muito facil..

    http://debysabetudo.blogspot.com.br/
    http://vaidosasemlimites.blogspot.com.br

    ResponderExcluir
  13. Unknown7/9/12

    Eu tentei fazer mas não seu certo :/
    Mas vou continuar tentando, um dia eu consigo!
    seguindo
    http://carolpedrozo.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Gessica Alvim7/9/12

      Consegue sim! Deve ser as caixinhas marcadas, sempre deixe elas desmarcadas!

      Excluir
  14. Karen almiron,7/9/12

    Oi flowr,
    adorei seu blog,super divooo!
    haha super que ameeei ...

    karenselajaalmiron.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Gessica Alvim7/9/12

      ^^ que bom que gostou, fico muito feliz !

      Excluir
  15. Bafos da Blogsfera7/9/12

    Gostei desse tutorial!
    cristalsemluxo.blogspot.com

    ResponderExcluir
  16. Margareth Gervason7/9/12

    Ficou ótimo adorei a resenha
    Bom feriado
    Beijos Coloridos

    ResponderExcluir
    Respostas
    1. Gessica Alvim7/9/12

      Tá que resenha?? Eu não postei resenha nenhuma!
      Isso é um tutorial!!
      Mas tudo bem

      Excluir
  17. Aléxia8/9/12

    no meu blog eu dou F3 e procuro por <*/head> mas não aparece oque eu fasso?

    ResponderExcluir
    Respostas
    1. Gessica Alvim9/9/12

      É só retirar o *
      eu o coloquei porque sem ele nao tava aparecendo.

      Excluir
  18. BLOG DA LYA9/9/12

    Maravilhoso tutorial! Eu sei mapear, agora, eu não fazia ideia que tinha que colocar abaixo de "head" por mais que "head" seja cabeçalho hihi :) pois, eu achava que havia um código especifico para isso. Principalmente o que eu estou pensando :)

    PHANNY TEEN
    Beijos :3

    ResponderExcluir
  19. Unknown1/10/12

    Oii gessy,fiz tudo direitinho,mas ele fica por cima do navbar separado das postagens e de onde deveria ficar,ai tirei,=/
    Beijos
    http://noticiasenovidadesmundias.blogspot.com.br/

    ResponderExcluir
  20. LARISSE16/6/14

    oi, eu ja fiz isso uma vez so que agora nao da mais certo pq esse site nao mapeia gratis.. tem outro? ajude-me pf

    ResponderExcluir

Deixe aqui sua opinião a respeito do post ou do blog ♥
Você pode comentar através do Facebook também! É rápido, simples e prático!