http://dl.dropbox.com/u/8394462/protegendo.css

Efeito LightBox para imagens no Blog e Wordpress

Por : adm_sombra
sexta-feira, 8 de outubro de 2010


Informações
Plataforma: Wordpress e blog
Esse modelo que vou ensinar funciona bem tanto no Blogger (Blogspot) quanto no Wordpress e é bem simples de usar. Para ver o exemplo do que vamos fazer e qual o resultado, visite o link de teste:
Testando efeito Lightbox no 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 palavra
 
Imediatamente ACIMA dela, cole o seguinte código abaixo
-----------------------------------------------------------------------
Se for no Blogger (Blogspot), vá ao menu "Layout" ~> "Editar HTML" então
procure a palavra

em cima ta tag
 
cole o seguinte codigo tanto no Wordpress ou Blogger (Blogspot)



Salve sem modificar nada nesse código.
É 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

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:
Se for usar um link texto:
Coloque a URL de endereço da imagem no tamanho original onde . 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.

0 comentários:

Postar um comentário