efeito em imagens com o lightbox

1º Passo - Download dos arquivos javascript:

Faça download dos arquivos javascrits necessários para utilização deste efeito:Download

2º Passo - Inserir código javascript no HTML do seu Template:

Vá na aba "layout", entre na edição HTML do seu template, e procure pela tag ]]></b:skin>
e cole logo ABAIXO dela:

<!-- Início do código Lightbox -->

<script language='Javascript' type='text/javascript'>

var cssNode = document.createElement('link');

cssNode.type = 'text/css';cssNode.rel = 'stylesheet';

cssNode.href = ''http://url do lightbox.css';

cssNode.media = 'screen';

cssNode.title = 'using lightbox 2 with GPC';

document.getElementsByTagName("head")

[0].appendChild(cssNode);

</script>

<script src='http://url do prototype.js' type='text/javascript'/>

<script src='http://url do scriptaculous.js?load=effects,builder' type='text/javascript'/>

<script src='http://url do lightbox.js' type='text/javascript'/>

<!-- Final do código Lightbox -->

Na pasta "js", contem os arquivos: effects,builder, lightbox.js, scriptaculous, e prototype.
Hospede todos os scripts contidos nas pasta e procure o seguinte trecho no código e coloque as urls onde está indicado.
Se você notou,no código acima não há espaço para inserir os scripts 'Builder' e 'Effects', mas eles devem ser hospedados na mesma conta.

Procure fazer download dos arquivos javascripts utilizados e hospede em seu próprio site de hospedagem.
- Hospede seus arquivos javascript no Google Site.
- Antes de hospedá-los, crie uma página com o nome "lightbox-1".
- Criada a página, faça o upload dos seus arquivos contidos na pasta "js" dentro desta página.
- Faça upload do arquivo "lightbox.css" em outra página. Repita o procedimento para criar uma página e nomei-a como "lightbox-2" e hospede nela o arquivo css.

Veja o exemplo de como deverá ficar o código completo:

<!-- Início do código Lightbox -->

<script language='Javascript' type='text/javascript'>

var cssNode = document.createElement('link');

cssNode.type = 'text/css';cssNode.rel = 'stylesheet';

cssNode.href = 'http://sites.google.com/site/mundodarkness/lightbox.css';

cssNode.media = 'screen';

cssNode.title = 'using lightbox 2 with GPC';

document.getElementsByTagName("head")

[0].appendChild(cssNode);

</script>

<script src='http://sites.google.com/site/mundodarkness/lightbox-1/prototype.js' type='text/javascript'/>

<script src='http://sites.google.com/site/mundodarkness/lightbox-1/scriptaculous.js?load=effects,builder' type='text/javascript'/>

<script src='http://sites.google.com/site/mundodarkness/lightbox-1/lightbox.js' type='text/javascript'/>

<!-- Final do código Lightbox -->

Evite utilizar os links dos arquivos que constam no código do exemplo acima, pois pode ocorrer algum problema de hospedagem futuro e o efeito deixará de funcionar no seu blog, por este motivo eu sugiro que sempre hospede seus arquivos utilizados.

3º Passo - Ativar o efeito Lightbox nas suas postagens:

Para ativar o efeito Lightbox nas suas postagens, você deverá hospedar todas as imagens que irá utilizar,fora do Blogger (Não utilize o modo fazer 'upload de imagem' no próprio editor html da postagem).
Hospede as imagens no seu álbum Picasa.web
Depois de hospedadas suas imagens, copie a url fornecida(endereço da imagem) e cole neste código, no local indicado:

<a href="URL-DA-IMAGEM" rel="lightbox"><img border="0" src="URL-DA-IMAGEM" style="height: 300px; width: 300px;" /></a>

Importante:
- O efeito funcionará em qualquer postagem, desde que você utilize o código acima para inserir a imagem.
Sempre que for utilizar este efeito nas imagens que irá postar, use o código acima, incluindo o URL da sua imagem no local indicado.

- Ajuste os valores de Width e height, pois será ali que você vai definir o tamanho que sua imagem se apresentará no post, antes de se expandir.
Quando se clica na imagem, ela expandirá e se apresentará no tamanho original.