SPOILER IMAGENES Y TEXTOS OCULTOS

Spoiler no es mas que un texto o imagen oculto detrás de un texto, son bastante útiles para alojar por ejemplo imágenes de gran tamaño o textos, veamos un ejemplo que es la forma más fácil de entenderlo.

EJEMPLO(Pinchar aquí para ver el ejemplo)

Esto es un ejemplo muy simple, lo podéis complicar tanto como queráis, podéis combinar texto con imágenes, solo texto o imágenes en fín eso depende de la utilidad que le vayáis a dar.


Como insertarlo en vuestro blog:

Primer paso:(acciones previas)

Tendréis que insertar un pequeño código en vuestra plantilla, para ellos dirijiros a Diseño->Edición de HTML

Buscar </head> justamente encima del mismo copiar el código:

<script type='text/Javascript'>

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

Una vez insertado ese código buscar la parte de código ]]></b:skin> y justamente encima colocaremos el siguiente fragmento de código:

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

Guardamos la plantilla y listo para utilizar.


Segundo paso:(inserción spoiler)

En el lugar que queramos que aparezca nuestro spoiler tendremos que añadir unas líneas de código, si es en una entrada en edición de HTML, si es en un lugar de la plantilla en el lugar del código oportuno y si es en un gadget este será de tipo HTML/javaScript.




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


Personalizar :

Identificador: Hace referencia a un nombre que tendréis que darle al spoiler, este nombre tendrá que ser único, es decir dos spoiler no podrán tener el mismo nombre, podréis asignarle cualquiera que se os ocurra ya que este no se verá reflejado en ningun lugar.

Contenido Oculto: Aquí es donde insertaréis el texto o imágen oculto

• Para insertar imágenes tendréis que subirlas a un servidor de imágenes como puede ser tinipyc, una vez generado el código tendréis que copiar el primer enlace donde dice: Dirección HTML para sitios Web y sustituirlo por donde puse contenido oculto.

• Para insertar texto, donde puse contenido oculto insertar algo de este tipo

  <span style="font-weight:bold;">Aqui el texto que queráis</span>
  

  Podéis por supuesto modificar el estilo de letra tamaño, color...
  

Nota: Combinar los pasos anteriores es muy simple, simplemente es realizar las acciones en el orden que más os convenga.