Lightbox em fotos para seu site ou blog

Antes de instalar ou modificar algo em seu template você pode criar um ponto de restauração, assim, se não gostar do efeito ou se ele não funcionar corretamente, você pode simplesmente restaurar para um ponto anterior à instalação do tutorial. Clique aqui e aprenda a Fazer backup de seu modelo.

Bom, o Efeito LightBox para o blogger é bem simples, não tem muito segredos basta seguir corretamente as instruções passadas a baixo e lembrando que este tutorial é um pedido do nosso amigo ‘Vinicius’ que queria saber com faz este efeito. Então vamos lá.

01. Acesse sua conta no blogger.

02. No seu painel de controle acesse a opção [Design] do blog que você quer modificar.

03. Na próxima tela, clique em [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 no 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.

04. 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>

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. Ai é só desfrutar do efeito LightBox para Blog.
Bom, esta ai o primeiro tutorial do Templates Pluss, não foi uma idéia decorrente do Templates Pluss mais é um passo que vai dar uma ajudinha a ter mais conceitos em seu blogger. :)