Ajuda Blog: Botão imput - Mostrar/Ocultar

http://img40.imageshack.us/img40/3791/regrasp.png-http://img834.imageshack.us/img834/8844/topserve.jpg-http://img535.imageshack.us/img535/9448/orkutxq.png

Botão imput - Mostrar/Ocultar

Por: Anônimo
0

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!

0 comentários:

Postar um comentário

© ---- Copyright © 2011 - 2011 By : SerpeaT ---- ©