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
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.
4 comentários, comente você tabêm!:
Legal amigo, tava procurando isso faz um bom tempo. Bom trabalho!
não funcionou
ki merda neim funfa
Aqui funcionou tudo certo. Obrigado. Só uma dúvida, você sabe como adicionar várias imagens interligadas? Por exemplo, depois de clicar em uma foto, basta eu clicar no lado direito da imagem para que ela vá para a próxima foto. Obrigado desde já.
www.webreno.com.br
Postar um comentário