``\(^<>^)/´´

1 de abril de 2008

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

48 comentarios:

Fern2 dijo...

agradezco la existencia de esta entrada, estaba buscando hace un rato el Como hacer spoilers. TNKU, continuare robandote ideas.

DrPollit0 dijo...

Gracias por comentar :D
Para eso mismo hice esta entrada.

lluquel dijo...

Gracias men.. no pudo ser mas facil... yo tengo un blog anime.. asi que para poner capturas ocupaban mucho espacio.. ahora ya lo tengo redusido...

ATTE:Senpai -- lluquel

Diego Ignacio dijo...

hola doctor pollito xD
saludos de chile mgusto tu blog... pero llevo horas tratando de ver en el codigo html donde puedo poner la cosa esa de los spoilers y no puedo :|
no lo encuentro no se, ayudarias a un newbie?? xD

Luis Elias dijo...

Gracias por el dato
Tenia tiempo buscandolo
y me funciono muy bien =D

Saludos

Jada dijo...

guaaauu¡¡

q bien me vino la info,

muchisimas gracias¡¡

tebo1205 dijo...

Ey muchas gracias, me fue muy util ;).

Chito dijo...

Oye muchas gracias me sirvio bastante, te lo agradesco mucho. Saludos y que estes bien ;-*

pedrocelki dijo...

Muchas gracias! ya lo he puesto en mi web^^

pepe dijo...

pregunto lo mismo ke diego ignacio repode porfa ke necesito hacer esto

Bayron dijo...

Gracias !!! funciona al 100%!

Spirit Warrior dijo...

Muchas gracias men me has salvado :)

Odiseo Blabla dijo...

me funcionó... muchísimas gracias...

FULLFLOG.com dijo...

Muchas gracias, lo implementamos en nuestro sitio y funciona perfecto. Un cordial saludo.

MacMesias! dijo...

Gracias hermano! estaba buscando esto. Se agradece!

alxxmo dijo...

gracias por el tuto XD no sabia como hacerlo, lo voy a probar

KyoFch dijo...

Hey muchas gracias!, si me funciono y bien, ahora ya puedo poner contenido oculto a mi blog de porqueria jajaja!!!

J053PH dijo...

HOLAS

Que buena ayuda para los que no sabemos de estas cosas.

Funcionó muy bien

GRACIAS

J053PH dijo...

Ohh, y lamento lo de Chanquete, no sabia de su muerte U_U

SALUDOS
Posiblemente robe tu entrada (^_^ )

Jaime Enrique Gutiérrez Pérez dijo...

Oye, te agradezco mucho el haberme dado esa información. Gracias a ti, aprendí a hacer spoilers, aunque me tomó dos horas dominar la técnica.

Gracias

Jaime Enrique Gutiérrez Pérez dijo...

En Fin. Supongo que como debo ser nuevo, era de esperarse ese largo camino

Kase dijo...

esta genial.... gracias por la infoooo...!!!!

junnior dijo...

mu8y buena la info jejejejje

Arquiridium Corp. dijo...

Hola muy buena la data, pero lamento decirte que en mi blog no funciona :( no se que pasa, segui al pie de la letra todo y no hay caso :(
Sera algo de mi plantilla que no me deja usar ese Script?=

++Silva; dijo...

Amigo DrPollito, muchas gracias por tan excelente aporte a la comunidad de la Blogósfera!

Gracias a vos, mi Blog ya no se vé tan desordenado como antes, me encanta.

De nuevo, muchas gracias!!! Salu2!

Karla dijo...

Hola! Me sirvio de mucho! Una pregunta ¿se le puede dar formato al Spoilder y a su contenido?
Es que cuando intento hacerlo se me chafa..

Aηgεζus Ðεαth dijo...

Hola,
no acostumbro hacer esto porque recien empiezo XD

Pero vengo a darte las gracias ,porque siguiendo los pasos en tu entrada me va a servir mucho a futuro este "truco"

saludos!

Maple Leafs dijo...

buenisimo. me ayudo mucho. gracias


slds.

http://foxterrierwirehair.blogspot.com/

DragonTrainer dijo...

Muy bueno. Muchas gracias por la entrada.
Además, otro uso interesante que se le puede dar a este código es el "Leer más..." tan típico de Wordpress, que sirve si nuestro post es muy largo.

javier dijo...

llevo varios meses aprendiendo de codigos html por internet y es la primera vez que me animo a opinar. Muchas gracias, sirvio al 100%.

Michelle dijo...

Muchas gracias por el código, es bastante útil *_*

Anónimo dijo...

me viene geneial para mi blog ya que trata de series y estoy empezando.

SI alguien se anima visiten xD.
http://algomasqueseries.blogspot.com/

Gracias por la info

LU7EGC dijo...

La verdad una maravilla, parece una pelotudes pero te ayuda con varias y muchas cosas!!

Mil gracias un excelente aporte!!

Saludos!1

... ^^

Anónimo dijo...

any news coming ?

Cyllan dijo...

Yo lo que busco es como esconder un spoiler en un comentario, no en el post. ¿También sabes hacer eso? Te agradecería que me contaras.

NOONAS ASIATIC dijo...

no encuentro el codigo q pones para poner antes y despues como hago me puedes ayudar

Troyanonano dijo...

A mi no me funciona..y lo necesito urgente T__T
sera que me lo puedes decir por msn?

Troyano_L2@hotmail.com


pasate por mi blog ^^

http://troyanonano.blogspot.com

Jordy Madueño dijo...

Muchas gracias,.. yo pense que no me salia, pero es que en la vista previa se ve todo, pero recien al publicar si funciona,..

Saludos

Alesky dijo...

Gracias.... ^^ buen aporte...

Lomlucagua dijo...

muchas gracias por este post, me hacía falta para tener un poco más limpio el blog, un saludo

Pilar Baena dijo...

ya que lo estoy usando continuamente en mi blog, qué menos que darte las gracias.
Funciona a la perfección.
lo que más me ha llamado la atención es que la orden "click para esconder" sea en español.
ingenuamente pensé que las órdenes al ordenador, valga la redundancia, solo valían en inglés!!!??? (ya sabes hidden y todo eso...

Pilar Baena dijo...

bueno, es "click para epandir", pero tú ya me entiendes,...

ShikoWesley dijo...

sabes que tengo un problema... aveces, el spoiler me queda adentro de otro spoiler :B

si kieres echale una mirada a mi blog :)

http://shikowesley.blogspot.com/

Haste dijo...

lo probe y no me fuciono la parte del contenido oculto supongo que por que dejaste el ejemplo de una imagen ,como seria el codigo en ves de este para las imagenes <img , el de video para mas detalles lo que quiero es que tenga el nombre de el video el boton en ves de spoiler y que al darle click se muestre la ventana de video ... mi blog es hasteteam.blogspot.com si ves que se puede me gustaria escuchar tu consejo.

Haste dijo...

ya lo solucione si alguno tiene mi misma duda el codigo <img funciona para cualquier tipo de archivo ^^ pero si ya tienes creado en una entrada el video blogger no te lo deja en formato de letras te lo acopla ya como un video ^^ lo borrar buelves a poner el codigo de insertar y listo feliz como una lombriz XD muchas gracias por todo

xziled dijo...

Muchisimas gracias por el aporte, me será bastante util... me añado a la lista de usuarios satisfechos xD

El Borrador de Papel dijo...

En lo que a mi respecta te terminaste de ganar el cielo con esto, no te imaginas el tiempo que vengo buscando esto... casi lloro cuando veo que funciono... te re mil agradesco.

Un saludo grande.

My blog

pepeworks dijo...

Muchas gracias!
Ya lo había aplicado con anterioridad, pero perdí la anotación que tenía para aplicar el código!