Descrição:
As imagens são parte importante para a estrutura de um blog e para a qualidade do conteúdo. Vou mostrar como exibir imagens em miniatura e abrir na mesma janela, sem fechar seu blog. É um efeito super profissional e ótimo para quem tem blog de fotografia ou precisa destacar as imagens com mais qualidade, sem reduzir pra caber na área de postagem.
Obs.: Esse recurso da conflito com o gadget de Seguidores do Blogger, quando aberto no Internet Explorer. Por isso recomendamos que faça testes antes de aplicar definitivamente em seu blog. Vale lembrar: sempre faça backup de seu blog antes de mudar qualquer coisa.
Como criar o efeito LightBox no Blog
A primeira coisa a fazer é abrir o código-fonte de seu blog.
Passo 1: O JavaScript.
Se for no Wordpress.org, abra o menu "Aparência" ~> "Editor" e abra o modelo "Cabeçalho (header.php)".
Procure pela linha "</head>". Imediatamente ACIMA dela, cole o seguinte trecho de código.
Se for no Blogger (Blogspot), vá ao menu "Layout" ~> "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 -->
<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 nesse 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.
Se você usa o Wordpress.org, pode simplesmente usar as imagens em sua hospedagem normalmente. Se você usa o Blogger (Blogspot) terá que arrumar um local para armazená-las.
Passo 2: 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>
<img src="URL_da_IMAGEM_MINI" border="0">
</a>
_____________________________________________________________
Então altere apenas onde está marcado de vermelho. Nesse caso você pode usar duas imagens, sendo uma a original e a outra uma miniatura que será exibida como opção de clique. Você também pode simplesmente redimensionar a original.
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.
O que mostramos aqui no passo 2 é exatamente o código HTML para adicionar imagens em qualquer lugar de seu blog ou site. Para que o LightBox funcione, inserimos um trecho "REL" que busca a função a ser executada no JavaScript.
Postar um comentário