Testes Bnk

Testes Bnk

Olá (...)
Hoje vou dar a dica de como criar um spoiler.
O que é um "spoiler"? É mais uma forma de organizar os seus posts, como este artigo que já indiquei.
Veja o exemplo de spoiler aqui.


<div id="spoiler" style="display:none">
TEXTO OCULTO

</div>
<button title="Clique para ver" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">ARTIGO PRINCIPAL</button>

<-- ADICIONAR MAIS QUE UM SPOILER / EDITAR O NOME SPOILER (exemplo: spoiler1)-->

<div id="spoiler1" style="display:none">
TEXTO OCULTO
</div>

<button title="Clique para ver" type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}">ARTIGO 2</button>

<-- SPOILER COM IMAGEM -->

<div id="spoiler" style="display:none">
TEXTO OCULTO

</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>

Se quiser adicionar mais que um spoiler, tem que modificar o code, a tag spoiler, por exemplo spoiler1 no code seguinte.
Quanto ao spoiler com imagem, não se esqueça de modificar o URL DA IMAGEM que está descrito no code.
Aqui fica mais uma opção de organização de post's no Blogger.

Partilhar

O seu incentivo é a nossa motivação.

0 comentários:

Enviar um comentário

 
Topo