Los spoilers sirven para ocultar cierto contenido de una entrada del blog, ya sea por estrategia o por est�tica, estos spoilers ocultan contenido y lo muestran s?lo cuando el usuario lo solicita.
En esta entrada veremos 4 m�todos para poner un spoiler y as? puedas elegir el m�todo que m?s se adapte a tus necesidades.
En esta entrada veremos 4 m�todos para poner un spoiler y as? puedas elegir el m�todo que m?s se adapte a tus necesidades.
Spoiler s?lo con CSS
Con este m�todo usaremos las bondades del CSS sin tener que recurrir a scripts, s?lo CSS y nada m?s. Pero, tiene dos desventajas, la primera es que se necesitan dos botones, uno para mostrar el contenido y otro para ocultarlo. El otro inconveniente es que al mostrar el contenido la p?gina hace un peque?o scroll hasta posicionar la p?gina donde est� el contenido.
El c?digo que usar?as en tus entradas para este tipo de spoiler con CSS ser?a el siguiente:
<input onclick="window.location='#mostrar1';" type="button" value="Mostrar"/>
<input onclick="window.location='#';" type="button" value="Ocultar" />
<div id="spoiler1">
<div id="mostrar1">
...Aqu? el contenido que quieres ocultar...
</div>
</div>
<style>
#spoiler1 > div {display: none;}
#spoiler1 > div:target {display: block;}
</style>
En color rojo debes poner el contenido que estar? oculto. Lo que est? en color azul lo debes cambiar cada vez que agregues un spoiler, por ejemplo, si agregas uno m?s cambia spoiler1 por spoiler2 y mostrar1 por mostrar2
Este tipo de spoiler es similar al spoiler que vimos hace algunos a?os, s?lo que ligeramente modificado. Su uso requiere Javascript, muy poco en realidad. B?sicamente hace lo mismo que el spoiler con CSS pero llamando los estilos con Javascript.
Spoiler usando Javascript
Este tipo de spoiler es similar al spoiler que vimos hace algunos a?os, s?lo que ligeramente modificado. Su uso requiere Javascript, muy poco en realidad. B?sicamente hace lo mismo que el spoiler con CSS pero llamando los estilos con Javascript.
<input type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''; this.value = 'Ocultar'; }else{document.getElementById('spoiler1') .style.display='none';this.value = 'Mostrar'; }" value="Mostrar"/><div id="spoiler1" style="display:none">
...Aqu? el contenido que quieres ocultar...
</div>
De igual forma deber?s cambiar el ID spoiler1 (todas las veces que aparece) cada vez que quieras a?adir uno nuevo.
Este m�todo ya lo vimos alguna vez en el post "expandir y contraer partes de una entrada". Este a diferencia de los anteriores muestra el contenido oculto con un efecto deslizante, d?ndole un toque m?s atractivo.
Spoiler usando Scriptaculous
Este m�todo ya lo vimos alguna vez en el post "expandir y contraer partes de una entrada". Este a diferencia de los anteriores muestra el contenido oculto con un efecto deslizante, d?ndole un toque m?s atractivo.
Para usarlo necesitamos tener Scriptaculous, si a?n no lo tienes agr�galo antes de </head>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>Y cuando quieras poner el spoiler en una entrada usa este c?digo:
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>
<input onclick='Effect.toggle("spoiler1","slide"); return false' type='button' value='Mostrar'/><div id='spoiler1' style='display: none;'>En este caso tambi�n deber?s cambiar las partes en azul siempre que quieras a?adir m?s.
...Aqu? el contenido que quieres ocultar...
</div>
Spoiler usando jQuery
Por ?ltimo vamos a ver c?mo ocultar contenido con jQuery, con el cual tambi�n podremos conseguir un efecto deslizante al mostrar u ocultar el contenido del spoiler.
Si no tienes jQuery ponlo despu�s de <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
Y en tu entrada usa este c?digo cada vez que quieras poner tu spoiler:
<input type="button" id="spoiler1" value="Mostrar"/>Aqu? otra vez hay que cambiar lo que est? en azul cada vez que quieras a?adir uno nuevo, por ejemplo spoiler1 por spoiler2 y mostrar1 por mostrar2
<div class="mostrar1" style="display: none;">
...Aqu? el contenido que quieres ocultar...
</div>
<script>jQuery.noConflict();jQuery(document).ready(function(){jQuery('#spoiler1').click(function(){jQuery('.mostrar1').slideToggle("slow");});});</script>
Y as? de sencillo puedes ocultar contenido en las entradas de tu blog, incluso en un gadget HTML/Javascript y como puedes ver son c?digos super cortos y sencillos de aplicar. El contenido que puedes poner para ocultar puede ser el que sea, una imagen, texto, un reproductor, videos, etc., etc.
No comments:
Post a Comment