Poner botón de Spoiler en el blog

El poner un botón de Spoiler en una entrada de nuestro blog en Blogger es muy sencillo, y aquí os enseñaré a hacerlo ;-) Pero primero, un ejemplo:

SPOILER (para ver lo que hay dentro del spoiler, pinchad sobre el link ^^)

Esto es un ejemplito de cómo quedaría el botón de Spoiler. Al pinchar sobre el link "Spoiler", se nos abrirá la información, fotos, etc que no queremos que se vea, a no ser que se pinche en el link.

A hacer esto es a lo que os voy a enseñar. Algo muy práctico, la verdad ^^

1º Lo primero que haremos será ir a Diseño/ Edición HTML y marcamos la casilla de verificación de "Explandir plantillas de artilugios".

2º Buscamos esta etiqueta en el código: ] ] > < / b:skin> (pero sin los espacios).

3º Justo después ponemos esto, sin los espacios que he dejado en las etiquetas al principio de script y /script:

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

4º Encima de ] ] > < / b:skin> (pero sin los espacios) ponemos esto:

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

5º Guardamos la plantilla.

6º Cuando escribamos en una entrada, si queremos añadir un spoiler, en "Edición de HTML" a la hora de redactar en "Creación de Entradas" pondremos el siguiente código, y dentro, la información que queremos ocultar. Eso sí, quitadle los espacios que he puesto al principio y final del código. Es que, si no, no me dejaba de ponerlo ^^

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

Y listo!! Ya podemos hartarnos de poner Spoilers en las entradas del blog xDD