Icones de redes sociais e categorias no blog com image-maps
junho 14, 2015
No tutorial abaixo vou ensinar como mapear imagens pra colocar na lateral do blog no estilo da minha em "categorias" ou "assuntos" e também nos ícones das redes sociais. Primeiro você precisa da imagem, ela pode ser da internet ou estar salva seu computador. Você pode usar essas ou qualquer outra que desejar, existe muitas disponíveis na internet.
Todas as imagens já estão com fundo transparente, então não importa qual seja a cor de fundo do seu blog ou do local que você coloque, só vai aparecer as imagens.
Modelos de categorias
No espaço onde esta escrito "paste URL or Clik....você deve colar a URL da imagem que você deseja mapear, caso ela esteja salva no seu computador é só clicar em Browse for File escrito em laranja e adicionar a sua imagem depois clicar em start mapping. Feito isso uma nova tela vai abrir como na foto abaixo, espere carregar e clik em "clik to continue"
Feito isso sua imagem já esta pronta para ser mapeada, observe a imagem abaixo e faça exatamente como mostrado. Atenção! Você precisa clicar com o lado direito do mouse para que apareça a primeira opção, quando clicar em CREAT RECT a segunda imagem vai aparecer, você precisa ajustar exatamente o quadro pontilhado na imagem, pois essa vai ser área onde o link vai ficar escondido.
Copie o link da página que você deseja que abra quando a imagem for clicada, no caso do meu blog e uso os meus marcadores como categoria, quando você cria uma postagem e marca ela como DICAS, FILMES e etc... Veja um exemplo de como fica:
http://deixeiflorir.com.br/search/label/Beleza
Cole no espaço indicado na figura e faça o processo até terminar de mapear todas as categorias. Onde esta escrito TITLE é o que vai aparecer quando o visitante passar o mouse sobre o ícone da categoria ,se não quiser que apareça deixe em branco. Pronto, sua imagem já está mapeada, agora siga os passos abaixo para gerar o código da imagem. 
Quando você terminar o processo a imagem ficara parecida com isso, então clique novamente com o direito do mouse e selecione GET CODE indicado em vermelho, uma nova aba vai abrir e você precisa selecionar a opção HTML CODE indicado em vermelho. Quando abrir vai aparecer 2 caixas, você precisa copiar o segundo código.
fácil né?! Espero ter ajudado, qualquer dúvida deixe aqui nos comentários. Beijo
Olá gostei muito de seu blog, parabéns Mari...
ResponderExcluirVocê sabe como desagrupar uma imagem jpeg no corel x5...
Olá, queria apenas agradecer muito! Você acabou de me ajudar muiiito com essa postagem! Fiz no meu blog e amei, eu mesma personalizei a imagem mas sem essas dicas seria impossivel! Valeu mesmo!Se quiser ver o resultado lá no blog :)
ResponderExcluirwww.insaturada.blogspot.com
Oi Allana, fico feliz que tenha conseguido. Sempre compartilho aqui o que sei para ajudar mesmo, as vezes é tão simples né ? Pode deixar que eu vou conferir sim como ficou. Beijo.
ExcluirAdorei!! Super funcionou, uns dos poucos que eu consegui fazer kkkk Estou fazendo meu blog aos pouquinhos e essas dicas são super valiosas. Bjss!
ResponderExcluirhttps://vic-barreto.blogspot.com