![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
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.
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.
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!!!
Obrigado ?
Muito Bom!!!
Era Isso Que Esta Procurando…
Obrigado 😀
Valeu!
Gostei do artigo, muito útil.
Grato.
Como sempre tu superou tudo meu rei!Obrigada mais uma vez.
Seu blog com certeza tera um banner em meus 5 blogs.
Abraços
Muito legal continue contribuindo conosco
nao intendi muito mas dei outro jeito criei um codigo ;P
Diferente do primeiro comentário eu irei usas muito! Obrigado
eu queria saber como tornar uma imagem minha, o botao de ocultar e mostrar, mas gostei muito tbm.
@Joelteon,
Realmente eu não sei como fazer isso. Vou tentar descobrir, mas cho q não seja possível.
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!
Finalmente consegui o que queria obrigado
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 ???
@AdmhiCharles,
Só funciona um por página. Nào tem como colocar dois.
Funcionou!, Obrigado Marcos Lemos.
Estava mesmo precisando.
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.
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
Nossa, estava precisando isso que eu tava precisando disso mesmo.
Obrigada!
Adorei… Já fiz o teste e vou usar com certeza…
Abraço!
Paz!
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.
Muchas gracias,este codigo me es muy6 util, ya que lo utilizo a diario en todos mis articulos del Blog. Va de maravilla ,gracias.
Isto ainda funciona? Quando eu clico lá, aqui no artigo, ou tentei colocar em meu blog, não consegui.. Obrigado.