ProPixel

Participe do fórum, é rápido e fácil

ProPixel
ProPixel
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Ir para baixo
filipepepe
filipepepe
Membro

<b>Idade</b> Idade : 24
<b>Posts</b> Posts : 25
<b>Créditos</b> Créditos : 0
<b>Respeito</b> Respeito : 0
hoje um dia feli
blogspot.

Código:
vou falar de como fazer efeito lightbox no 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 -->


Salve sem modificar nada nesse código.

agora vem a parte mais facil para min rsrsrsrsrsrs.  É preciso hospedar as imagens em algum lugar ou usar imagens que já estejam hospedadas eu recomendo http://pt-br.tinypic.com/. mais o poblema é  que não funciona se a imagem estiver no PicasaWeb não sabemos por que.

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.


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>

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.
Ir para o topo
Permissões neste sub-fórum
Não podes responder a tópicos