Como criar uma área de texto expandível

Nesta postagem veremos como criar uma área de texto expandível, que é um trecho de texto oculto na postagem, que é mostrado ao ser clicado um link. Veja aqui um exemplo:

 

Lorem ipsum usu an fabellas senserit, wisi errem accommodare nec eu. Mel soleat sadipscing accommodare (ler mais)

at, quo tibique corpora te, mea ea saperet fabellas gloriatur. Ne duo menandri vituperata. Sensibus intellegat et nam.

Este efeito de texto é extremamente útil em postagens longas, com bastante texto, pois evita a sobrecarregação do visual em seu blog e permite que você ponha quanto texto quiser sem encher demais a página. Também é muito fácil de ser adicionado o efeito; basta prestar atenção às instruções dadas abaixo. Então, vamos por passos, para facilitar...

1. Como sempre, acesse o seu painel do Blogger. Vá para a página de edição Layout e a seguir para a sub-página Editar HTML.

2. Clique em Baixar Modelo Completo. Agora, busque nesta página (usando as teclas CTRL + F) o código </head> .

3. Depois de achado o </head>, cole exatamente em cima dele, o seguinte código:

<style>

.texto_oculto {
display:none;
}
.texto_mostrado
{display:inline;
}
</style>

<script type='text/Javascript'>
function expandir_texto (linkid) {var texto_expandivel = document.getElementById(linkid);if (texto_expandivel.className=='texto_mostrado') { texto_expandivel.className='texto_oculto';} else { texto_expandivel.className='texto_mostrado'; }}
</script>

4. Salve as alterações no template.

5. Agora, vá para a postagem onde você deseja aplicar o efeito e clique em Editar HTML que fica junto à Escrever. Cole na postagem o código a seguir:

Lorem ipsum usu an fabellas senserit, wisi errem accommodare nec eu. Mel soleat sadipscing accommodare <a href="javascript:expandir_texto('NOME_AQUI')">(ler mais)</a><div class="texto_oculto" id="NOME_AQUI">at, quo tibique corpora te, mea ea saperet fabellas gloriatur. Ne duo menandri vituperata. Sensibus intellegat et nam.</div>

E agora, preste bastante atenção, pois se você fizer algo errado aqui o código não irá funcionar.

Substitua o primeiro trecho do código que está mostrado em verde pelo texto normal, sem o efeito aplicado.

Substitua o segundo trecho em verde, (ler mais), pelo texto do link. Será este trecho que ativará a área expandível.

E agora troque o terceiro trecho mostrado em verde para todo o texto que ficará oculto, só sendo mostrado quando clicarem em (ler mais).

Finalmente, modifique o trecho em vermelho, NOME_AQUI, para o nome do elemento. Os dois trechos em vermelho devem ser iguais, e em maíusculas. Não dê espaço entre as palavras do nome, e sim utilize a underline. Agora você pode publicar a postagem e ver o efeito.

Nota - Não tente ver se o efeito está funcionando clicando em Visualizar, pois ele não funciona na visualização.