Como colocar efeito zoom nas imagens do blog

em 19 de julho de 2016


Tempos atrás eu mostrei aqui no blog como inserir alguns efeitos legais nas imagens dos posts no blog.
Se você clicar na categoria Imagens verá tudo o que já foi postado sobre isso.
Recorde o post com os efeitos que mencionei acima: Como colocar efeitos nas imagens do blog.


Hoje, atendendo um pedido de um leitor, vou mostrar como inserir esse efeito zoom nas imagens dos posts que você escolher:


Oi! Eu sou o efeito zoom que você vai aprender hoje!
Saiba mais


Vamos aprender?
Antes de mais nada uma dica da tia Elaine: faça sempre qualquer teste em um blog de testes.
Sempre, tá?


Imagem com zoom no blog- como fazer


Há 2 maneiras de fazer a mágica acontecer: inserir o código CSS, que define a aparência das imagens quando aplicado o recurso hover diretamente no código fonte do blog ou inserir o código todo diretamente no post onde deseja inserir a imagem com efeito hover.
Vou ensinar o modo mais correto e prático, que coloca o código direto no código fonte do blog.
Vamos lá?
Comece abrindo a página com os códigos a serem usados:



Copiar os códigos


Agora vá ao painel de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa de código que abrir tecle Ctrl+F.
Na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima dessa tag de fechamento cole o Código CSS.
Salve.

Vamos testar?
Copie o Código HTML e cole em um bloco de notas para editar.
Nos campos que marquei em capslock coloque o texto que deseja, o link para onde irá direcionar ao ser clicado e o endereço da imagem que deseja.


Para conseguir de modo simples o endereço de uma imagem faça assim: vá ao seu blog e comece um post de rascunho.
Carregue uma imagem qualquer que queira e copie o endereço http dela (pare o mouse sobre ela e copie o Endereço do link, se estiver no navegador Chrome).
Este é o endereço http de sua imagem.

Coloque este endereço http da imagem no lugar indicado no Código HTML que pedi para colocar no bloco de notas.

A seguir copie o Código HTML já editado (link, endereço da imagem e texto) de seu bloco de notas.
Vá ao seu painel administrativo do blog e escreva seu post.
E escolha onde deseja inserir a imagem com efeito zoom.
Clique em HTML no alto do editor de postagens.
Isso reverterá seu post para o modo html.
Cole então o código HTML editado onde deseja que a imagem com zoom apareça.
Pronto, pode publicar.


Dicas extras muito importantes


1- No modo Visualização não tem como ver o zoom.
2- Ao voltar o editor de texto para o modo Escrever vai parecer que tá tudo desconfigurado em relação ao zoom da imagem.
Não está, pode crer.
Por isso é importante fazer ante em um blog de testes, tá?
Assim você se familiariza com tudo e sentirá mais segurança ao fazer em seu blog.
3- Deixei marcado em capslock todas as áreas editáveis no código CSS.
4- Se não quiser que a imagem direcione para link nenhum deixe o espaço destinado ao link em branco.
5- Se você está vendo este post pelo celular vai notar que o efeito funciona, mas devido ao efeito touch ele automaticamente já direciona para onde você linkar a imagem.
6- Posso usar mais de uma imagem com zoom por post?
Sim, pode. Basta repetir o Código HTML para cada imagem que desejar dar zoom.


Bônus extra

Quer colocar a imagem com zoom na sua sidebar e não em um post?
Basta colocar o Código HTML em um gadget HTML/JAVASCRIPT e pronto, tá feita a mágica.


E aí?
Curtiu o tutorial?
Ajudaê, coleguinha! Curta, comente, compartilhe...
Olha os botõezinhos aí embaixo... clica neles...

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

7 comentários , comente também!

  1. Sempre com dicas incríveis, super bem explicadas. Parabéns, adoro seu blog!

    ResponderExcluir
  2. Como sempre dicas preciosas.
    Me conta uma coisa Elaine, quanto mais recursos colocamos no código fonte mais pesado de carregar o blog fica? Ou isso não interfere?
    Bjo

    Eli

    ResponderExcluir
    Respostas
    1. Eli, como esse código em particular é apenas CSS não pesa nada.
      O que deixa o blog lento são imagens sem edição, e javascript externo, que precisa de chamada externa para rodar, tipo os arquivos JQuery.
      Exemplo? O botão de curtir do Facebook e até o botão de compartilhar do G+.
      Pesam mais que a gente imagina (e não vivemos sem eles rsrsr)

      Excluir
  3. Mais uma dica bacana!
    Beijos.
    joturquezzamundial

    ResponderExcluir
  4. Muito útil Elaine mas Como não entendo muito me perco completamente!
    Coco and Jeans by Marisa

    ResponderExcluir
  5. Elaine,
    Você é MARAVILHOSA! Que Deus e os anjos iluminem a sua vida e de sua família, sempre e sempre. Muito obrigado por ter atendido o meu pedido. Foi exatamente isto que queria. E ainda com sua excelente explicação, aula, dedicação, atenção, segurança, profissionalismo, digno de um profissional bem mais que exemplar.

    Já tinha visto isto num blog que não estava nem aí para explicar correto. Este blog mostrou uma explicação muito vaga. Mas você, uma excelente profissional, refez muito melhor, bem explicado, com total dedicação.

    Se já amava seu trabalho, agora eu amo ainda mais!

    Parabéns por existir e muito obrigado!

    ResponderExcluir
  6. Elaine e suas postagens úteis! Fada dos blogs! Estou espanando o meu, apenas limpando posts. Pretendo voltar em semanas. Bjo

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…