Efeito esconder/revelar conteúdo na postagem

 

Trago para vocês um efeito super legal que encontrei no Mundo Blogger.
É fácil e fica com um efeito incrível. Quem desenrola mais no HTML também pode usar este efeito 
na barra lateral em algum Gadget.

EXEMPLO  DE CONTEÚDO OCULTO

No html de seu blog, coloque o código abaixo logo acima da tag ]]></b:skin> 

#box-toggle {

margin:0 auto;

}

#box-toggle .tgl {

margin-bottom:20px;

}

#box-toggle span {

display:block;

cursor:pointer;

font-weight:bold;

font-size:14px; /* edite fonte */

color:#3D81EE; /* edite cor do link */

margin-top:15px;

} 

Agora Procure pela tag </head> e cole o seguinte código antes dela:

<!--ScriptjQuery Toggle revelar esconder Inicio --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">jQuery.fn.toggleText = function(a,b) {return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));}$(document).ready(function(){$('.tgl').before('<span>[Ver Conteúdo]</span>');$('.tgl').css('display', 'none')$('span', '#box-toggle').click(function() {$(this).next().slideToggle('slow').siblings('.tgl:visible').slideToggle('fast');$(this).toggleText('Revelar','Esconder').siblings('span').next('.tgl:visible').prev().toggleText('Revelar','Esconder')});})</script><!--ScriptjQuery Toggle revelar esconder Final--> 

Quando for utilizar este efeito é necessário colar o código abaixo na aba HTML do post. Agora volte para a aba escrever e continue o post na parte que ficará oculta!

<div id="box-toggle"><div class="tgl">Coloque aqui o conteúdo que ficará Oculto</div></div> 

Kissus