22 de jul de 2012

Esconder conteúdo de um Gadget.


O tutorial de hoje é o de esconder o conteúdo de um Gadget. Esse recurso era muito usado para esconder a c-box, mas também pode ser usado para esconder afiliados ou textos muito grande na sidebar. Simplificando: ele pode ser usado para qualquer coisa. 
O efeito consiste em clicar em uma palavra ou imagem e abrir uma informação "escondida" embaixo dela. 


1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

</head>

2- ACIMA disso, 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>

3- Visualize e se estiver tudo certo, salve.


Para esconder um Gadget:
<a href="javascript:animatedcollapse.toggle('dog')"><img src="LINK DA IMAGEM QUE VAI ABRIR O GADGET"/></a>
<div id="dog" style="display:none"> CONTEÚDO DO GADGET</div>

Nenhum comentário:

Postar um comentário

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!