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.
Aperte Update Preview para ver se estĂ¡ tudo certo com o seu theme, se estiver tudo ok, salve.
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.



3 ComentĂ¡rios
JĂ¡ usei este efeito, fica muito lindo mesmo.
ResponderExcluirObrigado pelo comentĂ¡rio, sim esse efeito e muinto bom xD
ResponderExcluirObrigada! VocĂª me salvou, estava tentando de todo jeito fazer esse efeito no meu tumblr mas nĂ£o estava conseguindo. Obrigada mesmo. *-*
ResponderExcluirDeixe seu comentĂ¡rio sobre o artigo a cima fique Ă¡ vontade, seu comentĂ¡rio Ă© muito importante !