Dicas, truques, tutoriais, reviews, promoções e informação

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.

mostrar-e-ocultar-texto-post-blogger

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

81 comentários:

  1. cara muito bom seu codigo, me ajudou pacas vlw

    ResponderExcluir
  2. o tutorial é bom, mas não consegui trocar por imagem, pois a imagem aparece dento do botão

    ResponderExcluir
  3. Srta. Fox, estranho isso! Irei verificar e em breve retorno.
    Abraços e obrigado pela visita!

    ResponderExcluir
  4. Srta. Fox, acabei de verificar e está tudo ok com o código. Você não fez algo errado não?

    Veja no link abaixo em meu blog de testes, acabei de testar:
    http://testando-seututorial.blogspot.com.br/2012/05/texto-ocultado.html

    ResponderExcluir
  5. Muitoo obg! Vc me ajudou muito =)
    Mas gostaria de saber se tem como centralizar o botão?

    ResponderExcluir
  6. Olá Jéssica,

    Tem como centralizar tranquilamente. Para isso, basta utilizar um código HTML no começo e a div pra fechá-lo, antes e depois do código do SPOILER.

    Como não há como postar códigos nos comentários aqui, coloquei o código no link abaixo para você ver como fazer.

    http://pastebin.com/FBq1qUgu

    Qualquer outra dúvida é só perguntar.

    Sucesso com seus blogs... por falar nisso, parabéns, sou muito fã de Supernatural também. Espero que saia a oitava temporada logo :)

    Abraços e valeu pela visita!

    ResponderExcluir
  7. \0/ muito bom, gostei. Obrigado, pois me ajudou também.

    Más tenho uma dúvida.

    » No Blog que estou mexendo os links depois de visitados ficam vermelhos por escolha minha.
    Percebi que o nome Clique aqui fica vermelho também, até aí tudo bem. Más quando cliquei no botão, vi que a continuação de meu texto também ficou vermelha.

    Ou seja, toda vez que eu criar um texto grande, ele estará de branco, más parte dele que colocarei no Spoiler ficará vermelho.

    O que faço para mudar isso?

    Desde já Muito obrigado pela atenção!

    ResponderExcluir
  8. Olá,

    Estranho isto estar acontecendo em seu SPOILER.

    Poderia passar o link do seu blog para eu dar uma olhada?

    Abraços

    ResponderExcluir
  9. Sim, concerteza!
    aigrejalocal-jsf.blogspot.com
    Como este blog estou criando para o pastor da igreja onde congrego e está em construção ainda, eu o deixei restrito, pois temos bastante conteúdo para preenche-lo e só iremos abrir outro dia.
    Más quando vc estiver on, se tiver como me avisar por email/msn eu abro ele, só para você dar uma olhada. Pode ser?

    Contato:
    meu email: msnlopes.w@hotmail.com

    Desde já obrigado pela atenção!

    ResponderExcluir
  10. \0/ kKk Desculpe! Acabo de conseguir arrumar!! Rsrsrsrs

    Era só eu mudar o valor da cor lá no código.

    Acabo de abrir o HTML da minha página e o código spoiler estava assim:
    red aí eu substituí "red" por "#ffffff"

    Mesmo Obrigado

    ResponderExcluir
  11. Opa, que bom que conseguiu corrigir.
    É tanto código que a gente acaba se confundindo mesmo, hehe. Não esquenta com isso.

    Sucesso e bom trabalho na construção do blog, amigo.
    Abraços

    ResponderExcluir
  12. Obrigado, ótimos trabalhos para você também em seus projetos aê...

    Tenho outras dúvidas, tem algum lugar específico em seu site ou blog onde eu possa pedir ajuda?

    ResponderExcluir
  13. Temos um fórum Help Desk:
    http://www.seututorial.com/p/forum.html

    Ele é recente, porém, foi criado para dúvidas e problemas mesmo.

    Se eu puder ajudar com suas dúvidas, tenha certeza que o farei!

    Abraços

    ResponderExcluir
  14. \0/ Muito obrigado + uma vez pela atenção e parabéns pela paciência e humildade!

    Deus continue abençoando você e a equipe aí que aínda não conheço hehehe!

    ResponderExcluir
  15. Eu que agradeço a visita, amigo.

    Desejo tudo igualmente a você.

    Grande abraço

    ResponderExcluir
  16. Fiz um cadastro lá no fórum e já postei uma das dúvidas que falei que tinha rsrs.

    Amanhã logo/entro dínovo a tarde ou a noite. Fui e boa noite.

    ResponderExcluir
  17. Meu Brother, muitissimo obrigado! vou usar esse recurso no meu blog!!!
    valewu mesmo, dê um confere ae!
    www.rugalsouza.blogspot.com

    queria discutir contigo, pelo visto voce saca muito, quero fazer algumas modificações no meu blog, dai se pudermos nos comunicar seria de bom grado a tua ajuda..

    ruagl.souza@hotmail.com

    obrigado!
    Rugal!

    ResponderExcluir
  18. muito bom.. www.start3d.blogspot.com

    ResponderExcluir
  19. BELEZAAAAAAAAAA DE CODIGO.. obrigado por compartilhar kamarada.

    ResponderExcluir
  20. Obrigado, era justamente o que eu queria!

    ResponderExcluir
  21. Muito obrigado pelo tutorial, me ajudou muito, mas estou com uma dúvida,
    Eu gostaria de saber como faz "Opção 1 e Opção 2" em vídeos:
    Como neste site: http://www.mda-br.co.cc/2012/05/naruto-sd-rock-lee-09.html
    (YouTube - RMVB : Uol - MP4)

    ResponderExcluir
  22. OBRIGADO DEU CERTO, ESTOU TENTANDO APRENDER MAIS SOBRE HTML.

    ResponderExcluir
  23. Muito bom, Mais tenho uma dúvida, Tem como a imagem mudar depois de clicada, Exemplo: o leitor clica na imagem "Clique para ver", o spoiler abre, e aparece outra imagem acima do texto oculto escrito "Esconder" . q nem aqui http://www.alanpatrickk.net/portfolio/. Obrigado. Qualquer coisa me mande um email. contato.coelhodrogado@gmail.com. Abraços

    ResponderExcluir
    Respostas
    1. Olha, não entendi muito bem, pois no site que você passou, a imagem que abre e fecha o spoiler é a mesma (azul). Porém, pelo que tentei compreender, você quer uma imagem para abrir o spoiler e, automaticamente, outra imagem distinta para fechá-lo. É isso?

      Excluir
  24. Gostei e estou usando, é o que eu procurava, muito bom código, procurava um justamente em que o botão "Clique Aqui" acompanhe o texto e se posicione em baixo, logo que o texto é expandido

    ResponderExcluir
  25. Boa noite!

    Cheguei aqui através de uma dúvida similar, se souber ajudar agradeço

    Minha dúvida é a seguinte, há como eu ocultar um post no blog, não um texto dentro do post, mas um post inteiro, deixar oculto ( eu gostaria de deixar oculto por um periodo)

    Outra: Modifiquei alguns textos e colocquei em "reverter para rascunho" mas o q eu gostaria é de publicá-los com essas alteracóes na data original que foram criados, e na ordem de postagem q estavam no blog, existe alguma maneira? Como ?

    Agradeço demais a informaçao desde já

    Abraços


    Mary

    ResponderExcluir
    Respostas
    1. Olá Mary,

      Não há como ocultar um post inteiro do blog (título, conteúdo e tudo mais), a não ser que o deixe salvo como rascunho apenas. Você pode somente ocultar o conteúdo de um post (com o spoiler mostrado no tutorial aliás). Mas o post em si, desconheço qualquer método para isso.

      Quanto a segunda dúvida, sobre re-publicar a postagem alterada na data original, isso é possível sim. Acredito que o seu Blogger esteja configurado para publicar tudo no modo automático, fazendo com que postagens re-publicadas apareçam como nova postagem.

      Na área onde você escreve seu texto, ao lado direito do campo de texto, clique na opção "Publicado em". Marque a opção "Definir data e hora". Assim, sempre que re-publicar um artigo recentemente modificado, ele sempre sairá com data e hora originais.

      Abraços

      Excluir
  26. Marcelo, voltei :P

    Então, nao consigo arrumar pq na pagina aperece assim:

    Do lado esquerdo o texto (naquele quadrado antes de publicar, como fica qdo estamos escrevendo/editando)

    Do lado direito da Tela aparece escrito "Configuracoes de Postagem"e abaixo disso os itens : " Marcador", "Programar" (nesse item esta visivel a data original da postagem, maio de 2010, foi essa q reverti para rascunho esses dias), "link permanente", "local"e öutros"

    Então deduzo q mesmo revertendo para rascunho a data original de manteve uma vez q qdo abro o agora rascunho ainda aparece a data original que foi postado..é isso?

    To com medo de publicar e perder essa data original, eu qria q ela aparecesse na data original, pq depois disso escrevi varios outros textos, e nao qria q ele aparecesse depois...

    Nao sei se deu pra entender o q expliquei..bem prolixa, mas como nao entendo nada, onde é que eu escrevo, é nesse item programar msm?

    Mto obrigada novamente

    Mary

    ResponderExcluir
    Respostas
    1. Oi Mary,

      É no "Programar" mesmo que você deve mexer. Quando você marca a opção "Definir data e hora", são exibidas a data e hora exatas da publicação original mesmo? Em caso positivo, pode re-publicar sem medo.

      Eu já reverti para rascunho alguns artigos meus e os re-publiquei depois marcando a data e hora exatas deles, e foram mostrados na data original normalmente.

      Abraços

      Excluir
  27. Marcelo, voltei agora pra dizer que deu certo !! :D

    Saiu na data e ordem original :D

    Mto obrigada pela atenção!

    Sucesso pra vc :D


    Mary

    ResponderExcluir
  28. Tem como eu criar o meu próprio botão? Como coloco a figura no código?
    Obrigada desde já (:

    ResponderExcluir
  29. Ah desculpe, me apressei e não vi que na prória postagem mostra como personalisar o botão! rsrsrsrs

    ResponderExcluir
  30. Tem como mudar a aparência do botãozinho clássico?

    ResponderExcluir
  31. se eu colocar uma imagem, com disse, essa imagem vai ficar dentro do botão na mesma ...

    ResponderExcluir
  32. Bom dia Marcelo!

    outro dia vc me ajudou MUITO explicando como salvar em rascunho e voltar a postagem com a data original, mais uma vez agradeço :)

    Hoje retorno para sanar outra dúvida se puder me ajudar. Dei uma olhada aqui no seu blog e não achei nada sobre o tema.

    Vc sabe como funciona o Myfreecopyright? Vi em alguns sites que é a forma gratuita de registrar os textos do blog, uma proteção contra plágios.
    Entretanto, os sites que encontrei não achei muito claros, não entendi direito como funciona, como instalar e ainda, se os textos que postei antes de instalar tbém podem ser registrados, pois pelo que li, é somente a cada nova postagem que o texto é registrado.

    Minhas dúvidas , resumindo:

    Como instalar?
    Esse aplicativo possui uma forma de registrar os textos já postados ou somente os novos?
    Se sim, como? Se não, qual alternativa para garantir a proteção do texto postado anteriormente a instalção do aplicativo?

    Meu blog e blogspot.

    Se puder me auxiliar agradeço demais. Tive dificuldade pois meu conhecimento de informatica é pouco, acho que alguém que já conheça melhor pode entender os sites mas eu não entendi alguns termos como por exemplo "feeds via feedburner"...que é o que precisa pra instalar (?)

    Achei informações nesse link aqui: http://www.blogosferalegal.com/2010/07/registre-seus-artigos-gratuitamente.html - o qual me parece ser mto bom, mas como não entendo esses termos técnicos, venho pedir mais uma vez seu auxilio.

    Desde já mto obrigada pela atenção e delicadeza

    Mary

    ResponderExcluir
    Respostas
    1. Olá Mary,

      O MyFreeCopyright cria uma cópia de segurança dos seus artigos, para no caso de um deles ser plagiado, você ter a chance de provar que é a autora original através do ID que o serviço cria em cada artigo. Ele só registra novos artigos realmente. Os antigos não. Dificilmente você encontrará serviços gratuitos que protejam os novos e antigos artigos.

      Bem, FeedBurner é o melhor serviço de distribuição de feeds de um blog/site. Os feeds são recursos que enviam aos assinantes do seu blog novos artigos publicados por você automaticamente. Ou seja, se a pessoa assinou seu feed, ela receberá suas atualizações sem precisar ir até seu blog para saber.

      Antes de realizar cadastro nesse serviço, cadastre seu feed no Feedburner.

      feedburner.google.com/

      Qualquer dúvida não hesite em perguntar.
      Abraços

      Excluir
    2. Mto obrigada! Vou fazer e se tiver dúvidas volto, grata mais uma vez.

      Mary

      Excluir
  33. Olá Marcelo, meu nome é wellington e sou novo aqui. Gostei muito do seu artigo mas queria saber se não dá pra fazer uma pequena mudança: Eu queria que o texto oculto aparecesse abaixo do botão e não acima como executa o seu código. Tem como fazer isso? Agradeceria muito se me ajudasse.

    ResponderExcluir
    Respostas
    1. Olá Wellington,

      Através do código que eu publiquei não é possível fazer o que deseja. Neste caso, utilize o código aqui abaixo, substituindo o necessário.

      <div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><input 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 = 'Esconder'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Mostrar'; }" value="Mostrar" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" type="button"> </div>

      <div class="alt2" style="margin: 0px; padding: 6px; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%; -moz-background-size: auto auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(127, 69, 0); line-height: 1.5em;"><div style="display: none;">SEU TEXTO AQUI</div></div></div>

      Excluir
    2. Ok Valeu mesmo pela ajuda.

      Excluir
    3. Olá Marcelo não consigo colocar uma imagem com esse código que serve para meter o texto oculto por baixo do botão. Podia ajudar-me.
      Muito obrigado

      Excluir
  34. Olá Marcelo, gostaria de saber se tem como fazer o seguinte...
    Após eu clicar no botão, ele desaparecer.
    To precisando urgente dessa resposta.
    Agradeço a atenção.
    Abraço
    Aline

    ResponderExcluir
  35. Muito bem explicado. Finalmente consegui entender esse negócio de spoiler (ainda mais pra pessoas que fazem confusões facilmente como eu). Obrigada.

    ResponderExcluir
  36. Não estou conseguindo selecionar os códigos. Provavelmente surgiu algum problema.
    Meu Abraço.

    ResponderExcluir
  37. ei marcelo tudo bem?gostaria de usar o modelo acima,mas não estou conseguindo copiar,vc poderia me ajudar?estou tentando escrever meu blog e não sei fazer um spoiler..

    gosto muito do que escreve e suas dicas,
    abço,yara

    ResponderExcluir
    Respostas
    1. Clique no botão Selecionar Tudo abaixo do campo de código e copie.

      Excluir
    2. ei Marcelo que bom que me respondeu rápido,mas já cliquei no botão selecionar e nada acontece e nem consigo copiar :(
      pode me ajudar?

      Excluir
    3. Está utilizando o Internet Explorer? Porque somente esse navegador horrível não reconhece o botão.

      Upei o código no link abaixo:

      http://pastebin.com/raw.php?i=UnXVrfuF

      Excluir
  38. tem como colocar um botao de curtir?? para a pessoa ter acesso ao conteudo ela curta em um botaõ dentro do post?

    ResponderExcluir
    Respostas
    1. Como assim amigo?

      O botão curtir deve ser inserido no seu template.

      Excluir
  39. tem como eu fazero texto aparecer em baixo do botão? Nesse codigo ele esta mostrando em cima

    ResponderExcluir
  40. Amigo, parabéns pelo tutorial.
    teria como você ensinar a fazer um spoiler de imagem?

    ResponderExcluir
  41. Nossa, muito bom!
    estava procurando esse recurso a algum tempo, e só achei aqui.

    ResponderExcluir
  42. Cara como colocar um do lado do outro e o conteúdo aparecer no mesmo lugar ?

    ResponderExcluir
  43. Adorei o post. Muito útil.

    ResponderExcluir
  44. E como eu mudo o nome de cada um dos spoilers?

    ResponderExcluir
    Respostas
    1. O nome padrão é "CLIQUE AQUI". Basta colocar o nome que deseja.

      Excluir
  45. ótimo ja havia tentado varios, só o seu deu certo

    ResponderExcluir
  46. como poem a mensagem em baixo do spoiler e poem a linha de baixo exemplo=

    CLIQUE PARA MOSTRAR

    OI
    OI
    OI
    HEHEHE

    ResponderExcluir
  47. Olá, gostaria de saber se dá para em vez de utilizar um botão, for só a imagem em si. Quando apertasse na imagem iria expandir o conteúdo escondido. Obrigada :)

    ResponderExcluir
  48. cara eu preciso colocar varios, e quando clicar em um o outro oculte o texto, para nao ficar varios com o texto mostrando, tem jeito?

    ResponderExcluir
  49. Olá Marcelo!
    Veja, seu código foi o único que encontrei e funcionou no template. Porém, quero deixar as informações uma abaixo da outra, exemplo:

    Nome
    Fulano de tal

    Porém, não estou conseguindo. Teria como você me ajudar, por favor?
    Muuuito obrigada!

    ResponderExcluir
  50. Marcelo, obrigado pelo código. Era o que eu precisava para esconder/revelar a resolução das questões que coloco no meu blog.

    ResponderExcluir
  51. Muito obrigado, pelo o encinamento, professor Marcelo. sou Carlos Santos cidadão de Cabo-Verde daqui Vai um abrço:

    ResponderExcluir
  52. Fantástico Cara, gratidão! ^^

    http://jovensnipartigos.blogspot.com.br/2015/03/functiond-s-id-var-js-fjs-d.html

    ResponderExcluir
  53. Preciso da sua ajuda. Tenho um blog e eu coloco esse spoiler pra ocultar uma parte da postagem. Mas quando faço outra postagem e uso o mesmo codigo pra esconder, acontece um erro que não abre as 2 postagens, quando eu clico no " clique aqui " da segunda postagem, abre o que ta ocultado na primeira postagem. Deu pra entender ? pesquisei e não sei o que fazer, é como se eu só pudesse usar esse código em 1 postagem. Obrigado

    ResponderExcluir
  54. Excelente tutorial, parabéns, me ajudou demais.

    ResponderExcluir
  55. Deu e não deu certo.
    É porque eu preciso colocar esse botão em todos os posts, cada um informando uma coisa diferente.
    Só que se eu coloco em mais de um e, com as páginas salvas, clico no botão do segundo, ele abre automaticamente o primeiro (o segundo fica intacto).

    ResponderExcluir
    Respostas
    1. Isso é porque você está usando a mesma ID para os botões. Leia a parte "Adicionando mais de um Spoiler" do texto e seu problema será resolvido.

      Excluir
  56. como que eu faço pra ao inves de aparecer o txto ocutado, abrir ma nova janela no centr da tela?

    ResponderExcluir
  57. ola primeiramente muito obrigdo pelo codigo porem gostaria de quando eu clica-se no botão o testo escondido aparecesse em baixo do botão depois que o clicasem no botão tanto no botão clique aqui quanto o com imagem teria como ?? aguardo resposta.

    ResponderExcluir
    Respostas
    1. Claro, amigo.

      Basta inverter a ordem da tag BUTTON. Acesse esse link e faça o teste com o código postado aí.

      Excluir