Botão para ocultar spoilers nas postagens do blog - * Blog Elaine Gaspareto *

Botão para ocultar spoilers nas postagens do blog

em 27/06/2017

Botão para ocultar spoilers nas postagens do blog

Se você tem um blog de resenhas literárias, ou de filmes e séries, ou apenas publica esporadicamente como eu alguns posts que se encaixam nessa categorias talvez em algum momento se pegou com receio de soltar querendo ou não algum spolier.
Já aconteceu contigo?
O hack que vou compartilhar contigo hoje é bem legal e interessante: trata-se de um botão de instalação simples e de uso bem fácil que oculta a parte do texto que você desejar, e só o revela se o leitor clicar no botão em questão.
Pra ficar claro vou te dar um exemplo, clique no botão para vê-lo funcionando:


Clique sobre a imagem e baixe gratuitamente a fonte Vesial. Ela está em um arquivo zipado, baixe o arquivo, descompacte-o e instale a fonte Vesial!
Olha que linda:


Gostou da surpresa?


É bem legal o botão, né?
Usei nesse post, pra você como funciona para ocultar spoilers:


E não serve só para ocultar possíveis spoilers não!
De repente, se você não usa em seu blog o resumo automático de posts como eu uso aqui no meu e deseja "encurtar" um post mais longo pode esconder parte do texto com esse botão. Assim o post não fica imenso na página inicial.
Fica especialmente bom em posts com muitas imagens grandes, por exemplo.
O uso depende, claro, da sua criatividade.
Vamos aprender?



Como colocar o botão que oculta spoilers no blog?


Antes de mais nada, o bom e velho conselho da tia Elaine: sempre faça esses testes em um blog de testes.
Só depois de se certificar de haver entendio e conseguido sem erros é que deve se aventurar em seu blog real.
Ok?
Ah, outra dica: nem todo template vai aceitar o hack. Se seu blog tem muitos recursos pode haver conflito e aí é questão de escolher o que manter.
Tem que testar, sem preguiça, até conseguir fazer.
Combinado?
Então, mãos à obra!


Copiar os códigos



Para começar acesse o painel administrativo do blog onde vai instalar o hack e clique na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa do código tecle Ctrl+F.
Na barra de busca digite </head> e tecle Enter para localizar.
ACIMA dessa tag de fechamento cole o CÓDIGO JAVASCRIPT.
Salve.

Agora, na barrinha de pesquisa, digite ]]></b:skin> e tecle Enter.
ACIMA dessa tag cole o CÓDIGO CSS.
Salve.
É nesse código que você altera coisas como tamanho da fonte, cor do background, etc.
Deixei marcado no código as áreas seguras para editar.
Feito isso seu template está pronto para a inserção do botão Spoiler.



Como utilizar o botão Spoiler em minhas postagens do blog?


Para usar o botão faça assim:
Escreva sua postagem normalmente, deixe-a prontinha, tudo certinho.
A seguir, no alto do editor de postagens, clique em HTML.
Essa ação reverterá seu post para o modo html.
Escolha onde, no seu post, você deseja inserir o botão Spoiler.
Escolheu?
Então copie o CÓDIGO HTML e cole-o no lugar que escolheu para o botão aparecer.
Agora preste atenção!
Onde deixei marcado AQUI VOCÊ COLOCA O SEU TEXTO QUE SERÁ "ESCONDIDO" você coloca, claro, o texto que deseja ocultar utilizando o botão Spoiler.

Observe que o CÓDIGO HTML é assim:

<div id="flippy">
<button>Spoiler</button></div>
<div id="flippanel">
AQUI VOCÊ COLOCA O SEU TEXTO QUE SERÁ "ESCONDIDO"
</div>

Então, tudo que você colocar antes do fechamento da </div> ficará oculto no botão e só aparecerá se o leitor clicar no botãozinho fofo.
Entendeu?

Feito isso é só publicar seu post normalmente.
Bem simples, fácil e muito legal!
Gostou, querido leitor?

*Imagem que ilustra o post é uma cortesia Shutterstock.
12 comentários via Blogger
comentários via Facebook

12 comentários:

  1. Boa noite
    Obrigada pela generosidade,adoro vir aqui e aprender com você.
    Beijos

    ResponderExcluir
    Respostas
    1. O botão não esta funcionando.

      Excluir
    2. Você precisa estar no desktop pois não funciona na versão touch.

      Excluir
  2. Eu fiz os procedimentos assim como está no tutorial, mas quando clico no botão (tanto no mobile quanto no PC) ele não funciona... Gostaria muito de resolver pois no meu blog eu irei utilizar muito este recurso...

    ResponderExcluir
    Respostas
    1. Nery, tem certeza que não esqueceu nada?
      Outra possibilidade é que tenha algo em seu template causando conflito (slide, algum arquivo JQuery, etc)
      Experimente testar em um blog com template sem nada disso, assim tira a prova se é ou não conflito...

      Excluir
  3. Olá Elaine, uso o template simples do blogger, mas esse código não está dando certo, até aparece o botão, mas quando clica não aparece nada mesmo só colocando seu código.
    Poderia revisa-lo se possível, agradeço sua ajuda.

    ResponderExcluir
    Respostas
    1. Noobinho, esse é exatamente o código que uso.
      Tem certeza que não está esquecendo nada, nem excluindo nada, nem um sinal, ou uma div...
      Outra coisa: se seu blog já tem a biblioteca JQuery instalada precisa retirar a primeira linha do Código Javascript pois a biblioteca não deve se repetir.
      Refaça o processo num blog de testes, creio que dará certo.

      Excluir
    2. Nossa, da até raiva, uma coisa tão simples de se resolver, deu tudo certo aqui, muito obrigado Elaine. :)

      Excluir
  4. Tem como usar mais de um spoiler em uma mesma postagem?

    ResponderExcluir
  5. Olá Elaine Gaspareto, muito obrigado pelo ótimo conteúdo funcionou perfeitamente em meu blog
    Para aqueles que tiverem dificuldade, e utilizarem outros Hack, recomendo colocar o Script acima dos
    hacker para não haver conflito, agora minha duvida é o seguinte? será que consigo acrescentar vários botões
    Pois quero para expor videos, e cada botão teria seu servidor próprio, estou usando alguns códigos CSS aqui e HTMl para reposiciona os botões lado a lado, mas sem muito sucesso, conhece alguma dica que poderia me passar?

    ResponderExcluir
    Respostas
    1. Fernando, pode usar quantos botões precisar, mas eles sempre vão alinhar um abaixo do outro. Lado a lado até teria jeito, mas usando tabless e aí poderia comprometer o funcionamento do botão...

      Excluir

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.
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…



Visualizações

Contando...

Dias online
Postagens
comentários