Efeito LightBox para imagens no Blog

Que tal abrir imagens com efeito LightBox no blog, encontrei essa dica no ferramentasblog e agora vou estar repassando essa dica para vocês.

Essa dica permite exibir imagens em miniatura, abrir em zoom dentro da pagina, com um efeito super profissional, essa dica tanto serve para o blogger e Wordpress.org.

Atenção antes de colocar este efeito e bom saber que da conflito com o gadget de seguidores do blogger, portanto e bom não colocar os Seguidores no blog.


Para colocar o efeito no seu blog siga as instrunções a seguir:

1° Adicionar no Wordpress.org:
Se for na plataforma Wordpress abra o menu "Aparência" ~> "Editor" e abra o modelo "Cabeçalho (header.php)".

2° E procure pela tag </head> e cole o código a seguir logo acima dela:

3° Se for no Blogger (Blogspot), vá ao menu "Modelo" ~> "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 -->

4°e salva as modificações:

5° Agora vá na edição html da sua postagens e cole o código:


Se for usar uma miniatura da imagem:

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

E altere onde esta escrito:
URL_da_IMAGEM_ORIGINAL: por endereço da imagem grande que vai aparecer com efeito quando clicar
URL_da_IMAGEM_MINI: o endereço da mini imagem que vai aparecer na postagens antes de ser clicada.

Se for usar um link texto:


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


E altere onde esta escrito:
URL_da_IMAGEM_ORIGINAL: pelo endereço da imagem que vai aparecer
Texto do Link: pelo texto ou link quando clicar


Pronto!