-->
Image Map
Atenção: os comentários queridos de vocês serão retribuídos frequentemente nas sextas-feiras (não estranhem a "demora"). Obrigada por comentarem e pela compreensão.

11 de fev. de 2012

Mapeando o cabeçalho!

Oi gente!
Passei por um probleminha com o cabeçalho do Teen Blog ~* que é mapeado (possui o menu - "home, sobre, contato..." - dentro da própria imagem) - ignorem as redundâncias para vocês que são experts em HTML (caso sejam).
Detalhes demais à parte, estive visitando alguns blogs e percebi o mesmo erro: o cabeçalho não aparece (e isso dá um desespero! Pelo menos, em mim deu, quando aconteceu!)
Bom, milagrosamente, criei um tutorial (ALELUIA, ALELUIA ♪super simplificado (está realmente muito baba! Qualquer um entende! E a maioria já sabe fazer isso...)

Como resolver o erro? Clica aí em Leia Mais!

Observem:
[Paraíso de Menina, um blog muito lindo! Meus parabéns à dona, Beatriz Andrade] - Só estou usando ele como exemplo do acontecido!

Desse modo, pedi ajuda a alguns blogueiros admiráveis e conhecedores de design e etc (como o Jeff, o Elcimar e a Adália) e eu descobri o inimigo: hospedagem no lugar errado!
Os passos para mapeamento, segundo os blogs de tutoriais é:

Criar o cabeçalho (óbvio kkkk);
Ir ao Image Map;
>>Colar o link da hospedagem em "From a URL"<< Ou seja, isso significa NÃO hospedar o cabeçalho do seu blog no site de mapeamento (Image Map), porque depois o resultado é aquele "coisado" lá!
*Como fazer então? Hospede em sites como Photobucket, ImageShack, TinyPic ou outro que considerar "seguro" (às vezes esses sites citados entram em coma ficam com problemas e a imagem é afetada).*
Copie o URL destacado ali (no caso do TinyPic);

De volta ao Image Map:
Cole o link e clique em "Start Mapping Your Image";

Depois em "continue to next step" (AVÁ).

Aí, finalmente comece a mapear... Let's Go ♫

Clique em "Retangle";
E vá pondo os links de acordo com as páginas do menu! (ex.: página contato "http://seublog.blogspot.com/p/contato.html")
Terminou? Clique em "Get Your Code";

Vá para "HTML Code" e copie até "</map>";

Depois: Design>Elementos da página>Adicionar Gadget>HTML/Java>Cole o código>Salve>Visualise>Salve.

Extra: se quiser fazer com que o cabeçalho mapeado linque para seu blog, entre em "Formato Rich Text", selecione a imagem, clique em "CriarLink" e ponha a URL dele. 


The End!

Créditos: Cherry Bomb

Espero ter ajudado; não cometam esse equívoco!

Deixe Seu Comentário!
By: Andresa C.

32 comentários:

  1. Amei o tutorial, bem legal \o/

    http://viverserfeliz-renata.blogspot.com/

    ResponderExcluir
  2. adoro o blog paraiso de menina!
    mapear imagens é um tuto super super útil! utilizei ele pra fazer o cabeçalho do PT ;D

    http://blogportalteen.blogspot.com

    ResponderExcluir
  3. ótimo Tutorial Andresa, parabéns, é bem raro ver um tutorial aqui!! kkk.... Mas, parabéns à você e ao Teen Blog~*, que está evoluindo! kkk Amo demais... aki, e eu vi o aperto que você passou! kkk

    http://acessopermitidoblog.blogspot.com/

    ResponderExcluir
  4. Já usei muuito esse tutorial! *--*

    Querida, tem um mini concurso no meu blog, onde tem que adivinhar a cor de esmalte que estou usando, vai lá participar! Você ganha 3 dias de destaque no blog! Corre lá e participa!

    Beijos!
    www.stylistme.com

    ResponderExcluir
  5. Nunca usei esse tutorial por esse motivo r não consegui arrumar como você, obrigada. Próximo layout, seus créditos garantidos na nossa página. Parabéns pelo ótimo tutorial!

    Beijo!
    meianoiteequinze.tk

    ResponderExcluir
  6. Andresa, eu vi no painel, o Teen Blog~* está com mais de 100.000 visualizações!!! Parabéns minha amiga!!! Estou muito feliz você e pelo Teen blog~*!!!!!

    http://acessopermitidoblog.blogspot.com

    ResponderExcluir
  7. que legal o tuto flor
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  8. Já usei esse tutorial algumas vezes, mas decidi continuar com as páginas do blog, porque dá muito trabalho pra mapear... Pelo menos eu acho né, haha. Adorei seu blog, já estou seguindo!

    Kisses ♥
    http://bloggarotainocente.blogspot.com/

    ResponderExcluir
  9. Eu não mexo muito no meu Blog,evito esquentar a cabeça com tanto HTML,porque você não muda um pouco esta caixa de boas vindas,escrevi sobre isso no meu Blog,essa caixa passa uma mal impressão de você,é muita regra...seguindo e espero que retribua,será uma honra te-la como minha amiga!

    http://simonebastos2007.blogspot.com/

    ResponderExcluir
  10. Bacana, mas não uso mais esse tipo de mapeamento *u* hehe, mas ajuda muito pra quem é iniciante :D

    ResponderExcluir
  11. Me ajudou até! Obrigado!

    http://abostaquadrada.blogspot.com/

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

    ResponderExcluir
  13. Amei o tuto!
    Bem fácil e prático ;)

    Beijos,
    theplugados.blogspot.com

    ResponderExcluir
  14. Com certeza né! Agora posso ter novas ideias para inovar cada vez mais e melhor o MNQ, obrigada mesmo! Fico feliz que meu post tenha te ajudado também. A estética da escrita é pouco usada por jovens como nós e ela deve ser apreciada por todos.

    Beijo!
    meianoiteequinze.tk

    ResponderExcluir
  15. Bem legal o tutorial, :]
    eu gosto muito dessas coisas , de mapear mais eu mapeio minha imagem em um programa que eu tenho.
    #Bezos Rawr -----> Bikoti.blogspot.com

    ResponderExcluir
  16. Oiie!
    É a Isa do Sempre Teen.
    O banner do Teen Blog ja está na aba de parcerias. Agora é só você colocar o do Sempre Teen, o código está lá na aba de parceria.
    Beijinhos =*

    ResponderExcluir
  17. Amo você Andresa, estou muito triste pelos meus melhores amigos terem se mudado, estou chorando de saudades, e só os seus comentários colocam um sorriso tímido no meu rosto! I love you strº blogueira!

    http://acessopermitidoblog.blogspot.com/

    ResponderExcluir
  18. Amo você Andresa, estou muito triste pelos meus melhores amigos terem se mudado, estou chorando de saudades, e só os seus comentários colocam um sorriso tímido no meu rosto! I love you strº blogueira!

    http://acessopermitidoblog.blogspot.com/

    ResponderExcluir
  19. Já estou seguindo no face..bjs..fica com Deus!

    ResponderExcluir
  20. Hoje é o aniversário do Layon, mascote do ACESSO PERMITIDO, visite e comemore também!!!
    http://acessopermitidoblog.blogspot.com/

    ResponderExcluir
  21. ahsuahs' são sim, a coleção de garrafinhas da tuppeware daqui de casa' ahsuahsu :D

    ResponderExcluir
  22. Comigo também aconteceu isso, mas não era o cabeçalho era menu.. Eu deletei ele e fiz outro a partir daí na teve mais problemas.. Mas deve ter sido a hospedagem mesmo..

    Awwn também admiro muito seu blog.. Obrigada.

    Beijo Grande, Fraan

    http://cidade-de-garotas.blogspot.com/

    ResponderExcluir
  23. Amei o tutorial!

    Tem post novo, comenta?

    Beijos!
    www.stylistme.com

    ResponderExcluir
  24. Muito bom o tutorial, vou usar no meu outro blog ^^

    ResponderExcluir
  25. Own*** Claro que somos amigos, tenho prazer em ler seu comments, kkk Eles são muito engraçados!!! Porque em quanto os comments de cima, são pequenos e normais, os seus são grandes e bem animados, gosto muito disso em você! Isso é uma qualidade sabia????

    http://acessopermitidoblog.blogspot.com/

    ResponderExcluir
  26. Muito bom o tutorial, vai ajudar mais pessoas, eu era bem perdida nisso KKK

    Beijos,
    Blog | Twitter | Sorteio Valendo colar de coruja e button!

    ResponderExcluir
  27. Otima dica, amiga arrasou!
    seu blog como sempre esta divão!
    #Bezos Rawr -----> Bikoti.blogspot.com

    ResponderExcluir
  28. Perfeito, era o que eu procurava, e bem explicado.
    Estou seguindo ^^

    http://diretoaoponto-oficial.blogspot.com/

    Beijos

    ResponderExcluir
  29. Comentário numero 30 \o/
    Olá,passei por aqui para desejar um bom carnaval e dizer que estava ótimo o tutorial sobre os cabeçalhos e tals,pena que não sou eu quem fiz o layout do AN,estou seguindo seu cantinho ok flor ?fIQUE LIVRE PARA seguir de volta ;D
    http://avrilnoticias.blogspot.com/

    ResponderExcluir
  30. adorei o post!e adoire seu blog tambem fussei em tudo!
    kkk
    da uma passadinha la no meu blog!
    http://blogrosachoke.blogspot.com/

    ResponderExcluir

1- Comente sobre o post
2- Não ofenda;
3- Seu comentário será retribuído quando possível.
4- Leia a FAQ e tire suas dúvidas.
5- O Li não recebe mais tags e selinhos.
6- Dê a sua opinião. Ela é muito importante!

Obrigada por comentar. Seja muito bem-vindo e volte sempre ao Loucos Informados!

Related Posts Plugin for WordPress, Blogger...