Tutorial - Conteúdo Escondido

Tumblr
Hi guys, fiquei muito tempo ausente aqui né? Me perdoem por favor, ando enfrentando muitos problemas em minha vida e estou meio desorientada. Massss não deixarei mais isso interferir aqui ^^
Enfim, estou pensando em colocar uma postadora aqui, o que acham? Ah! Mudei o layout também, gostaram? Eu particularmente gostei bastante, adorei as cores *-*

Enfim², trouxe um tutorial do Sweet Poison que eu tenho salvo aqui no meu computador. Que é quando você clica na imagem/frase e todo o conteúdo aparece.

Entre no seu HTML, tecle ctrl f ou F3 e procure por </head>
Acima dessa tag, cole o seguinte código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/2wl9p6g/G70lj5t0q/animatedcollapse.js"></script><script type="text/javascript">animatedcollapse.addDiv('jason', 'fade=1,height=80px')animatedcollapse.addDiv('kelly', 'fade=1,height=100px')animatedcollapse.addDiv('michael', 'fade=1,height=120px')animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted//$: Access to jQuery//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID//state: "block" or "none", depending on state}animatedcollapse.init()</script>

Agora, vá até o seu layout, adicione um gadget HTML/JavaScript, cole o seguinte código fazendo as devidas modificações e salve.
<a href="javascript:animatedcollapse.toggle('dog')"><img src="URL da imagem"/></a><div id="dog" style="display:none">Conteúdo escondido</div>

Um comentário:

  1. Se for para evitar um hiatus uma postadora é bem vinda. E eu gostei do lay^^ é simples, mas bonito. Ainda não conhecia esse tuto, gostei dele, é uma boa pra não lotar a page do blog com conteúdo extenso. Vou salvar o link do post pra ajudar nos meus futuros lays^^ pq agora eu acabei de fazer um há pouco tempo, hehehe...kissus!

    www.reino-criativo.blogspot.com

    ResponderExcluir