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 Visualização em 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
Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
Vlw cara :p
ResponderExcluirDe nada, amigo.
ExcluirAbraços
cara muito bom seu codigo, me ajudou pacas vlw
ResponderExcluiro tutorial é bom, mas não consegui trocar por imagem, pois a imagem aparece dento do botão
ResponderExcluirSrta. Fox, estranho isso! Irei verificar e em breve retorno.
ResponderExcluirAbraços e obrigado pela visita!
Essa é a finalidade do Código da imagem no lugar do texto, Apresentar a Imagem no botão, Essa Imagem deve ser preparada para servir de botão, substituindo o nome CLIQUE AQUI OU LEIA MAIS E Etc...
ExcluirSrta. Fox, acabei de verificar e está tudo ok com o código. Você não fez algo errado não?
ResponderExcluirVeja no link abaixo em meu blog de testes, acabei de testar:
http://testando-seututorial.blogspot.com.br/2012/05/texto-ocultado.html
Muitoo obg! Vc me ajudou muito =)
ResponderExcluirMas gostaria de saber se tem como centralizar o botão?
Olá Jéssica,
ResponderExcluirTem 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!
\0/ muito bom, gostei. Obrigado, pois me ajudou também.
ResponderExcluirMá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!
Olá,
ResponderExcluirEstranho isto estar acontecendo em seu SPOILER.
Poderia passar o link do seu blog para eu dar uma olhada?
Abraços
Sim, concerteza!
ResponderExcluiraigrejalocal-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!
\0/ kKk Desculpe! Acabo de conseguir arrumar!! Rsrsrsrs
ResponderExcluirEra 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
Opa, que bom que conseguiu corrigir.
ResponderExcluirÉ 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
Obrigado, ótimos trabalhos para você também em seus projetos aê...
ResponderExcluirTenho outras dúvidas, tem algum lugar específico em seu site ou blog onde eu possa pedir ajuda?
Temos um fórum Help Desk:
ResponderExcluirhttp://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
\0/ Muito obrigado + uma vez pela atenção e parabéns pela paciência e humildade!
ResponderExcluirDeus continue abençoando você e a equipe aí que aínda não conheço hehehe!
Eu que agradeço a visita, amigo.
ResponderExcluirDesejo tudo igualmente a você.
Grande abraço
Fiz um cadastro lá no fórum e já postei uma das dúvidas que falei que tinha rsrs.
ResponderExcluirAmanhã logo/entro dínovo a tarde ou a noite. Fui e boa noite.
Meu Brother, muitissimo obrigado! vou usar esse recurso no meu blog!!!
ResponderExcluirvalewu 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!
muito bom.. www.start3d.blogspot.com
ResponderExcluirBELEZAAAAAAAAAA DE CODIGO.. obrigado por compartilhar kamarada.
ResponderExcluirObrigado, era justamente o que eu queria!
ResponderExcluirMuito obrigado pelo tutorial, me ajudou muito, mas estou com uma dúvida,
ResponderExcluirEu 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)
vlw
ResponderExcluirOBRIGADO DEU CERTO, ESTOU TENTANDO APRENDER MAIS SOBRE HTML.
ResponderExcluirMuito 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
ResponderExcluirOlha, 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?
ExcluirGostei 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
ResponderExcluirmuito legal
ResponderExcluirBoa noite!
ResponderExcluirCheguei 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
Olá Mary,
ExcluirNã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
Obrigada Marcelo!
ResponderExcluirMary
Marcelo, voltei :P
ResponderExcluirEntã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
Oi Mary,
ExcluirÉ 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
Marcelo, voltei agora pra dizer que deu certo !! :D
ResponderExcluirSaiu na data e ordem original :D
Mto obrigada pela atenção!
Sucesso pra vc :D
Mary
Tem como eu criar o meu próprio botão? Como coloco a figura no código?
ResponderExcluirObrigada desde já (:
Ah desculpe, me apressei e não vi que na prória postagem mostra como personalisar o botão! rsrsrsrs
ResponderExcluirTem como mudar a aparência do botãozinho clássico?
ResponderExcluirse eu colocar uma imagem, com disse, essa imagem vai ficar dentro do botão na mesma ...
ResponderExcluirBom dia Marcelo!
ResponderExcluiroutro 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
Olá Mary,
ExcluirO 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
Mto obrigada! Vou fazer e se tiver dúvidas volto, grata mais uma vez.
ExcluirMary
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.
ResponderExcluirOlá Wellington,
ExcluirAtravé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>
Ok Valeu mesmo pela ajuda.
ExcluirOlá 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.
ExcluirMuito obrigado
Olá Marcelo, gostaria de saber se tem como fazer o seguinte...
ResponderExcluirApós eu clicar no botão, ele desaparecer.
To precisando urgente dessa resposta.
Agradeço a atenção.
Abraço
Aline
Muito bem explicado. Finalmente consegui entender esse negócio de spoiler (ainda mais pra pessoas que fazem confusões facilmente como eu). Obrigada.
ResponderExcluirNão estou conseguindo selecionar os códigos. Provavelmente surgiu algum problema.
ResponderExcluirMeu Abraço.
Problema corrigido, Ramires!
ExcluirAbraços
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..
ResponderExcluirgosto muito do que escreve e suas dicas,
abço,yara
Clique no botão Selecionar Tudo abaixo do campo de código e copie.
Excluirei Marcelo que bom que me respondeu rápido,mas já cliquei no botão selecionar e nada acontece e nem consigo copiar :(
Excluirpode me ajudar?
Está utilizando o Internet Explorer? Porque somente esse navegador horrível não reconhece o botão.
ExcluirUpei o código no link abaixo:
http://pastebin.com/raw.php?i=UnXVrfuF
tem como colocar um botao de curtir?? para a pessoa ter acesso ao conteudo ela curta em um botaõ dentro do post?
ResponderExcluirComo assim amigo?
ExcluirO botão curtir deve ser inserido no seu template.
tem como eu fazero texto aparecer em baixo do botão? Nesse codigo ele esta mostrando em cima
ResponderExcluirAmigo, parabéns pelo tutorial.
ResponderExcluirteria como você ensinar a fazer um spoiler de imagem?
Nossa, muito bom!
ResponderExcluirestava procurando esse recurso a algum tempo, e só achei aqui.
Cara como colocar um do lado do outro e o conteúdo aparecer no mesmo lugar ?
ResponderExcluirAdorei o post. Muito útil.
ResponderExcluirE como eu mudo o nome de cada um dos spoilers?
ResponderExcluirO nome padrão é "CLIQUE AQUI". Basta colocar o nome que deseja.
Excluirótimo ja havia tentado varios, só o seu deu certo
ResponderExcluircomo poem a mensagem em baixo do spoiler e poem a linha de baixo exemplo=
ResponderExcluirCLIQUE PARA MOSTRAR
OI
OI
OI
HEHEHE
Muito Bom amigo Parabens mesmo!
ResponderExcluirOlá, 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 :)
ResponderExcluircara eu preciso colocar varios, e quando clicar em um o outro oculte o texto, para nao ficar varios com o texto mostrando, tem jeito?
ResponderExcluirOlá Marcelo!
ResponderExcluirVeja, 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!
Marcelo, obrigado pelo código. Era o que eu precisava para esconder/revelar a resolução das questões que coloco no meu blog.
ResponderExcluirMuito obrigado, pelo o encinamento, professor Marcelo. sou Carlos Santos cidadão de Cabo-Verde daqui Vai um abrço:
ResponderExcluirFantástico Cara, gratidão! ^^
ResponderExcluirhttp://jovensnipartigos.blogspot.com.br/2015/03/functiond-s-id-var-js-fjs-d.html
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
ResponderExcluirExcelente tutorial, parabéns, me ajudou demais.
ResponderExcluirDeu e não deu certo.
ResponderExcluirÉ 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).
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.
Excluircomo que eu faço pra ao inves de aparecer o txto ocutado, abrir ma nova janela no centr da tela?
ResponderExcluirola 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.
ResponderExcluirClaro, amigo.
ExcluirBasta inverter a ordem da tag BUTTON. Acesse esse link e faça o teste com o código postado aí.
Legal, cara, muito obrigada!
ResponderExcluirvoce sabe como fazer isso no wix?
ResponderExcluirEste comentário foi removido pelo autor.
ExcluirAna, espero que te ajude!
ExcluirAdicionar - Mais - Incorporar - Html Iframe
Espero ter ajudado. O Wix usa o sistema de ancora, que no meu ver não agrada a todas as pessoas.
www.bettergamesloja.com/shopping
Muito obrigado ajudou muito.!
ResponderExcluirAmigão salvou me na hora certa. Já tinha desistido, mas, hoje eu fiz a pergunta certa e achei a sua página. Agora pedindo demais, é possível aplicar uma fonte é uma cor e um fonte diferente diferente no texto quando for clicado nele para ser visualizado?
ResponderExcluirDesculpa a vergonha a minha pergunta foi estúpida, era somente alterar a fonte e cor é que meu tico é sonambulo e o teco é dorminhoco. Imagina!
ExcluirVocê consegue colocar dois botões e ao clicar um fecha o outro e vice versa?
ResponderExcluirObrigado cara
ResponderExcluir