how do you make a gif
Envie-nos um Email Em Breve... Facebook Twitter Ask.Fm Favoritos

23/01/2013

Como Mapear Facilmente uma Imagem no Image Map Tool

Ooi *--* Hoje eu vou ensinar a mapear uma imagem. Se você não sabe o que é isso, aí vai: você já viu em algum blog um menu dentro do cabeçalho, um menu que faz parte da imagem? Bom, provavelmente essa pessoa mapeou o seu cabeçalho para fazer com o seu menu funcione dentro dele. Se acalmem, é bem fácil de fazer e vocês não vão precisar mexer no HTML de seus blogs! Além disso fiz um cabeçalho base super fofinho da Demi para mostrar através dele como mapear uma imagem e o melhor de tudo: vocês poderão usar o cabeçalho base em seus blogs <3 Vamos lá, então...
ATENÇÃO: Esse tutorial não serve apenas para mapear cabeçalhos e sim para mapear qualquer imagem que você quiser.
Gostou do cabeçalho acima e quer usá-lo no seu blog? Você pode, desde que siga essas regras: não reblogue o cabeçalho de maneira nenhuma, não retire os créditos do cabeçalho (LS) e dê os créditos à Lovelly Summer em algum lugar visível do seu blog. Se vai usá-lo, aí vão umas dicas: Coloque o nome do seu blog no balão de fala cor-de-rosa. Abaixo do "Essa sou eu" coloque uma foto sua e uma breve autobiografia. Nos quadradinhos pretos coloque três vídeos que você goste da Demi (veja como fazer isso com esse tutorial, aqui). No local onde está o menu você deve mapear a imagem (o que vou mostrar nesse tutorial). Esse cabeçalho funciona melhor em blogs de 1030 pixels de largura. Para ajustar o tamanho do seu blog vá em: Painel, Modelo, Personalizar, Ajustar Larguras, na parte "Todo o Blog" deixe com o tamanho 1030. OBS: Veja como deixar o cabeçalho transparente, aqui.
1º- Antes de mais nada você deve criar o seu cabeçalho normalmente. Inclua o menu no seu cabeçalho (use a criatividade e faça um menu bem legal). Aí em cima está o cabeçalho que eu fiz para mostrar como mapear a imagem (notem que eu fiz o cabeçalho com o menu já nele). Vocês podem usar o cabeçalho que eu fiz da Demi desde que sigam as instruções que estão abaixo da imagem da base.

2º- Quando terminar de fazer a sua imagem vá no site do Image Map Tool, clique aqui para entrar. Clique em "Escolher Arquivo" e selecione a imagem do cabeçalho que você fez. Quando fizer isso, clique em "Start Mapping Your Image".

3º- Espere alguns segundos e depois aperte em "Continue to Next Step". Abaixo do quadradinho "File upload" era para aparecer a sua imagem , mas não se preocupe se aparecer apenas esse símbolo como o da imagem acima, pois geralmente a imagem não carrega quando é muito grande (como um cabeçalho).

4º- Antes de mais nada você deve deixar desmarcadas todas as opções que estão abaixo de "Advance Tool Box" como mostrado na imagem. Sua imagem deve carregar no lado esquerdo da página, se ela não carregar, nesse passo isso representará um problema, então tente fazer tudo outra vez a partir do passo 2.

5º- Clique em "Rectangle".

6º- Vai aparecer um quadrado, coloque-o em cima do lugar que você quer mapear (selecione o tamanho do quadrado mexendo nos quadradinhos que estão ao seu redor). No espaço "Link for this map:" coloque o link que você quer que abra quando alguém clicar nessa área, por exemplo: na imagem estou mapeando a parte onde está escrito "Início", se eu quiser que quando alguém clicar em "Início" seja redirecionada para o início da Lovelly Summer vou colocar: http://lovellysummer.blogspot.com no espaço em branco. Na parte "Title/Alt for this map" coloque o que você quer que apareça quando colocar o mouse em cima da palavra "Início", pode ser: "Volte para o começo do blog", por exemplo. Você também pode deixar esse espaço em branco, se preferir. Quando terminar clique em "Save".

