Spoilers con jQuery y CSS3 en Blogger

Un spoiler es un sistema extensible y desplegable que permite ocultar contenido hasta que el usuario presione en él.

Había creado un sistema de spoilers que pensaba utilizar en el blog para mi nueva plantilla, pero no considero justo reservarlo para mí solo por lo que he decidido compartirlo.

Está basado con jQuery y algunos atributos CSS3 para mejorar la apariencia de un spoiler normal y sin formato, ya que lo mismo se puede hacer con javascript y html básico pero es muy sencillo.

Vista previa del spoiler:

Mostrar contenido

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

¿Cómo usar estos spoilers?

Paso 1: Instalando el script:

En ''Diseño | Edición HTML'' (''Plantilla | Editar plantilla'' si usas Blogger 2011) busca la siguiente sección:

</head>

Arriba de esta, pega el siguiente código:

<script charset='ISO-8859-1' src='http://dl.dropbox.com/u/28164309/Recompressed/jquery151.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function()
{
  //oculta el msg_body
  $(&quot;.msg_body&quot;).hide();
  //permite la animacion del msg_body
  $(&quot;.msg_head&quot;).click(function()
  {
    $(this).next(&quot;.msg_body&quot;).slideToggle(600);
  });
});
</script>

<style type='text/css'>
p {/*IGNORAR*/
padding: 0 0 1em; /*IGNORAR*/
}
.spoiler { /*CONTENEDOR*/
margin: 0px auto; /*PERMITE CENTRAR EL SPOILER*/
margin-bottom:10px; /*NO TOCAR*/
padding: 0px; /*NO TOCAR*/
width: 603px; /*TAMAÑO DEL CONTENEDOR*/
}
.msg_head { /*BOTON DEL SPOILER*/
padding: 7px 15px; /*ESPACIOS DEL BOTON*/
cursor: pointer; /*IGNORAR*/
position: relative; /*NO TOCAR*/
display: inline-block; /*NO TOCAR*/
padding: 5px 40px 6px; /*IGNORAR*/
text-shadow: 0 -1px 1px #222; /*SOMBRAS EN TEXTO*/
color: #fff; /*COLOR DEL TEXTO DEL BOTON*/
Font-family: Calibri, Verdana, Ariel, sans-serif; /*FUENTE DEL BOTON*/
text-decoration: none; /*IGNORAR*/
font-weight:bold; /*IGNORAR*/
font-size:14px; /*TAMAÑO DE LA FUENTE DEL BOTON*/
line-height: 1; /*IGNORAR*/
-moz-border-radius: 5px; /*BOTON REDONDO*/
-webkit-border-radius: 5px; /*BOTON REDONDO*/
-moz-box-shadow: 0 1px 3px #999; /*SOMBRA*/
-webkit-box-shadow: 0 1px 3px #999; /*SOMBRA*/
border-bottom: 1px solid #222; /*BORDE*/
background-color: #d64937; /*COLOR DEL BOTON*/
margin:1px; /*IGNORAR*/
}
.msg_body { /*Contenido oculto*/
-moz-box-shadow: 0 1px 3px #999; /*SOMBRAS*/
-webkit-box-shadow: 0 1px 3px #999; /*SOMBRAS*/
display:none; /*NO TOCAR*/
padding: 15px 10px 10px 15px; /*ESPACIADOS DE LOS BORDES*/
width:500px; /*ANCHO DEL SPOILER*/
color:#666; /*COLOR DEL CONTENIDO*/
background-color:#F1F1F1; /*FONDO DEL CONTENIDO*/
Font-family: Calibri, Verdana, Ariel, sans-serif; /*FUENTE*/
border: 1px solid #D1D9DF; /*BORDE*/
}
</style>

Guarda los cambios y listo.

Paso 2: Usar un spoiler:

En Edición de HTML de la entrada, pega el siguiente código.

<div class='spoiler'>
<p class='msg_head'>Mostrar contenido</p>
<div class='msg_body'>

CONTENIDO OCULTO.

</div></div>

Previsualiza los cambios para comprobar que el spoiler esté funcionando correctamente.

Importante:

Reemplaza lo siguiente:

• Mostrar contenido: Corresponde al nombre del botón.
• CONTENIDO OCULTO: El contenido a ocultar.

Recuerda que si tienes jQuery instalado elimina la siguiente línea:

<script charset='ISO-8859-1' src='http://dl.dropbox.com/u/28164309/Recompressed/jquery151.min.js' type='text/javascript'/>