quarta-feira, 26 de maio de 2010

Botão imput - Mostrar/Ocultar

Esse código é de um botão que mostra e oculta um determinado conteúdo no qual você deseja estar escondendo, e que possa ser mostrado somente quando o visitante clicar no botão.Ele é muito útil quando você cria um post muito grande, e quer escoder uma parte, dai cabe do leitor querer ler por inteiro ou não.

Também serve para ocultar/mostrar links de downloads de jogos por exemplo, que muitos são divididos em parte.Em fim, qualquer coisa , como texto imagens , links etc....

Copie o código

 Aqui vai o texto antes do código
<div class="pre-spoiler">
<input id="xs" value="Leia Mais" style="margin-left: 50px; padding: 0px; width: 80px; " 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 = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Leia Mais';}" type="button"> </div>
<div>
<div class="spoiler" style="display: none;">
Aqui vai o texto, código html..etc..
</div>
</div
Aqui vai o texto depois do código

Depois vá em Nova postagem, clique na aba Editar HTML cole o código.

Depois faça as modificações

Na parte vermelha - Texto do botão
Azul - Seu conteudo, ou imagem, Código html...


Depois clique na Aba Escrever e pronto...

Você também pode utilizar esse códigos em um novo gadget HTML em elementos da página

Vá em Layout - Elementos da página - Adicionar um Gadget  e escolha HTML/Javascript.

Cole o código , modifique, e salve!

Marcadores: , ,

7 Comentários:

Às 15 de julho de 2010 16:03 , Blogger Alex Sandro disse...

Olá.. Boa Tarde.. vi este botão funcionando em um site que mostrava receitas, vários botões em uma mesma pagina, sabe me dizer o que fazer para um não interferir em outro, preciso demais desta informação

sacglobo@gmail.com

 
Às 15 de julho de 2010 17:17 , Blogger Códigos Blogger disse...

Olá amigo,
Você pode usar o botão várias vezes em uma postagem, que não irá interferir em nada.
Apenas coloque o código corretamente.Primeiro cole o código, modifique, dê dois enter's e cole código dinovo, modifique, e assim sucessivamente.

 
Às 10 de setembro de 2010 09:39 , Blogger karen disse...

Infelizmente não funciona assim, quando colocamos 2 ou mais botoes em uma mesma pagina, sempre que clicamos nos outros botões abre sempre o primeiro se algume tiver uma solução postem aqui..

 
Às 27 de novembro de 2010 12:27 , Blogger Luan Vieira disse...

esse botao ta bugado ele nao fica centralizado

 
Às 24 de dezembro de 2010 19:25 , Blogger Fábio gomes de souza disse...

@karenEU TENHO UMA DICA AQUI QUE VAI AJUDA VC SE TIVE COM PROBLAMAS OK

EU uma dia desses ai vi um código leia mais que eu achei que era original mais foi um grande erro infeliz então sai catando site por site nos foros e nada então resolvi sozinho investigar passei uns 3 meses rodando porai tive dor de cabeça e muito sono perdido só hoje dia 24/12/2010 as 19:06 encontrei a solução para meu problema então então resolvi posta uma messagem de auto ajuda aos meus amigos blogueiros que tem esse mal dito codigo na sua caixa de messagem

ENTÃO LA VAI AI A CONFIGURAÇÃO E BEM SIMPLES VAI LA EM DESIGN CLIKA EM IDITAR HTML TEM UMA MESSAGEM ASSIM LA EM BAIXO: Reverter modelos de widget para o padrão
CLIKA NELA E ESPERA E PRONTO JA TA PRONTO PARA USAR A SUA NOVA CAIXINHA DE POSTAGEM

GOSTARIA DE AGRADEÇER A MEU SENHOR JESUS CRISTO POR MAIS UMA DIFICULDADE QUE PASSEI NESTE ANO E DESEJA A TODOS UM FELIZ NATAL. ESSE FOI MINHA QUASE VÍDEO AULA POIS AINDA ANO TIVE TEMPO DE FAZER POIS AINDA ESTOU MEXENDO NO MEU SITE TA LINDO MAIS FALTA UNS RETORQUIS BLZ UMA GRANDE ABRAÇO MEUS AMIGOS FIQUEM COM DEUS ATE A PROXIMA VIDEO AULA. WWW.RADIONYX.BLOGSPOT.COM

 
Às 17 de julho de 2011 21:24 , Blogger Marcos Vinícius disse...

No meu parte da pagina some e quando eu tiro o botão volta ao normal
some a pagina e mostra o fundo
Ajuda PLZ!

 
Às 13 de julho de 2013 14:28 , Blogger lucas k disse...

SOLUÇÃO: para colocar vários botões imput sem que um implique no funcionamento do outro, você deve editar a postagem sempre em html, nunca cliquem em "escrever", sempre edite em html e poste sempre em html, se você colocar o código e depois clicar em escrever não vai funcionar. se não tiverem entendido farei um video tuto.

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial