domingo, 12 de fevereiro de 2012
Mostrar e ocultar texto em um post (Blogger)
Você já ouviu falar em um recurso chamado Spoiler? Sim? Não? Enfim... O Spoiler é um recurso usado para exibir e esconder um texto dentro de um post (seja em um blog, site, fórum e etc). Suponhamos que você queira ocultar uma determinada parte do post e fazer com que ela seja mostrada somente quando o leitor quiser visualizá-la, basta usar o efeito Spoiler.
Não entendeu? Mostrarei na prática como funciona. Clique no botão abaixo e veja o que acontecerá.
Mais fácil de entender, não?
Bem, aplicar este recurso no Blogger é a coisa mais simples do mundo. Não há necessidade de modificar o template ou adicionar gadgets no blog.
Spoilers no Blogger
1. Crie uma nova postagem e mude para a opção HTML.
2. Agora copie o código abaixo e cole na área de postagem (no local onde o Spoiler ficará em seu post).
<div id="spoiler" style="display:none">TEXTO OCULTADO</div> <button title="Clique para mostrar/ocultar" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">CLIQUE AQUI</button>See the Pen umFqi by Seu Tutorial (@marcelost) on CodePen
Altere as partes abaixo por textos de sua preferência.
Onde está "TEXTO OCULTADO" é o texto que você ocultarrá com o Spoiler. Tudo que você quiser esconder/exibir, escreva nesta área.
Onde está a mensagem "CLIQUE AQUI" é o nome do botão do Spoiler que a pessoa vai clicar. Dê o nome que quiser ao botão.
3. Após adicionar seu Spoiler, visualize para ver se está tudo ok e então poste.
Adicionando mais de um Spoiler
Se você pretende colocar mais de um Spoiler em seu post, a única coisa que você terá de fazer é acrescentar outro caractere às tags "spoiler" (4 no total) presentes no código.
Exemplo.
<div id="spoiler1" style="display:none">TEXTO OCULTADO</div> <button title="Clique para mostrar/ocultar" type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}">CLIQUE AQUI</button>See the Pen HcCGE by Seu Tutorial (@marcelost) on CodePen
Repare que no código acima, é acrescentado o número 1 após o nome 'spoiler'. Isso irá diferenciar um spoiler do outro, quando houverem dois spoilers. Se existirem três Spoilers em sua postagem, por exemplo, você deverá acrescentar um caractere distindo dos outros dois no terceiro Spoiler.
Se você deixar o mesmo nome em todos os Spoilers, nenhum funcionará corretamente.
Personalizando o botão
Você pode também customizar o botão do Spoiler inserindo uma imagem ao invés de um botão. Para isto, basta mudar o texto "CLIQUE AQUI" pelo código abaixo.
<img src="URL DA IMAGEM" />
Exemplo.
<div id="spoiler" style="display:none"> TEXTO OCULTADO </div> <button title="Clique para mostrar/ocultar" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"> <img src="URL DA IMAGEM" /></button>See the Pen LAbvC by Seu Tutorial (@marcelost) on CodePen
