Efeito Lightbox

Coloque um efeito Lightbox em seu blog. Não sabe o que é Lightbox? Vou encinar: Lightbox é um efeito para imagens e links. Você coloca uma foto pequena em sua postagem, mas na hora que o leitor clicar nela, ela se abrira maior com um super efeito.

1. Instalação
Vá no seu blog em Design > Editar HTML e cole o seguinte código acima de </head>:

<!-- 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 -->

2. Usando o efeito nas imagens do picasa (do Blogger)
Você pode usar o efeito nas próprias imagens que você hospeda do picasa (no próprio Blogger) ou pegar da web.

Código original de uma imagem qualquer hospedada do picasa (do Blogger):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEYZfibQpItz_fDTM-oyuVVoDmGLidiWQnS0zz5YfBIU9pQgr-Zv9-A9OvCcYOdB01zu8SKC9Wr2AkarAoGcGtszrF6XKylavIO-Uigjd9EUNv_XiIXe9HlXibkXw3XOwWpMvNgxQ44k/s1600/neve.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEYZfibQpItz_fDTM-oyuVVoDmGLidiWQnS0zz5YfBIU9pQgr-Zv9-A9OvCcYOdB01zu8SKC9Wr2AkarAoGcGtszrF6XKylavIO-Uigjd9EUNv_XiIXe9HlXibkXw3XOwWpMvNgxQ44k/s200/neve.jpg" width="100" /></a>

Agora coloque antes style=" o código rel="lightbox", ficando:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEYZfibQpItz_fDTM-oyuVVoDmGLidiWQnS0zz5YfBIU9pQgr-Zv9-A9OvCcYOdB01zu8SKC9Wr2AkarAoGcGtszrF6XKylavIO-Uigjd9EUNv_XiIXe9HlXibkXw3XOwWpMvNgxQ44k/s1600/neve.jpg" imageanchor="1" rel="lightbox" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEYZfibQpItz_fDTM-oyuVVoDmGLidiWQnS0zz5YfBIU9pQgr-Zv9-A9OvCcYOdB01zu8SKC9Wr2AkarAoGcGtszrF6XKylavIO-Uigjd9EUNv_XiIXe9HlXibkXw3XOwWpMvNgxQ44k/s200/neve.jpg" width="100" /></a>

3. Usando os efeitos nas imagens da web
Coloque o seguinte código no HTML de sua postagem:

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

4. Usando os efeitos em links
Colque o seguinte código no HTML de sua postagem:

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

Fonte: Ferramentas Blog.