Spoilers con jQuery y CSS3 en Blogger ~ Mundo Blogger

Spoilers con jQuery y CSS3 en Blogger

Category: Trucos

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

¿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
$(".msg_body").hide();
//permite la animacion del msg_body
$(".msg_head").click(function()
{
$(this).next(".msg_body").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>