Come nascondere la parte finale di una recensione di un libro o di un film.

Come creare uno spoiler per nascondere una parte del contenuto nelle recensioni di film o di libri di narrativa.

I blog che si occupano di prime cinematografiche o che pubblicano recensioni su libri di narrativa devono operare la scelta non semplice di rivelare o meno al lettore come andrà a finire il film o come si concluderà il romanzo. Nei siti specializzati si usa internazionalmente un avviso denominato spoiler per lasciare la decisione al lettore se leggere la trama fino alla fine o se contentarsi solo della prima parte per non perdersi l'effetto sorpresa. Tale avvertimento è ovviamente destinato solo a che non abbia ancora letto il libro o non abbia ancora visto il film.

Usando gli strumenti del web si può rafforzare questa attenzione nei confronti dei lettori lasciando nascosta l'ultima parte della recensione e mostrando un bottone su cui il navigatore può cliccare nel caso volesse leggerla per intero. Passo a illustrare tre metodi con cui si possono nascondere dei contenuti. Non è detto che si possa farlo solo del testo formattato ma si possono nascondere anche le immagini, dei video o altri oggetti che siano suscettibili di essere postati con l'HTML

 

NASCONDERE CON IL CSS

 

Nascondere con l'ausilio del CSS significa utilizzare il tag display:none per nascondere di default e poi per mostrare quando si clicchi sull'apposito bottone. Si crea il post come al solito quindi si va su HTML che si trova accanto a Scrivi e si individua la parte di codice che vogliamo sia oggetto di spoiler. Si incolla il seguente codice prima e dopo a quello da nascondere

<style>
#spoiler_1 > div {display: none;}
#spoiler_1 > div:target {display: block;}
</style>
<input onclick="window.location='#show1';" type="button" value="Mostra"/>
<input onclick="window.location='#';" type="button" value="Nascondi"/>
<div id="spoiler_1">
<div id="show1">
... Codice del contenuto che si vuole nascondere ...
</div>
</div>

NASCONDERE CON IL JAVASCRIPT

Se si decide di usare il javascript si procede nello stesso modo individuando il codice del contenuto da nascondere e integrandolo con questo nuovo codice

<input type="button" onclick="if(document.getElementById('spoiler_2') .style.display=='none') {document.getElementById('spoiler_2') .style.display=''; this.value = 'Nascondi'; }else{document.getElementById('spoiler_2') .style.display='none';this.value = 'Mostra'; }" value="Mostra"/><div id="spoiler_2" style="display:none">
.... Codice del contenuto da nascondere ...
</div>

Si pubblica e i lettori vedranno il pulsante per visualizzare il contenuto nascosto

Praesent lacinia ligula a purus ornare, in rhoncus tellus dapibus. Duis faucibus purus ante, vitae convallis purus porttitor sed. Nulla eu ipsum eros. Donec erat dolor, elementum et sapien et, commodo congue ipsum. Phasellus eros mauris, bibendum posuere tincidunt id, lacinia sed felis. Mauris mauris ante, tempus quis nisi non, convallis pretium neque. Ut venenatis quam lorem. Phasellus et nisi et dui scelerisque tempor eget vel sem. Ut eu nisi non mauris blandit molestie eget ut erat. Nulla id eleifend nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi pellentesque metus est, nec lacinia lectus suscipit tempus.

NASCONDERE CON JQUERY

 

Sia nel caso del CSS sia nel caso del javascript il contenuto nascosto verrà mostrato repentinamente quando si cliccherà sul pulsante. Per avere un effetto slide decisamente più professionale si può usare Prototype e Scriptaculous che però è una libreria di script spesso incompatibile con i modelli di blogger personalizzati. La scelta migliore è quindi quella di usare JQuery che già è presente in molti template di Blogger e che permette di avere un effetto spoiler esteticamente più efficace. 

Al solito si cerca il codice del contenuto da nascondere e si inseriscono queste nuove righe

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
<script>jQuery.noConflict();jQuery(document).ready(function(){jQuery('#spoiler_3').click(function(){jQuery('.show3').slideToggle("slow");});});</script>
<input type="button" id="spoiler_3" value="Mostra/Nascondi"/>
<div class="show3" style="display: none;">
... Contenuto da nascondere ...
</div>

dove la prima riga evidenziata di giallo deve essere inserita solo nel caso non ci sia già JQuery nel template. L'effetto spoiler in questo caso sarà decisamente più raffinato

Vivamus in enim at tortor lacinia mattis ac ut nunc. Donec sodales, est vel rhoncus porta, mi magna ullamcorper mauris, at fringilla lacus dui et orci. Phasellus rutrum libero et tortor rhoncus, ultrices molestie ligula bibendum. Sed non risus eget neque sodales ultrices. Sed vel urna ac sem dictum ullamcorper et sit amet odio. Morbi congue facilisis neque. Etiam porttitor leo facilisis turpis tincidunt elementum. Fusce sit amet posuere turpis. Quisque a malesuada dui, eget lobortis tortor. Duis ac dui nec neque ullamcorper consequat. Morbi ullamcorper justo viverra, accumsan purus sit amet, sollicitudin ante.

CONCLUSIONE

 

Se in una stessa pagina si decidesse di mostrare più contenuti nascosti si possono usare gli stessi codici ma con una diversa numerazione dei selettori (es. show5, spoiler_5, ecc). Al posto dei bottoni con testo si può usare anche una immagine da cliccare per mostrare o nascondere un contenuto. 

Per usare una immagine al posto di un bottone anche con JQuery si può utilizzare questo codice

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
<script>jQuery.noConflict();jQuery(document).ready(function(){jQuery('#spoiler_4').click(function(){jQuery('.show3').slideToggle("slow");});});</script>
<div align="center"> <img id="spoiler_4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg06dNECgRsRuogDoIwOZwmRSDjKHkYoA-ddYWjRiU_u6_oMsk_ZGXyE5yN30yQ-molwlFLVuQDsT5mmJrewTHFlvfMVbhdjPQ8Lv3u-7eEw4j6c3JgKWlMMtrutTttYo3QyA-_XC1b0uD_/"/>
<div class="show3" style="display: none;">
<div style="width:500px; margin-top:20px; ,margin-bottom:10px; text-align:justify; color:#036; background-color:#fad6e5;">
Vivamus in enim at tortor lacinia mattis ac ut nunc. Donec sodales, est vel rhoncus porta, mi magna ullamcorper mauris, at fringilla lacus dui et orci. Phasellus rutrum libero et tortor rhoncus, ultrices molestie ligula bibendum. Sed non risus eget neque sodales ultrices. Sed vel urna ac sem dictum ullamcorper et sit amet odio. Morbi congue facilisis neque. Etiam porttitor leo facilisis turpis tincidunt elementum. Fusce sit amet posuere turpis. Quisque a malesuada dui, eget lobortis tortor. Duis ac dui nec neque ullamcorper consequat. Morbi ullamcorper justo viverra, accumsan purus sit amet, sollicitudin ante.
</div>
</div>
</div>

dove per facilitare i lettori meno esperti ho inserito anche due righe evidenziate di giallo per centrare tutto il contenuto. Tale contenuto l'ho evidenziato di verde mentre l'immagine ha l'URL colorato di rosso. Infine il codice di JQuery evidenziato di beige è necessario solo non ci fosse nel modello.