Descrição: Bom, o Efeito LightBox para o blogger é bem simples, não tem muito segredos basta seguir corretamente as instruções passadas a baixo e lembrando que este tutorial é um pedido do nosso amigo ‘Vinicius’ que queria saber com faz este efeito. Então vamos lá.
Passo 1: O JavaScript.
Vá ao menu "Layout" --> "Editar HTML" então procure a linha "</head>" e imediatamente ACIMA, cole o trecho que segue:
<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 -->
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 porquê desse aviso, porque as imagens postadas aqui na Bcreate são todas do PicasaWeb mais fica ai essa duvida, continuando...
Se você usa o Blogger (Blogspot) terá que arrumar um local para armazená-las. Como o imageshack.us ou tinypic.com.
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:
<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:
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. Ai é só desfrutar do efeito LightBox para Blog.
Bom, esta ai o primeiro tutorial da Bcreate, não foi uma idéia decorrente da Bcreate mais é um passo que vai dar uma ajudinha a ter mais conceitos em seu blogger.
Nossa Avaliação Do Conteúdo:



Passo 1: O JavaScript.
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 -->
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 porquê desse aviso, porque as imagens postadas aqui na Bcreate são todas do PicasaWeb mais fica ai essa duvida, continuando...
Se você usa o Blogger (Blogspot) terá que arrumar um local para armazená-las. Como o imageshack.us ou tinypic.com.
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>
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>Bom, esta ai o primeiro tutorial da Bcreate, não foi uma idéia decorrente da Bcreate mais é um passo que vai dar uma ajudinha a ter mais conceitos em seu blogger.
Nossa Avaliação Do Conteúdo:
poha abilita seleção de texto ai, pq se nao nao da pra copiar mano!
ResponderExcluirse vc usa o google chrome esquese pq n da pra seleciona mesmoo!
ResponderExcluirUsem Ctrl+c e ctrl+v!!!
ResponderExcluirE NOIS B-C
ResponderExcluiro ruim e que bugo meus seguidores =/
ResponderExcluir