Um dos efeitos que eu mais gosto de usar na postagem é o jQuery Toggle. Ele permite que você "esconda" determinadas parte da sua postagem ou até mesmo conteúdos da sidebar com um código bem simples e rápido de implementar.

Apesar do nome diferente, é um efeito bastante conhecido. Um exemplo de blog que utiliza é o Madly Luv, a Aninha usa em vários tipos de postagens para deixar escondido um conteúdo mais extenso e detalhes sobre algum assunto.

Veja o exemplo:

IMPORTANTE!

Antes de começar você precisa adicionar no seu código a biblioteca jQuery versão 1.8, que esta sendo carregada direto da API do Google. Se você já tem adicionado no seu blog pode pular esta parte.

Vá até o menu Modelo>Editar HTML, adicione o código antes da linha </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Primeiro passo: Adicionar o Javascript

Para adicionar o script que irá executar a função de esconder e revelar o conteúdo, vá até o menu Modelo>Editar HTML e localize a linha: </head>. Logo acima adicione o seguinte código:

<!-- Script JQuery Toggle --> <script type='text/javascript'> $(document).ready(function() { $(".mostrar").hide(); $(".ocultar").click(function() { $(this).next(".mostrar").slideToggle(600); }); }); </script> <!-- Fim Script JQuery Toggle -->

Segundo passo: Adicionar o CSS

Para adicionar o CSS, vá até o menu Modelo>Editar HTML e localize a linha: ]]></b:skin>. Logo acima adicione o seguinte código:

.ocultar { cursor:pointer; font-weight:bold; font-size:14px; /* edite tamanho da fonte */ color:#3D81EE; /* edite cor do link */ padding:10px; margin:0 auto; } .mostrar { padding: 10px; }

Terceiro passo: Adicionar o HTML

Esta parte deve ser adicionada no local onde você quer utilizar, por exemplo: se for dentro da sua postagem, para adicionar o código, você deve criar a postagem e habilitar a opção: "HTML". Em seguida, localize a posição do post onde deseja utilizar e insira o código abaixo:

<div class='ocultar'> >> Mostar / Ocultar conteúdo << </div> <div class='mostrar'> Insira aqui o conteúdo que deve ficar escondido. </div>

Obs.: Se você quiser adicionar o efeito na sidebar, basta ir em Layout>Adicionar Gadget>HTML/Javascript e adicionar o código do terceiro passo. Vale lembrar que o primeiro e segundo passo você deve seguir normalmente, mesmo que você inclua o efeito na sidebar.

Fácil, não é? Separei alguns link úteis para quem quiser entender mais sobre este script.

• Efeito Revelar/Esconder Conteúdo do Post
• Efeito jQuery Toggle para revelar e esconder
• Botão Exibir/Esconder Div com jQuery
• Efeito Toggle com CSS e jQuery
• Mostrar e esconder div com efeito Toggle jQuery