Esconder conteúdo com uma imagem

 Vocês já devem ter visto aqui no CB que a c-box fica "escondida" na barra lateral e só abre quando quando você clica na imagem não é?

Muita gente 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 Material Garotas(http://mgarotas.com/) pelo código

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

Cole logo abaixo 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 C-BOX"/></a>

<div id="dog" style="display:none"> Coloque aqui o conteúdo</div>

Você pode colocar uma imagem ou texto para esconder o conteúdo do gadget.