segunda-feira, 7 de maio de 2012

Botão Input - Esconder e Mostrar Texto

Botão Spoiler

Esta dica que vou mostrar é muito útil para quando escrevemos artigos muito longos e queremos ocultar uma parte do texto, vídeos ou imagens. Deste modo, o leitor pode escolher se quer ler o artigo inteiro ou não. É útil principalmente quando se fazem artigos onde colocamos muitos códigos html, como por exemplo no artigo que fiz: Como Colocar Comentários do Facebook no Blogger.


As principais vantagens de usar este hack são:
  1. Diminui o tempo de carregamento da página.
  2. Torna o artigo menos maçudo para o leitor.
  3. Mantém um bom nível de organização no blog.

Carrega no botão abaixo para veres um exemplo.


Procedimento:


1) Quando estiveres a redigir um artigo para o teu blog, carrega onde diz HTML e insere o código abaixo:


<div class="pre-spoiler">
<input id="xs" value="Leia Mais" style="margin-left: 50px; padding: 0px; width: 80px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ler Mais';}" type="button"> </div>
<div>
<div class="spoiler" style="display: none;">
Aqui é onde colocas o texto que queres esconder e que só aparece quando clicarem no botão.
</div>
</div>

2) As partes que estão a vermelho são as que deves alterar para o teu post. Se quiseres fazer um botão maior é só alterares os números que estão escritos a bolt.

Se gostaste deste artigo considera assinar a Newsletter.

Enter your email address:


Delivered by FeedBurner

Sobre o Autor:
Adicionar caixa sobre autor no rodapé dos posts Facebook | Twitter | Google +

João Paulo Gramacho é o criador do Bizzarru.com onde escreve artigos sobre como ganhar dinheiro, dicas para blogs e técnicas SEO. Além de Webmaster também é licenciado em Química pela Faculdade de Ciências das Universidade de Lisboa.
Reacções:
Blog Widget by LinkWithin