Una funzionalità che ho visto molto spesso sui forum è il bottone dello spoiler, che viene solitamente utilizzato per inserire diciture o frasi umoristiche in modo apparentemente nascosto. Per fare un esempio può avere la stessa funzione del PS. inserito al termine di una discussione per non andare troppo fuori discorso oppure può essere usato ad esempio per non raccontare apertamente una parte di un film, un cartone, di una storia per non rovinarne la trama. Su Scuolissima.com l'ho utilizzato per creare dei piccoli esercizi come per esempio l'esercizio sulle equivalenze.
Se sui forum si può attraverso un bottone non si può certo dire la stessa cosa con Blogger che non mette a disposizione tale bottone negli strumenti per creare un nuovo post. A tal proposito vi fornirò diversi codici, ognuno coi suoi pregi e difetti.
Qui sotto è riportato lo stesso codice che ho usato per realizzare il bottone soprastante che vi permetterà facendo click su di esso di mostrare o nascondere un testo. Il codice lo dovete inserire nella modalità HTML all'interno di un post e, solamente dopo la pubblicazione sarà funzionante mentre se lo testate con il post ancora in fase di creazione non vi funzionerà. Il seguente bottone può funzionare anche all'interno di un gadget HTML/Javascript.
Nel codice in grassetto e in rosso sono stati evidenziati le più comuni modifiche che si possono effettuare in questo codice.
Apri / Chiudi = può essere modificato e sostituito da altre parole come On/Off, Mostra/Nascondi, oppure da una sola parola come ad esempio spoiler, oppure se si tratta di un esercizio, soluzione.
Il testo che volete nascondere lo dovete inserire al posto di Inserisci testo qui.
Essendo un passaggio che spesso si dimentica dopo una modifica del post lo ricordo nuovamente: il post dopo l'utilizzo dei codici per nascondere il testo va sempre salvato in modalità HTML.
Se sui forum si può attraverso un bottone non si può certo dire la stessa cosa con Blogger che non mette a disposizione tale bottone negli strumenti per creare un nuovo post. A tal proposito vi fornirò diversi codici, ognuno coi suoi pregi e difetti.
1° Bottone
Qui sotto è riportato lo stesso codice che ho usato per realizzare il bottone soprastante che vi permetterà facendo click su di esso di mostrare o nascondere un testo. Il codice lo dovete inserire nella modalità HTML all'interno di un post e, solamente dopo la pubblicazione sarà funzionante mentre se lo testate con il post ancora in fase di creazione non vi funzionerà. Il seguente bottone può funzionare anche all'interno di un gadget HTML/Javascript.
<input value="Apri / Chiudi" style="margin: 0px; padding: 0px; width: 130px; font-size: 13px;" 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 = 'Chiudi'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Apri'; }" type="button"> </div><br /><div style="margin: 0px; padding: 5px; border: 1px inset; background: #f3f3f3 none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color:#008250; line-height: 1.4em;"><div style="display:none;">INSERISCI TESTO QUI<br /></div></div></div>
Apri / Chiudi = può essere modificato e sostituito da altre parole come On/Off, Mostra/Nascondi, oppure da una sola parola come ad esempio spoiler, oppure se si tratta di un esercizio, soluzione.
Il testo che volete nascondere lo dovete inserire al posto di Inserisci testo qui.
2° Bottone (senza riquadro)
Se il codice precedente non è di vostro gradimento perché mostra quella riga grigia potete utilizzare quest'altro codice, ma l'unico modo per renderla funzionante è salvare il post in modalità HTML, viceversa salvato nella modalità SCRIVI non si aprirà il testo nascosto:
<div class="nascosto">
<input type="button" value="Soluzione" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Nascondi'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Soluzione'; }" />
</div><div><div class="nascosto" style="display: none;">
<p>INSERISCI TESTO QUI</p>
</div></div>
3° Tramite Testo (senza bottone)
Il bottone occupa più spazio di un normale testo, anche senza il bottone si può nascondere un testo, ad esempio utilizzando il codice sottostante apparirà o scomparirà cliccando sul testo Mostra/Nascondi.
<div class="nascosto1">
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostra / Nascondi ▼▲</a>
</div><div><div class="nascosto1" style="display: none;">
<p>INSERISCI TESTO QUI</p>
</div></div>
4° Tramite Immagine
Si può anche inserire una immagine da cliccare per mostrare il testo nascosto:
<div class="nascosto2">
<img src="URL_IMMAGINE" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="nascosto2" style="display: none;">
<p>INSERISCI TESTO QUI</p>
</div></div>
Essendo un passaggio che spesso si dimentica dopo una modifica del post lo ricordo nuovamente: il post dopo l'utilizzo dei codici per nascondere il testo va sempre salvato in modalità HTML.