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:
<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="http://1.bp.blogspot.com/-1bzxKq0_84E/TYuscPYr31I/AAAAAAAACGo/oqDXUI4S_QI/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=http://1.bp.blogspot.com/-1bzxKq0_84E/TYuscPYr31I/AAAAAAAACGo/oqDXUI4S_QI/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.

39 comentários :

  1. nossa e eu pensei que fosse tão dificil, achei o código bem simples

    ResponderExcluir
  2. Olá,
    eu gostaria de saber se tem uma ferramenta que você pode republicar o post, com o mesmo número de comentários e etc.
    Obrigada

    ResponderExcluir
  3. acho que não é possivel republicar um post com os comentários e tudo...

    pode exportar o blog, mas não sei o que acontece com os comentários, pois nunca fiz isso.

    ResponderExcluir
  4. aqui tem o link onde mostra como exportar o blog: Fazer backup do Blog

    ResponderExcluir
  5. cara lamento mais eu nao entendi nada descupe precisode imagens de como fazer pra eu poder entender pois ponhar em baixo do titulo eu nao entendi.

    ResponderExcluir
  6. Grupo-SkinBlog
    na pagina design, arraste o código de html/javascript para que fique uma posição no inicio do seu blog ocupando a largura total da pagina ou seja o mais perto do titulo que conseguir

    veja aqui: Problemas para mover ou adicionar gadgets do blog

    ResponderExcluir
  7. Existe alguma maneira de criar uma galeria de imagens sem ter que colocar imagens por imagens colocar tudoo de uma só vez

    ResponderExcluir
  8. esse código tem que ser utilizado em uma imagem por vez... não tem como fazer automatico

    ResponderExcluir
  9. this blog have a so simple template, but i see now 84 people online here.... wow its so amazing for me
    i want my blog like this blog.

    ResponderExcluir
  10. Eu To Com Um problema no picasa web acontece que quando hospedo uma imagem 1341×260 ela fica na dimensão 640×124

    ResponderExcluir
  11. ViηiciusM
    depende de onde hospeda as imagens, se for esse o limite do site não tem o que fazer...

    no caso do blogger ele reduz a imagem mas se clicar nela aparece me tamanho original

    ResponderExcluir
  12. qual é o melhor site para se criar banners ?
    vlw

    ResponderExcluir
  13. Player P# *@*
    já fizemos diversos tutoriais sobre criar banners online... use nossa pesquisa no inicio da pagina e teste alguns..

    é difícil dizer qual o melhor cada pessoa se acerta melhor com um tipo de site ou programa

    ResponderExcluir
  14. ótimo código fabiano! Mas sera que tem como abrir um vídeo em vez de uma imagem? uma vez, tentei um iFrame mas não obtive sucesso, aguardo respostas...

    ResponderExcluir
  15. Caio Corrêa Kawasaki
    o funcionamento do iframe depende do endereço certo da pagina e claro do conteudo desta pagina que aparece no iframe..

    esse tipo de código é como se fosse uma janela de outro site dentro da sua pagina

    ResponderExcluir
  16. olha, eu consegui usar esse código com vídeos do youtube http://www.videos.theccpixel.com/

    ResponderExcluir
  17. Caio Corrêa Kawasaki
    Esse código é para usar em imagens ele não funciona em videos

    ResponderExcluir
  18. Deu tudo certo. Mas Fabiano, o que fazer para que a imagem saia da frente?
    Tipo: A pessoa viu essa, agora quer ver outra, ou até mesmo apenas tirá-la da frente?

    #MUITOBOMOSITE

    ResponderExcluir
  19. Andei analizando o blog de vocês e topo uma parceria ... Se aceitarem entrem em contato com o e-mail do meu blog:
    Animaliavirtual@live.com

    Link:
    http://animaliavirtual.blogspot.com/

    Blog muito bom o de voces !
    Até e proxima o/

    ResponderExcluir
  20. Boa tarde

    Moço! se puder me ajudar tb.. pq eu to mais perdida do que virgem na cama!

    Então.. ta complicado mesmo sem imagens.Seria mto bom esses tutoriais virem com imagens, não entendi como arrastar o código até "início do blog" para ficar perto do título.

    e assim.. eu tenho que hospedar cada imagem? fazer upload para gerar link e inserir nesse código?

    Por favor,no ensejo, vc tem algum tuto falando como coloca-se slideshow no topo do blog no lugar do título e imagem sem links do que foi postado? só slide mesmo.
    Grata pela atenção.

    ResponderExcluir
  21. Cristina
    já fizemos um tutorial sobre slides: Mostrar slides com as postagens recentes do blog, mas acho que em breve vamos fazer outro com imagens maiores...

    ResponderExcluir
  22. Oi Fabiano

    Sobre slides, perguntei sobre um tutorial que tivesse slides no cabeçalho SEM postagens e achei exatamente o que eu queria, a pessoa ensina em um blog e no outro modelou esse blog - pousadaportaldoitambe.blogspot como exemplo que respondeu a minha necessidade.

    Tow aqui simpre! obrigada novamente e =*

    ResponderExcluir
  23. Muito bom o código, se acharem uma maneira de colocar em todas as imagens atualizem o código ok? rs Obrigado! http://trasshygirl.blogspot.com

    ResponderExcluir
  24. Trashy Girl
    ok... se encontrar vou publicar os códigos

    ResponderExcluir
  25. oi fabiano fugindo pouco ai do assunto dessa postagem sabe tenhu corrido na net atras de HTML tipo de apresentasao das imagens do blog mas nao da quelas que fika mudando mas que fique girando mudando todo tempo tipo desse site
    http://www.renders-graphiques.fr/
    cara se vc conseguir um assim pra me nao sei nem como agradecer caso seja nessesario ai meu email
    uerlesc@gmail.com da olha responde eu agradeço mesmo

    ResponderExcluir
  26. uerles
    vou pesquisar e fazer alguns testes e assim que possivel farei uma publicação sobre aquele efeito nas imagens...

    ResponderExcluir
  27. vlw fabiano por responder quando posta esse efeito caso eu nao veja pode avisa mas sempre tou no site aki mas pode passa despecebido agradeço

    ResponderExcluir
  28. Olá Fabiano olha eu aqui novamente, gostaria de saber se tem como criar uma pagina ou uma codigo HTML, pra ponhar as fotos e que fique tipo o orkut para passar as fotos nas setas ANTES E PROXIMO, Desde já obrigado.

    ResponderExcluir
  29. Juninho Pagodão
    essas setas são mais usadas em galeria de imagens.. e tem o código um pouco mais complicado que esse por isso ainda não publicamos sobre isso.

    normalmente as postagens do blog tem poucas imagens

    ResponderExcluir
  30. Não é bem isso que eu queria tipo:
    a foto estar em tamanho pequeno quando você clica nela ela aumenta

    ResponderExcluir
  31. Paulo Douglas
    você fala ampliar a imagem como em sites de vendas (casas bahia, eletro)...?

    veja aqui: Fazer o efeito LightBox - Imagens em Destaque

    mas vai dar um pouco de trabalho dependendo de quantas imagens quiser usar isso

    ResponderExcluir
  32. muito bom eu achei melhor colocar em cada imagem por que n queria colocar em todas obrigadão

    ResponderExcluir
  33. eu tenho uma duvida é que no fundo ficou amarelo tem como deixar transparente ou outra cor??

    ResponderExcluir
  34. Ben
    a cor amarela de fundo é esse código background-color: #FFFF00

    você pode apagar ou colocar outra cor

    ResponderExcluir
  35. Olá Fabiano, boa noite meu amigo! estou precisando de você se puder me ajudar vou ficar agradecido.

    É o seguinte, estou criando um site para uma pequena empresa, na verdade ele já esta criado, o que eu quero fazer agora e criar uma seção para cada produto, EX: AGROPECUÁRIOS, ELÉTRICOS, ARMARINHOS, e etc. ai vem a questão nessas seções criar um albo de fotografias, e queria que elas ficassem em miniatura, e ao clicar elas aumentassem o tamanho,EX: O ALBO DO ORKUT E este site
    aqui" http://www.barrigaverdeac.com.br/index.php?xvar=produtos&xsub=43 "

    Se você tiver esse código ai, ou pudesse desenvolver eu ficaria muito agradecido pode ser html ou php.

    OBS: SÃO MUITAS IMAGENS.

    Por favor me ajude estou desesperado pois ja tentei muito e não consegui.

    ResponderExcluir
  36. adriano e anapaula
    se é para um site é melhor usar um programa para editar o html, alguns fazem galeria de imagens automaticamente....

    ResponderExcluir
  37. Fabiano poderia me citar o nome de algum programa??? pois vi alguns tutoriais, na net que tem sobre o dreamweaver cs4, que da para fazer isso mas no meu caso, uso o dreamweaver cs5, e ele nao tem essa opção, obrigado pela atenção.

    ResponderExcluir