14 de jun de 2013

Tutorial: Escondendo conteúdos do blog.

  

Hi :3
Vocês já devem ter visto aqui no A.R que a elite Sister's e Afiliados fica "escondida" na barra lateral e só abre quando você clica na imagem não é?
A Anna pediu, e cá estou eu pra ensinar vocês como colocar esse efeito no seu blog. E o legal é que você pode usar para ocultar outras coisas, seja na sidebar ou nas postagens. 
Antes do tutorial, tenho que dar os créditos ao Cherry Bomb pelo código!


 Agora sim, vá no HTML do seu blog (Modelo > Editar HTML), aperte Ctrl+F e procure pela tag </head>

 Cole logo acima de </head> esse 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>
Salve as alterações e pronto!

Você só precisa colocar o código abaixo onde quiser esconder alguma coisa:

<a href="javascript:animatedcollapse.toggle('dog')"><img src="LINK DA IMAGEM QUE VAI ABRIR A O CONTEÚDO"/></a>
<div id="dog" style="display:none"> Coloque aqui o conteúdo</div>

Coloque o link da imagem onde está em negrito, vocês podem usar essa imagem: 


Curtiu? Vai usar também? então comenta! =)

Nenhum comentário:

Postar um comentário

Não vai sair sem comentar, né?! xD

Copyright © 2015 | Design e Código: Sanyt Design | Tema: Viagem - Blogger | Uso pessoal • voltar ao topo