Ticker

6/recent/ticker-posts

Recent Post

Efeito Lightbox para tumblr


No tutorial abaixo vamos ensinar como colocar um efeito lightbox nas suas imagens do tumblr. Para ver como o efeito funciona acesse http://efeitolightbox.tumblr.com/ e clique em uma das imagens.

Importante ressaltar que esse efeito nĂ£o irĂ¡ funcionar em todas as imagens do seu tumblr, sĂ³ funcionarĂ¡ nas imagens que vocĂª colocar o cĂ³digo.                                                                    
1º Passo) Abra o Customize e vĂ¡ em Theme (Na aba Custom HTML)

2º Passo) Copie o cĂ³digo a seguir e cole logo abaixo de <head>

<style type="text/css">
<!--
#lightbox{background-color:#eee;padding: 10px;border: 0px solid #000000;}
#lightboxCaption{font-size: 0.8em;padding-top: 0.4em;}
#lightbox img{ border: none; }
#overlay img{ border: none; } 
#overlay{background-image: url(http://img534.imageshack.us/img534/6039/overlayo.png);}
* html #overlay{
background-color: #333;background-color: transparent;background-image: url(http://img43.imageshack.us/img43/3623/fundomg.gif);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://img179.imageshack.us/img179/5197/loading.gif", sizingMethod="scale");}
-->
</style>
<script type="text/javascript" src="http://static.tumblr.com/apsuwxt/cqilydsoh/lightbox.js"></script>                                                                                                                        
Aperte Update Preview para ver se estĂ¡ tudo certo com o seu theme, se estiver tudo ok, salve.

3º Passo) Abra um post do tipo Texto e clique em HTML                                                     

4º Passo) No HTML do post cole o cĂ³digo abaixo 

<a href="Link da Imagem" rel="lightbox" title="DescriĂ§Ă£o da Imagem"><img src=" Link da Imagem "></a>                                                                                                     
No lugar de Link da Imagem coloque o link da imagem que vocĂª quer, de preferĂªncia uma imagem que jĂ¡ esteja no tumblr. No lugar de DescriĂ§Ă£o da Imagem coloque a descriĂ§Ă£o que irĂ¡ aparecer no final da imagem quando ela abrir no box.




Assinar Feed


CLIQUE AQUI E DEIXE SEU COMENTARIO

Postar um comentĂ¡rio

3 ComentĂ¡rios

  1. JĂ¡ usei este efeito, fica muito lindo mesmo.

    ResponderExcluir
  2. Obrigado pelo comentĂ¡rio, sim esse efeito e muinto bom xD

    ResponderExcluir
  3. Obrigada! VocĂª me salvou, estava tentando de todo jeito fazer esse efeito no meu tumblr mas nĂ£o estava conseguindo. Obrigada mesmo. *-*

    ResponderExcluir

Deixe seu comentĂ¡rio sobre o artigo a cima fique Ă¡ vontade, seu comentĂ¡rio Ă© muito importante !

Fique sempre atualizado!
Receba artigos por email!
Widget by Lucrar Com Blog Instale este widget
Related Posts Plugin for WordPress, Blogger...