7º- Vá mapeando o resto do menu seguindo os passos 5 e 6. Ao terminar clique em "Get Your Code".

8º- Clique em "HTML Code" que está no topo da página. Em um quadrado aparecerá o código da sua imagem mapeada, agora é só colocar o código onde quiser!


1º- No painel do seu blog vá em "Layout".

2º- No gadget do cabeçalho do seu blog clique em "Editar". Vai aparecer uma janela pop up. Na parte "Imagem" clique em "Remover Imagem" e deixe a opção "Em vez de título e descrição" marcada.

3º- Marque a opção " Da Web..." e no quadradinho que está abaixo disso cole isso aqui.
Essa URL é de uma mini imagem transparente que eu fiz e vai ficar no lugar do seu cabeçalho. Depois que a imagem carregar (você vai saber quando tiver carregado quando aparecer o link "Remover Imagem") e então clique em "Salvar".

4º- Clique em "Adicionar um Gadget" que está logo abaixo do gadget do seu cabeçalho. Na janela pop up que abrir clique no "+" que está ao lado de HTML/JavaScript.

5º- Deixe o campo onde tem "Título" em branco. No campo "Design" cole o código do seu cabeçalho, aquele que você encontrou no passo 8 do tutorial acima. Clique em "Salvar". Agora clique em "Salvar Organização" na página do Layout do seu blog e prontinho!

Espero que tenham gostado, qualquer dúvida é só comentar <3

Share on Tumblr

15 comentários:

miry pacheco disse...

fofis, to seguindo seu blog,segue o meu!?http://the--last--rose.blogspot.com.br/ ele é novinho kkk :)

Cute Time disse...

Parabéns flor, você ganhou uma semana de divulgação!
beijos da isa
link: Cute Time//Official

Lavínia disse...

Adorei o tutorial! Está bem explicadinho, sou louca para fazer no meu blog, mas nao fiz porque tinha medo de errar :s br
Beijos
http://cupcake-a.blogspot.com.

Mel-Chan disse...

Legal,ahh eu vi seu comentario no blog,obrigado por comentar
Bjs Mel-chan
http://melissarocks2.blogspot.com.br

Thais Costa disse...

Costumo mapear imagens somente nesse site, esse tutorial é muito útil.
Beijos
clandestina-a-bordo.blogspot.com

Guiidd disse...

Uso ele e adoro!
xoxo
www.fofokisteen.blogspot.com
Seguindo aqui :)

Thalita Maia disse...

muito boa a dica!
Beijos

Paola Gineti disse...

Blog super lindo,queria entra para os afiliados.Se quiser trocar afiliados favor deixar um comentario no meu blog www.http://princesadopanico.blogspot.com.br/

Rafaah Paixao disse...

São ótimas as dicas flor* Tá tudo tão explicadinho *--*
http://maniasgirls.blogspot.com/

Beca;) disse...

é bem fácil^^

http://conectadas2.blogspot.com.br/

Carool Terra disse...

Quero ser afiliada, posso? Mas ainda não vou mandar o link, quando o meu blog estiver pronto eu mando o link!

Manuh Ferrer disse...

Super fácil amei!!

coisinhasdegarotas01.blogspot.com.br

kednaa disse...

Achei super fofo o blog...*-*

Que tal se expressar um pouco no estilo fofo emo, e acabar com o preconceito?
Emo-Girl<-clique aqui

Ludymilla disse...

Oie será que poderia fazer um cabeçalho para mim e me ajudar a editar o meu blog pois não estou conseguindo.Parbéns pelo seu blog muito lindo!
nowludy.blogspot.com.br

Moises Thomaz disse...

Gostei , ajudou demais muito obrigado !

m-thomazapenasumcara.blogspot.com