Ocultar trechos do post- botão spoiler simplificado! - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Ocultar trechos do post- botão spoiler simplificado!

Publicado em 26/08/2019

Ocultar trechos do post- botão spoiler simplificado!
Tempos atrás eu ensinei aqui no blog um botão muito legal que oculta parte do post, ideal para quem quer dar ao leitor a opção de ler ou não um spoiler de série, livro, filme, etc...
Recorde:


Funciona, mas é trabalhoso.
Aí achei esse código mega antigo, que faz um trabalho semelhante, muito mais simples e básico.
Veja:


CLIQUE NA SETINHA PARA EXPANDIRAqui vai o texto que você deseja ocultar.
Pode incluir imagens, aliás:

Não é legal? Simples mas funciona e é muito mais fácil de usar!
Vamos aprender?


Como usar o botão Ocultar nos posts do blog


Copie o código:

Copiar o código


Clique em HTML, no alto do editor de postagens.
Essa ação vai reverter o seu post para o modo HTML.
Cole o CÓDIGO DO BOTÃO OCULTAR e no campo marcado escreva o trecho que deseja ocultar.
Pode adicionar imagens, se desejar.
Terminou?
Clique em Escrever, no alto do editor de postagens, e termine seu post normalmente.
Publique como está acostumada e pronto!

Explicando o código:
O código que disponibilizei é assim:

<details>
<summary>CLIQUE NA SETA PARA VER O TEXTO OCULTO</summary>
Aqui vai o texto que você deseja ocultar.
</details>

O trecho CLIQUE NA SETA PARA VER O TEXTO OCULTO pode ser modificado, escreva o que desejar.
Em Aqui vai o texto que você deseja ocultar. escreva, claro, o texto que desejar.
O lance é manter as divs que comandam o botãozinho: summary e details.
Não as apague, nem as que abrem e nem as que fecham. São essas divs que fazem a mágica acontecer.
Entendeu?

Tem um porém: não funciona no Explorer/Edge.
No Firefox, no Chrome, no Vivaldi, Opera e Safari funciona sem erros.
No smartphone Android também.
Não testei no Iphone, testa aí e me diz :)

Ah, diferentemente do botão Ocultar spoilers que havia ensinado anteriormente, essa versão simplificada dá pra usar mais de um por post.
Veja o exemplo abaixo, onde usei o recurso para criar uma lista:






O que é blog? Blog é um termo que se originou e se popularizou graças a internet. A palavra tem origem na língua inglesa e trata-se de uma forma simplificada da expressão original weblog.

Weblog surge com a junção dos termos web, que significa rede, e log, que é um termo que advém da área da informática e designa os registros das atividades do computador ou de seu desempenho.



Quem pode ter um blog?Toda e qualquer pessoa pode ter um blog, basta querer!




Quanto custa ter um blog? Se você optar pelo Blogger é totalmente de graça. O único custo é o registro de domínio personalizado, caso queira. Mas não é indispensável.




O que eu posso escrever em um blog?
Há blogs de todo e qualquer assunto, de comida a beleza, de tecnologia a maternidade. Blogs literários, blogs pessoais, com assuntos variados e infindáveis. Escreva sobre o que desejar, sobre o que gostar, sobre sua paixão!




É possível ganhar dinheiro com o blog?
Sim, é. Um blog bem feito, bem escrito e que consiga atrair um tráfego bom pode lucrar com anúncios via Adsense, com divulgações de produtos e serviços, com publicidade direta e com programas de afiliados. O tráfego é o segredo. E para ter bom tráfego um blog feito com capricho e dedicação é o caminho.




Dá pra usar de formas diversas, né?
Simples e funcional, a gente ama?
Sim!




3 comentários

  1. Muito obrigada Elaine !! vc salvou minha vida kkk ♥

    ResponderExcluir
  2. Oi, Elaine, amei demais sua dica, era o que eu estava procurando, muito fácil de usar! Só uma pergunta, há algum código para inserir no texto para que fique em forma de lista, ou seja, uma frase embaixo da outra, como ficou no seu primeiro exemplo? No meu, os tópicos ocultos apareceram lado a lado! Tenha um ótimo final de semana!

    ResponderExcluir
  3. Fiz esse mas aparece todo aberto quando posto. Ele funciona, mas não carrega escondido e sim já mostrando o conteúdo

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…