Botão Imput – Esconder e mostrar textos

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Algumas vezes queremos colocar trechos de artigos muito longos ou queremos esconder parte de textos onde o leitor pode escolher se vai ler tudo ou apenas parte do que está contido. Aqui no [ Ferramentas Blog ] uso esse recurso num artigo que tem códigos muito longos e faz a página ficar inviável para leitura, então escondo os códigos com um botão que abre e fecha as linhas do código e o leitor abre se quiser ver tudo.

É bem simples de aplicar e vou mostrar aqui como funciona e como colocar em seu blog.

Se quiser ver em outro artigo isso funcionando, abra o “Paginação Numerada para Blog”.

Esse código é colocado no HTML do seu artigo, ou seja, depois de digitar seu artigo por completo, vá na aba “Editar HTML” do editor de textos do Blogger para inserir as linhas de código onde forma apropriado, onde você quer que o botão apareça para esconder alguma parte do texto.

editarHTML

Agora, insira o código abaixo conforme indicado:

Aqui vem o texto que vai aparecer e que vem antes do botão...
<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 = 'Leia Mais';}" type="button"> </div>
<div>
<div class="spoiler" style="display: none;">
Aqui você coloca o texto que quer esconder e que só vai aparecer quando clicarem no botão.
</div>
</div>

E aqui a continuidade do texto do seu artigo que aparece abaixo do botão e continua mesmo depois que clicam para ver o trecho escondido.

Faça as mudanças conforme indicado e cole os códigos apenas depois de digitar e formatar todo o texto. Só assim escolha as partes que vai esconder. Pode colocar o código mais de uma vez por página normalmente, bastando repetir o processo.

O texto em vermelho poder ser modificado.

para ver os créditos, onde foi que encontrei esse Hack, basta clicar no botão.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

22 Comentários

  1. Gostei, apesar de que eu não vou usar muito, mas vou cometar!!!

    Gostei do hack, num antigo blog meu, eu necessitei e não achei…
    Mas agora, não preciso mais… rsrsrs!!!

    Responder

  2. Como sempre tu superou tudo meu rei!Obrigada mais uma vez.
    Seu blog com certeza tera um banner em meus 5 blogs.
    Abraços

    Responder

  3. eu queria saber como tornar uma imagem minha, o botao de ocultar e mostrar, mas gostei muito tbm.

    Responder

  4. Beleza Marcelo! Estava procurando algo parecido para colocar no meu blog, mas não encontrava o código certo. As vezes meus artigos ficam muito extensos, e com este código vai ficar legal até para dar dicas no meio do texto.
    Valeu!

    Responder

  5. consegui vlw mesmo mais não sei se foi eu ou se é o código mais eu usei 2 botões na mesma postagem uma escrito megaupload e aparece os links e o outro escrito uploading e quando eu clico no mega abre normal e quando eu clico no uploading abre o mega
    qualquer um que eu clique abre a mesma coisa
    tem solução ???

    Responder

  6. Muito legal!
    Obrigado. Eu estava procurando, achei alguns posts em outros blogs sobre o mesmo tema, mas não estava nada didático.
    Este sim está ótimo e já consegui inserir o botão "leia mais" no meu blog.

    Valeu.

    Responder

  7. Pessoal,

    para colocar mais de um Butão com o código acima em um só post, é só fazer o seguinte:

    Pra cada botão você muda o ''div'' para ''divX'' em que o X é um número, de modo que cada botão deve ter um número diferente.

    Usei no meu Blog e deu tudo certo.

    Abraços!

    Filipe Emanuel

    Responder

  8. Isso vai ser ultil, pois estou criando uma página contendo a biografia de Ozzy Osbourne, dos principais integrantes do Black Sabbath e dos principas membros de Ozzy Osbourne em carreira solo.

    Como eu vou coloca todas as biografias em apenas uma página, eu posso escrever apenas o nome, e ao clicar exibir a biografia.

    Excelente postagem. Estava procurando como fazer isso a um bom tempo, e só hoje fui encontar.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.