Dicas para Blogs e Sites

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:

<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/AVvXsEgoh4wVzwD_ItmwyCFEoFFx4I5tm7xHKpVoydgsX-ZnGFuGtOr2RePZWbxcWULhYt4zg-WPTFnEqYCSnvC68h2XFMFHaaWYxRR9Pjzk7PZ5e6Py0yFEsfiql7N6ci3lF4DmynjXa7lxeHE/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/AVvXsEgoh4wVzwD_ItmwyCFEoFFx4I5tm7xHKpVoydgsX-ZnGFuGtOr2RePZWbxcWULhYt4zg-WPTFnEqYCSnvC68h2XFMFHaaWYxRR9Pjzk7PZ5e6Py0yFEsfiql7N6ci3lF4DmynjXa7lxeHE/s1600/blog-sucesso.jpg"><img...........

Esse procedimento tem que ser feito em cada imagem ainda não temos uma maneira de aplicar em todas as postagens automaticamente. E já que estamos falando sobre imagens no blog veja alguns assuntos interessantes para ajudar com as imagens no seu blog:
Aparecer na Pesquisa de imagens Google
Colocar bordas nas imagens do blog
Hospedar Imagens no Blogger - Hospedagem Grátis
Programas Gratuitos para Edição de Imagens

O gadget que adicionou ficará invisível somente aparecendo quando tiver um endereço de imagem após a palavra ampliar. Já publicamos diversas postagens usando esse código e testamos nos navegadores Firefox, Internet Explorer e Google Chrome sem problemas.

Esse código funcionaria também se colocasse somente “?ampliar” antes do endereço da imagem sem o endereço da postagem, mas não recomendamos fazer isso senão futuramente se retirar o gadget onde a imagem em tamanho natural aparece e alguém clicar na imagem aparece a mensagem de pagina não encontrada.

Marcadores: Acessórios, Códigos, Configurações Avançadas, Imagens