25 dezembro 2011

Como mapear uma imagem

Oi sorvetes com cobertura de caramelo!
Primeiro queria desejar um Feliz Natal, com muita Paz, saúde e tudo de bom que existe no mundo pra vocês!
Mas vamos logo ao assunto, hoje vou ensinar como mapear imagens, como um cabeçalho com menus por exemplo. Igual a esse aqui:


Quer aprender? Clique em Continue Lendo!



Mini gif 198  1° Passo: Vá no site Image Map Tool


Mini gif 198  2° Passo: Agora você vai clicar em selecionar sua imagem, vai abrir uma janela ai você escolhe seu arquivo e clica em abrir, depois clique em Start Mapping your Image




Mini gif 198  3° Passo: Depois que você clicar vai aparecer outra aba, você vai ter que esperar mais ou menos 8 segundos. Esperou?  Agora você clica em Continue to next step.



Mini gif 198  4° Passo: Tá, já estamos na metade do mapeamento, quando você clicar vai abrir outra janela, com alguns itens que você vai usar pro mapeamento, então você vai fazer o seguinte. Você clica em Rectangle, vai aparecer um retangulo momento óbvio, lá em cima, você arrasta até o lugar onde você pos seu menu. Você deve ter percebido que você vai ter que preencher alguns campos. então aonde está escrito:

Link For this map:
Você vai por o link onde você quer que o texto leva, por exemplo na minha imagem o texto é HOME
então eu vou por o link do inicio do meu blog.

Title/Alt for this map:
Repita o texto que você pos no cabeçalho, ou qualquer coisa, por que não vai aparecer. 

Faça isso em todos as abinhas do seu menu, lembre - se salve todos.





Mini gif 198  5° Passo: Agora estamos quase na reta final, nós vamos desmarcar algumas opçoes. Desmarque Todas as caixinhas circuladas de verde na imagem abaixo, ou seja deixe tudo desmarcado.


Mini gif 198  6° Passo: Feito isso você vai clicar em Get Your Code, vá na abinha HTML CODE e copie o codigo que aparecer.




Mini gif 198  7° Passo: Agora, para finalizar vamos colocar esse codigo no blogger: vá em design>editar layout>adicionar um gadget>html javascripty> cole lá.
Depois disso arraste esse codigo html para baixo do cabeçalho e acima da area de postagem.


  Não coloque nada no cabeçalho, e mude o titulo do blog para transparente assim vai ficar super legal seu cabeçalho.

è isso, se gostou do tutorial Siga o blog ou Comente, não custa nada!

BayBay



22 comentários:

  1. Oi adorei o tutorial muito util hehe !

    ja to seguindo o seu blog
    da uma olhada no meu e segue de volta se puder :

    http://garotoonerd.blogspot.com

    feliz natal

    ResponderExcluir
  2. oi flor, claro que aceito parceria e já estou te linkando. bjs do ST

    spaceteen-gabriellaoliveira.blogspot.com

    ResponderExcluir
  3. Eu não lembro de eu te feito afiliação com você mais eu vu te colocar la ja que estou na sua lista de afiliados. Diva onde esta meu, banner como parceria?
    Aguardo respostas.
    Bezos Rawr ----> Bikoti.blogspot.com

    ResponderExcluir
  4. Ok flor
    Bezos Rawr ----> Bikoti.blogspot.com

    ResponderExcluir
  5. Adorei o tutorial, mt útil msm!
    Flor, só ñ vou participar so concurso, pq ficarei meio ausente do blog e tal.

    Bjs

    http://blogdemeninasparameninasoficial.blogspot.com/

    ResponderExcluir
  6. Bem legal o tutu..

    Já estou participando do sorteio..

    Beijo Grande, Fraan

    cidade-de-garotas.blogspot.com

    ResponderExcluir
  7. Ah linda entendi, claro vou te linkar sim viu ... Beijos lindo seu blog :)
    Feliz Ano novo :) Fica com Deus

    ResponderExcluir
  8. Hu eu ja sabia rsrs *-* mais tem gente q não sabe né, ficou bem facinho haha

    Rawr --> World Girl
    http://ianapaulinhaaaa.blogspot.com/

    ResponderExcluir
  9. Iana: è, eu vi um tutu desse no seu blog..
    amei o Rawr ----> Charmosinha Beauty

    ResponderExcluir
  10. Adorei o tutu Guria (:
    Nossa isso que é amizade hein a 10 anos *o*

    Beeeeijos!

    ResponderExcluir
  11. olá linda, desculpa , é que sou meia atrapalhada, mais já te linkei , rsrs , sempre me confundo com tudo , rs !
    Beijos linda

    ResponderExcluir
  12. Nathali: Oks, estou mexendo no designer daki a pouco vou te linkar

    ResponderExcluir
  13. Oi flor, recebi seu e-mail. Obg por responder!!!
    eu vou colocar o banner msm assim, chama mais atenção^^

    aah, aceito parceria sim, so pegar meu banner, que dae eu coloco o seu, me avisa la :D

    beijooos

    ResponderExcluir
  14. Taa L: chama msm, vou editar umas coisitas aqui, ai coloco se banner viu?

    ResponderExcluir

LinkWithin

Related Posts Plugin for WordPress, Blogger...