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.
3 comentários via Blogger
comentários via Facebook

3 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

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