As imagens são parte importante para a estrutura de um blog e para a qualidade do conteúdo. Vou mostrar como exibir imagens em miniatura e abrir na mesma janela, sem fechar seu blog. É um efeito super profissional e ótimo para quem tem blog de fotografia ou precisa destacar as imagens com mais qualidade, sem reduzir pra caber na área de postagem.

Esse modelo que vou ensinar funciona bem tanto no Blogger (Blogspot) quanto no WordPress e é bem simples de usar. Para ver o exemplo do que vamos fazer e qual o resultado, visite o link de teste:

• Testando efeito Lightbox no Blog

Obs.: Esse recurso da conflito com o gadget de Seguidores do Blogger, quando aberto no Internet Explorer. Por isso recomendamos que faça testes antes de aplicar definitivamente em seu blog. Vale lembrar: sempre faça backup de seu blog antes de mudar qualquer coisa.

Créditos do LightBox

O serviço do LightBox é “open source” (código aberto) e gratuito. Esse é o site oficial com todos os detalhes e formas de uso:

• LightBox2 – Visão Geral (em inglês)

Como criar o efeito LightBox no Blog

A primeira coisa a fazer é abrir o código-fonte de seu blog.

Passo 1: O JavaScript.

Se for no WordPress.org, abra o menu “Aparência” ~> “Editor” e abra o modelo “Cabeçalho (header.php)”.

Procure pela linha “</head>“. Imediatamente ACIMA dela, cole o seguinte trecho de código.

Se for no Blogger (Blogspot), vá ao menu “Layout” ~> “Editar HTML” então procure a linha “</head>” e imediatamente ACIMA, cole o trecho que segue:

<!-- JavaScript efeito Lightbox em fotos -->
<link href='http://www.ferramentasblog.com.br/imagens/lightbox/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.ferramentasblog.com.br/imagens/lightbox/js/prototype.js' type='text/javascript'/>
<script src='http://www.ferramentasblog.com.br/imagens/lightbox/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://www.ferramentasblog.com.br/imagens/lightbox/js/lightbox.js' type='text/javascript'/>
<!-- JavaScript efeito Lightbox em fotos -->

Salve sem modificar nada nesse código.

Agora vem a parte mais complicada. É preciso hospedar as imagens em algum lugar ou usar imagens que já estejam hospedadas. O problema é que não funciona se a imagem estiver no PicasaWeb (padrão do Blogger) – não sei o motivo disso.

Se você usa o WordPress.org, pode simplesmente usar as imagens em sua hospedagem normalmente. Se você usa o Blogger (Blogspot) terá que arrumar um local para armazená-las.

Passo 2: Como inserir no Blog

Em qualquer lugar de seu blog, seja dentro de um post ou até na sidebar (barra lateral), use o seguinte código para fazer funcionar o LightBox:

Se for usar uma miniatura da imagem:

<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">
<img src="URL_da_IMAGEM_MINI" border="0">
</a>

Então altere apenas onde está marcado de vermelho. Nesse caso você pode usar duas imagens, sendo uma a original e a outra uma miniatura que será exibida como opção de clique. Você também pode simplesmente redimensionar a original.

Se for usar um link texto:

<a href="URL_da_IMAGEM_ORIGINAL" rel="lightbox">Texto do Link</a>

Coloque a URL de endereço da imagem no tamanho original onde está de vermelho. E onde está azul, escreva o texto para clicar e exibir a imagem.

O que mostramos aqui no passo 2 é exatamente o código HTML para adicionar imagens em qualquer lugar de seu blog ou site. Para que o LightBox funcione, inserimos um trecho “REL” que busca a função a ser executada no JavaScript.

Outros tutoriais sobre Imagens:

• Colocar legenda em imagens no Blogger – Novo recurso nativo
• Como enviar imagens para o PicasaWeb
• Usando Imagens no Blog Blogger (serve para WordPress também)