Galeria de Imagens Lightbox no Blogger

cake, chocolate, cookie, cupcake, dessert, donut, doughnut, food, yummie

Olá pessoal, como estão?  Hoje, irei trazer esse tutorial que é muito bom e eu adoro! Clique em Leia Mais para conferir!

Esse tutorial eu aprendi em um blog que adoro e se chama Mundo Blogger. Recomendo a todos!

O EFEITO

Imagem [www.bloggerenciado.com.br]


OBS.: Não use este tutorial se você já possuir um script grandioso em ação (por exemplo, um slide), pois além de não funcionar, ambos podem simplesmente parar.


TUTORIAL

 1º PASSO  - Acima de </head>, cole o seguinte script:

Clique aqui para acessar o código

Obs.: Não é preciso alterar nada aqui. Se você preferir, pode hospedar os seus scripts caso os meus sejam apagados XD

 2º PASSO  - Crie uma página destinada a ser a galeria de imagens e nela cole o código:

<center>
<a href="URL_DA_IMAGEM" rel="lightbox"><img border="0" src="URL_DA_IMAGEM_MINIATURA" style="height: 120px; width: 200px;"/></a>
<a href="URL_DA_IMAGEM" rel="lightbox"><img border="0" src="URL_DA_IMAGEM_MINIATURA" style="height: 120px; width: 200px;"/></a>
<a href="URL_DA_IMAGEM" rel="lightbox"><img border="0" src="URL_DA_IMAGEM_MINIATURA" style="height: 120px; width: 200px;"/></a>
<br />
<a href="URL_DA_IMAGEM" rel="lightbox"><img border="0" src="URL_DA_IMAGEM_MINIATURA" style="height: 120px; width: 200px;"/></a>
<a href="URL_DA_IMAGEM" rel="lightbox"><img border="0" src="URL_DA_IMAGEM_MINIATURA" style="height: 120px; width: 200px;"/></a>
<a href="URL_DA_IMAGEM" rel="lightbox"><img border="0" src="URL_DA_IMAGEM_MINIATURA" style="height: 120px; width: 200px;"/></a>
</center>

Editando o código:


URL DA IMAGEM: onde estiver você cola o URL da imagem que você deseja que fique no efeito galeria. É importante que a imagem não seja exageradamente grande, pois o efeito acompanha o tamanho da imagem.

height: nesta área você define a altura da miniatura da imagem. Apague somente o número, o "px" é essencial que continue.

width: nesta área você define a largura da miniatura da imagem. Apague somente o número, o "px" é essencial que continue.

OBS.: Você também pode usar este código para imagens em postagens ou em qualquer outra área do blog.

Gostaram do post? Espero que sim XD até o próximo :3