Ampliar Imagens na Pagina do Blog - Zoom nas Imagens
Ampliar Imagens na Pagina do Blog - Zoom nas Imagens
Existem varias maneiras de colocar uma ferramenta de zoom nas imagens
das postagens do seu blog, isso é mostrar a imagem publicada em tamanho
original (geralmente maior do que aparece no post), por exemplo: Fazer o efeito LightBox - Imagens em Destaque
Mas usamos um código bem simples que despertou a curiosidade de alguns
leitores que nos escreveram por email. Então vamos mostrar o código para
fazer a imagem da postagem aparecer no inicio do blog logo abaixo do
título.
Você pode também ativar o efeito lightbox padrão do blogger, veja neste tutorial como colocar e configurar efeito LightBox nas imagens no blogspot.

A nossa ferramenta para ampliar as imagens no próprio blogger é bem simples você só precisa adicionar um gadget de html/javascript com o seguinte código:
Posicione logo abaixo do título, pois quando a imagem aparecer ela terá o espaço necessário para exibir a imagem em tamanho natural. Veja aqui como alterar as bordas.
Depois disso é só modificar o código do link das imagens quando enviar para o blogger veja abaixo o código original da imagem.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJt5asP_jdUPNy59bwEIkYPnexMTRX_PmpxDnUhGhUxLsjsoveWuyU6fYUCNrV2OX50EQB3x2mxo74Q0GvOpohD8eUzA88KSTuZUjpCD5_FWTTa3xox9tEGBY3DGr7vSaIRFjXL0zrECg/s1600/blog-sucesso.jpg"><img...........
Coloque o endereço da pagina individual da postagem mais o trecho ?ampliar=, então o código fica deste jeito:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.dicasparablogs.com.br/2011/03/segredos-para-criar-um-blog-de-sucesso.html?ampliar=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJt5asP_jdUPNy59bwEIkYPnexMTRX_PmpxDnUhGhUxLsjsoveWuyU6fYUCNrV2OX50EQB3x2mxo74Q0GvOpohD8eUzA88KSTuZUjpCD5_FWTTa3xox9tEGBY3DGr7vSaIRFjXL0zrECg/s1600/blog-sucesso.jpg"><img...........
Você pode também ativar o efeito lightbox padrão do blogger, veja neste tutorial como colocar e configurar efeito LightBox nas imagens no blogspot.

A nossa ferramenta para ampliar as imagens no próprio blogger é bem simples você só precisa adicionar um gadget de html/javascript com o seguinte código:
<script language="JavaScript" type="text/javascript">
var variaveis=location.search.split("?ampliar");
var site = variaveis[1].split("=");
document.write('<center><img style="border: solid 1px #000000;padding:2px;background-color: #FFFF00" src="'+site[1]+'"/></center>')
</script>
Posicione logo abaixo do título, pois quando a imagem aparecer ela terá o espaço necessário para exibir a imagem em tamanho natural. Veja aqui como alterar as bordas.
Depois disso é só modificar o código do link das imagens quando enviar para o blogger veja abaixo o código original da imagem.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJt5asP_jdUPNy59bwEIkYPnexMTRX_PmpxDnUhGhUxLsjsoveWuyU6fYUCNrV2OX50EQB3x2mxo74Q0GvOpohD8eUzA88KSTuZUjpCD5_FWTTa3xox9tEGBY3DGr7vSaIRFjXL0zrECg/s1600/blog-sucesso.jpg"><img...........
Coloque o endereço da pagina individual da postagem mais o trecho ?ampliar=, então o código fica deste jeito:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.dicasparablogs.com.br/2011/03/segredos-para-criar-um-blog-de-sucesso.html?ampliar=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJt5asP_jdUPNy59bwEIkYPnexMTRX_PmpxDnUhGhUxLsjsoveWuyU6fYUCNrV2OX50EQB3x2mxo74Q0GvOpohD8eUzA88KSTuZUjpCD5_FWTTa3xox9tEGBY3DGr7vSaIRFjXL0zrECg/s1600/blog-sucesso.jpg"><img...........

Sem Comentários
Postar um comentário