06 setembro 2012

Colocando Cabeçalho Mapeado no Blog

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

Comente com o Facebook:

34 comentários:

  1. 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
    Respostas
    1. É mesmo tinha me esquecido desse!

      Excluir
  2. 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. Fica lindo mesmo <3
      Que bom que gostou gata!

      Excluir
  3. 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. Ficou legal seu tuto flor!!

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

    ResponderExcluir
    Respostas
    1. Tenta sim vai ficar show Iza

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

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

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

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

    ResponderExcluir
  8. 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. Posso sim, mas no momento eu to muito ocupada. Voce
      pode me enviar um emal depois ok?

      Excluir
  9. Amo seus tutoriais. Aprendo muito com eles.
    Beijo!

    ResponderExcluir
  10. 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. 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. que maneiro gessy, otimo tutorial! é muito facil..

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

    ResponderExcluir
    Respostas
    1. Fez novo blog né?? depois passo por lá!

      Excluir
  13. 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. Consegue sim! Deve ser as caixinhas marcadas, sempre deixe elas desmarcadas!

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

    karenselajaalmiron.blogspot.com.br

    ResponderExcluir
    Respostas
    1. ^^ que bom que gostou, fico muito feliz !

      Excluir
  15. Gostei desse tutorial!
    cristalsemluxo.blogspot.com

    ResponderExcluir
  16. Ficou ótimo adorei a resenha
    Bom feriado
    Beijos Coloridos

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

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

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

      Excluir
  18. 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. 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. 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
:) :( ;) :D :-/ :P :-O X( :7 B-) :-S :(( :)) :| :-B ~X( L-) (:| =D7 @-) :-w 7:P \m/ :-q :-bd

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!