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.
Eu achava que esta ferramenta do Blogger era muito conhecida de todos. No entanto, como recentemente vi que há muitos que não a utilizam simplesmente porque não a conhecem ou não sabem como montar, estou deixando a dica aqui. Não há nada mais fácil do que adicionar este gadget que mostra as últimas postagens publicadas em seu blog. Então, para os que não sabem como fazer, vamos lá.
