Tutorial - Conteúdo Escondido

Oi meus amores,aqui é a Laura :3
Hoje vou ensinar como esconder um conteúdo.


Para aprender clique em leia mais :3
Nível de Dificuldade: Fácil


Entendendo

Nesse tutorial,iremos criar algo que ao clicar aparece o conteúdo.Assim:



Como Fazer

1- Vá em Modelo >> Editar HTML
2- Aperte CTRL + F e procure por:

</head>

3- Acima, cole:
<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>

4-  Salve.
5- Vá para Layout >> Adicionar um novo Gadget(HTML/Javascript) e cole:

<a href="javascript:animatedcollapse.toggle('dog')"><img src="URL da Imagem"/></a>

<div id="dog" style="display:none">Conteúdo escondido</div>

6- Onde está escrito URL da Imagem é para colocar o url da imagem que ao clicarmos aparecerá o conteúdo escondido.E onde está escrito Conteúdo escondido,é para colocar o que você quer esconder,pode ser um texto,uma imagem,o que você quiser.

7- Salve e está pronto.

Gostaram do tuto? Aprendi no Sweet Poison.
Beijos e tchau tchau :3

6 bombons de chocolatii comentaram :3:

  1. Esse tutorial dá um resultado bem simples, mas é divino *o* FAZ MILAGRES! haushaus
    Beijos
    # chilipiink.blogspot.com.br

    ResponderExcluir
  2. Parece que você adivinhou o que eu estava procurando! Muito obrigado! Amei muito o tutorial!!

    http://garotavertigem.blogspot.com.br/

    ResponderExcluir
  3. Noooooooooooooooooossssssa! È só ficar sem entrar aqui um tempo e a Lala arrasa em tudo! Amei tudo tudo tudo Lala!
    encantosdeumaadolescente.blogspot.com

    ResponderExcluir
  4. Muito legal o tuto, dá para economizar um grande espaço!

    Tem um selinho para você lá no blog.
    Clique aqui para ir ao selinho

    diamantesdeumagarota.blogspot.com

    ResponderExcluir
  5. Ui, agua na boca.

    http://justt-aa-girl.blogspot.com.br/

    ResponderExcluir
  6. OLHA COMO A LALA É LINDA COLOCOU IMAGEM DO MEU BLOG *u*
    FÃ NÚMERO 1 VIU?

    ResponderExcluir