#edihitt agregador informativo: modelo

Pesquisar :

Mostrando postagens com marcador modelo. Mostrar todas as postagens
Mostrando postagens com marcador modelo. Mostrar todas as postagens
outubro 09, 2014

spoiler , você sabe o que é e como usar?

"Meu modelo de spoiler. "

Tutorial


Primeiro:

 Com "button"
código: 
HTML
 ▼
<div id="spoiler" style="display:none">TEXTO A SER 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>







Segundo:

Querendo adicionar mais de um "spoiler'', em sua postagem, por exemplo.

Você deve acrescentar outro caractere às "tags":
"spoiler"   (04 (quatro) no total), que estão presentes no código:

HTML



<div id="spoiler 1" style="display:none">TEXTO A SER 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'}"> <img src="URL DA IMAGEM" /></button>


Nota: Observe "spoiler 1" em negrito, no código acima
Como acréscimo do número "1" ao "spoiler", diferenciará um "spoiler" do outro!
Quando ocorrerem 02  (dois) "spoilers" .
Ocorrendo mais  de 01 (hum)  "spoiler ", em sua postagem;
você deverá, ir mudando em cada código, o número diferente de  número "1", nesse caso.


Caso você repetir a numeração, o código ficará idêntico, e o "spoiler" ,não funcionará.




Terceiro:
*
 Querendo customizar o "botão"
... "spoiler":

 Para mudar o botão "spoiler", por uma imagem,
basta, aonde estar escrito "CLIQUE AQUI" , no código citado  no primeiro código dedessa postagem, acima;
pelo seguinte código:

 <img src="URL DA IMAGEM" />

ficando assim:
o
HTML


<div id="spoiler" style="display:none">TEXTO A SER 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>



Quarto:
Exemplo de "spoiler com imagem:"
o
HTML

o código:

<div id="spoiler" style="display:none">TEXTO A SER 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>

seta vede=URL DA IMAGEM = http://1.bp.blogspot.com/-t9IhzNshbqM/U_QktqeKHBI/AAAAAAAAa-M/VEE31-wnUM4/s1600/seta%2Bverde.png








<div id="spoiler9" style="display:none">TEXTO A SER OCULTADO</div> 
<button title="Clique para mostrar/ocultar"  
type="button" onclick="if(document.getElementById('spoiler9') 
.style.display=='none') {document.getElementById('spoiler9') 
.style.display=''}else{document.getElementById('spoiler9') 
.style.display='none'}"> <img src="URL DA IMAGEM" /></button>


Veja o funcionamento, de "spoiler"com imagem:


contato

Nome

E-mail *

Mensagem *

Arquivados

Marcadores

Popular

Postagem em destaque

tricô : Ponto intercruzado...como executar? Tutorial: Material: Fio de malha Agulha de tricô

...tricô :   Ponto intercruzado... ...como executar?  Tutorial : Material : . Fio de malha  . Agulha de tricô número 07 (sete) . t...

YouTube channel

YouTube channel