Como poner spoilers en blogger

Este post explica como poner spoilers en blogger de manera que el contenido quede oculto, y se muestre con solo clickar un enlace.
Tal vez también sirva para otro tipo de blogs, pero no lo he probado.


Spoiler es la información que revela total o parcialmente el argumento de un género narrativo.

Por ejemplo, si no has visto Verano Azul, no te gustaría saber que... SPOILER

Chanquete muere

Para evitar spoilear a la gente que no quiere ser spoileada, suelen utilizarse algunos trucos para ocultar estos spoilers. Por desgracia, blogger no incluye ninguno de estos trucos y si queremos hacerlos tendremos que hacer algunos apaños.

A continuación describiré los pasos que hay que seguir para implementar uno de estos apaños. Este en concreto ocultará automáticamente todo tipo de contenido(texto, imágenes...) y lo mostrará al hacer click sobre un enlace:


-Ve a Diseño > Edición de Html.

-Copia y pega este código Javascript entre las etiquetas ]]></b:skin> y </head>:

<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

-Copia y pega este código CSS justo encima de la etiqueta ]]></b:skin>:

.commenthidden {display:none;}
.commentshown {display:inline;}

-Guarda la Plantilla


Debería quedarte algo así:

.commenthidden {display:none;}
.commentshown {display:inline;}

]]></b:skin>

<script type='text/Javascript'>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

</head>

Ahora ya deberías poder añadir spoilers en cualquier entrada de tu blog.

A continuación están los pasos a seguir para añadir spoilers en una entrada:


-Añade el siguiente código:

<a aiotitle="click para expandir" href="javascript:togglecomments('NOMBREUNICO')">SPOILER</a>
<div class="commenthidden" id="NOMBREUNICO">CONTENIDOOCULTO</div>

-Donde pone NOMBREUNICO pon un identificador de spoiler único. Es importante que no pongas el mismo identificador a spoilers diferentes ya que en caso de poner el mismo identificador, cuando intentes abrir un spoiler es posible que abras el otro. Utiliza identificadores largos como por ejemplo veranoazulchanquete.
-Donde pone SPOILER pon el texto del enlace.
-Donde pone CONTENIDOOCULTO pon el contenido que quieras ocultar(texto, imágenes...).


Como ejemplo pongo el código del spoiler de Verano Azul que he puesto al principio de este post:

Por ejemplo, si no has visto Verano Azul, no te gustaría saber que... <a aiotitle="click para expandir" href="javascript:togglecomments('veranoazulchanquete')"><b>SPOILER</b></a><div class="commenthidden" id="veranoazulchanquete"><span style="font-weight:bold;">Chanquete muere</span>
<img src="http://i145.photobucket.com/albums/r218/drpollit0/blog/chanquete_avatar.jpg" /></div>

NOTA IMPORTANTE:
Ten en cuenta que si reestableces la plantilla o pones una plantilla nueva, el código Javascript y CSS que has introducido se eliminará y se verán todos los spoilers que hayas puesto en las entradas.

NOTA OPCIONAL 1:
En el código de añadir spoilers en una entrada nueva puedes substituir la etiqueta div por span. Por lo que tengo entendido, estas dos etiquetas actuan de la misma forma, con la diferencia de que div te formatea el texto como si fuera un párrafo y span no.

NOTA OPCIONAL 2:
Puedes guardar el código para añadir spoilers en Configuración > Formato > Plantilla de entrada, para que este código te salga cada vez que vayas a crear una entrada nueva.


Espero que este manual sirva para hacer de este un mundo más seguro y libre de spoilers xD

Manual copiado inspirado, traducido y mejorado a partir de Create Spoilers in Blog Posts :P