Coloque zoom nas imagens da sua postagem.

| | Comentários: 13


Esse recurso é bem interessante, caso você queira dar um destaque para uma certa imagem da sua postagem.




Olá,amigos!!!
Chegando com uma postagem bem legal para vocês!!
Venha aprender a colocar o ZOOM na imagem da sua postagem.Esse recurso destina-se a você querer destacar uma imagem da sua postagem.Pode ser quantas você quiser,ok.

Veja a imagem abaixo.Deixe o mouse descansando sobre a imagem e veja o ZOOM dela:




Vem aprender também...


Antes de tudo, faça um BACKUP do layout do seu blog, pois iremos trabalhar com o HTML dele. 


LEIA TAMBÉM: Como fazer backup do layout do blog.


Clique em MODELO no seu painel e em seguida em EDITAR HTML.Abrirá a caixinha de códigos do seu blog.Dentro dessa caixinha,faça o seguinte:

No teclado do seu pc, clique junto as teclas CTRL+F, isso abrirá a caixa de pesquisa do seu HTML. Dentro da caixa, coloque </head> e dê o ENTER do seu teclado.Veja abaixo:



Você achou o </head> e em seguida, acima desse código ( dê um espaço ), cole o código abaixo:

 <script type='text/javascript'>
//<![CDATA[

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>  <style>
img.expando{
margin:10px;
vertical-align: top;
}
</style>   



Veja abaixo:


Depois SALVE.

Toda vez que você quiser colocar uma imagem com efeito em ZOOM, você terá que copiar o código abaixo e clicar em HTML da sua postagem e colar lá.Terá claro que colocar na parte vermelha o endereço da imagem que você quer.

<img border="0" src="ENDEREÇO DA IMAGEM" class="expando" width="100" />

Esse código é do blog DANY'S PLACE.

E ai amigos?? Gostaram???
Deixem seus comentários e compartilhem em suas Redes Sociais.Tem link de compartilhamento no Whatsapp abaixo do post.Bjsssss!!


                       
                                                   
                                                                           

13 comentários:

  1. Ai que máximo, Magda! Estou ficando uma expert com as suas dicas! Bjs
    http://ofantasticomundodairis.blogspot.com.br

    ResponderExcluir
  2. Esse recurso é bastante útil principalmente quando não conseguimos ver bem a imagem e colocando o mouse na imagem ela fica do tamanho que queremos, mas uma dica maravilhosa, bjs.

    ResponderExcluir
  3. Bem interessante este recurso,o que mais me chamou atenção foi não precisar clicar na imagem só o mouse descansando sobre a imagem já vemos o tamanho adequado,gostei e vou tentar.Dica maravilhosa Magda! bj♥

    ResponderExcluir
  4. Oi Magda, acho bem interessante esse zoom, às vezes não quer por imagens grandes, pode adicionar esse recurso. Muito boa essa dica,bjos !

    ResponderExcluir
  5. Esse tutorial é muito bom!
    realmente em determinados layouts não se pode colocar imagens grandes e o tutorial é uma ótima opção!
    bjúús

    ResponderExcluir
  6. Como sempre dando dicas super importantes para nossos blogues bjs!

    ResponderExcluir
  7. Não sabia que podia fazer isso.
    Muito legal.
    Beijos

    ResponderExcluir
  8. Magda e suas dicas super valiosas, ainda mais com tutoriais simples assim!

    Bjokas da Vaci :*

    ResponderExcluir
  9. Amiga gostei bastante da postagem pois você deixou bem explicado como deve ser usado, você sempre nos ensinando algo novo

    ResponderExcluir
  10. Magda vc sempre trazendo otimas dicas gostei bjs

    ResponderExcluir
  11. Magda, estou comentando pelo celular. Amei. Bjs!

    ResponderExcluir

Eu agradeço a todos por comentarem no meu blog e assim que for possível, estarei respondendo aos comentários de todos.Bjsss!!