3 de dezembro de 2012

12

Colocar Zoom de Imagens nas postagens do Blog





Olá pessoal!!! Novamente estou aqui pra mostrar mais um Efeito CSS bem legal pra colocar no Blog.
Vou ensinar como colocar Efeito Zoom de imagens nas postagens do blog.



Sobre o efeito: o efeito acontece quando passamos o cursor do Mouse (acima) sobre as  imagens.

Vamos colocar no Blog
Acesse  o HTML do seu blog, Vá em Modelo >> em Editar HTML >> e clique em Prosseguir.


E no HTML do seu blog, pressione as teclas Ctrl + F do seu teclado para (ativar dispositivo de pesquisa) e busque por esse Tag:
]]></b:skin>
3° Ao encontrar o Tag, acima dele você vai acrescentar este código CSS:

.post-body img {
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}

.post-body img:hover{
border:1px solid #000;
-webkit-transform:  scale(1.302);
}


Pronto, agora clique em Visualizar para ter certeza que não tem erros, e em seguida Salve o Modelo.

Este código foi todo personalizado por mim,e vou esta explicando a vocês algumas partes do código que poderão ser alterada por vocês.

Altere o código:

  • A parte que eu destaquei em Cor vermelha "1px" se trata da Espessura da Borda que aparece na imagem, então se você deseja aumentar a espessura da borda, altere o seguinte valor "1".
  • E a para alterar a cor da Borda, substitua o código destacado em Azul "#000" por uma cor que você quer colocar no seu blog. (Clique Aqui para escolher uma Cor).
  • E se você que Aumentar ou diminuir o tamanho do "Zoom da imagem", altere o seguinte Valor que eu destaquei em cor de Rosa "1.302" .
Prontinho pessoal, espero terem gostado deste efeito.
Queria pedir a você que curtisse a Pagina do Varias Dicas Para Blogs (agradeço todos que curtirão) obrigado

12 comentários:

  1. Olá Kelven
    Gostaria de esclarecer uma dúvida.
    Quando acrescenta o código todas as imagens publicadas no post terão o efeito?
    Caso a resposta seja afirmativa, teria algum código para que fosse possível escolher em qual aplicar.
    Seu Blog é de muita ajuda.
    Obrigada

    ResponderExcluir
    Respostas
    1. olá!
      Sim, apos instalar este CSS no template o efeito será aplicado pra todas as imagens do post.
      E em relação ao código que você sitou, é possível sim aplicar o efeito pra uma determinada imagem, mais neste caso, tem que ser outro código específico.
      obrigado por comentar e acessar o meu blog, Valeu

      Excluir
  2. nao consegui da uma ajudinha urgente..

    ResponderExcluir
  3. olá coloquei no meu blog e funcional direitinho http://baixeleg.blogspot.com.br/

    ResponderExcluir
  4. valeu consegui demais kakui, valeu valeu

    ResponderExcluir
  5. valeu mesmo adorei todas as dicas. e ja estou seguindo o blog.
    coloquei o link no meu blog.
    http://bloggermundomagico.blogspot.com.br/

    ResponderExcluir
  6. Estou impressionadíssimo.

    Parabéns, muito bom o teu blogue e o teu trabalho em ajudar.

    PArabens mesmo.

    ResponderExcluir
  7. Muito obrigado, não encontrava um código que desse certo e eu conseguisse controlar o tamanho do zoom, e o melhor é que ele da zoom só na area da postagem, bem fácil a instalação. Se quiserem ver o efeito http://cibernerdicos.blogspot.com.br, só colocar o mouse em cima da imagem das postagens

    ResponderExcluir
  8. Olá Kelven!
    No meu deu certo, só fiquei com problemas que interferiu no numero de comentários.
    Saiu do canto da direita e foi para esquerda e o balãozinho onde o numero de comentários ficava ficou cortado pela metade!
    Podes me ajudar?
    Obrigada.

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook