viernes, 4 de septiembre de 2009

Poner spoilers en blog

Bueno esto es algo que he encontrado hoy, y la verdad es bastante interesante para todos los que tenemos un blog, ya que lo podemos usar para reducir espacio. Esto sirve para que el contenido quede oculto, y se muestre con solo cliquear un enlace.

Para poder usarlo en su blog deberan hacer lo siguiente:

-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(esto ya en la entrada nueva)

<a aiotitle="click para expandir" href="javascript:togglecomments('NOMBREUNICO')">SPOILER</a>
<div class="commenthidden" id="NOMBREUNICO">CONTENIDOAOCULTAR</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 CONTENIDOAOCULTAR pon el contenido que quieras ocultar(texto, imágenes...).

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.


Manual por Blog de DrPollit0

No hay comentarios: