quarta-feira, 10 de dezembro de 2008

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.

3 comentários:

Otto disse...

Muito útil, amigo! Tá de parabéns. Estou iniciando meu blog, e esse já está no favoritos. =D
Tem como fazer para que esse "(leia mais)" fique em forma de botão? É que eu quero esconder links e só quando a pessoas clicasse no botão ele abriria a postagem toda, mas seria bom se os links redirecionassem para outra página.

Ficaria muito grato se me ajudasse!

EUCALOI disse...

PARABÉNS!!

Seu blog é fantastico. Sua forma de ensinar o passo-a-passo é muit paciente e isso passa uma segurança pra quem vai desenvolver a atividade. Vou te adcionar ao meu blog colocar o seu link.
Caso permita uma pergunta, gostaria de saber como posso colocar uma barra de rolagem nas postagens.

Um agrande abraço.

Lucas Pettine disse...

Bom, acho seu blog muito útil para mim, que estou começando a aprender mais. Nessa parte de "Leia mais", tentei colocar aqui no meu blog agora, e não tive cabeça pra colocar, porque é muito complicado. Se você puder me ajudar melhor, fico grato. Seu blog já está no parceiro do meu. Só pegar o banner ou o link do meu e colocar aqui no seu como Parceiros. http://futebol-online-com.blogspot.com.br/

Abraços, Lucas Pettine.

Faça o seu comentário!

Obrigado por deixar seu comentário! Para outros assuntos veja também: