Mostrar e esconder conteúdo dentro do post


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>.


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:



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:



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:



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.

2 comentários: