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 


          



                  
                                                    
Para salvar a imagem, aperte ctrl e clique em cima da imagem. Depois de salvar entre nesse site Image-Maps.  Uma tela assim vai se abrir


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. 

Agora você só precisa inserir ele no seu blog, basta entrar em layout e criar um novo gadget
Pronto, seu menu de categorias ta feito, veja se ele se encaixou certinho na sua lateral, caso não esteja do tamanho ideal é só clicar em editar o gadget criado e mudar a largura (widht) e a altura (height)
fácil né?!  Espero ter ajudado, qualquer dúvida deixe aqui nos comentários. Beijo

Compartilhe esse post:

  1. Olá gostei muito de seu blog, parabéns Mari...
    Você sabe como desagrupar uma imagem jpeg no corel x5...

    ResponderExcluir
  2. 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 :)



    www.insaturada.blogspot.com

    ResponderExcluir
    Respostas
    1. 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.

      Excluir
  3. Adorei!! Super funcionou, uns dos poucos que eu consegui fazer kkkk Estou fazendo meu blog aos pouquinhos e essas dicas são super valiosas. Bjss!
    https://vic-barreto.blogspot.com

    ResponderExcluir