Boton efecto mostrar y ocultar dentro del post - enrHedando Boton efecto mostrar y ocultar dentro del post - enrHedando

Boton efecto mostrar y ocultar dentro del post



Botón efecto mostrar y ocultar dentro del post. Ya habréis visto en algunos de mis post o ediciones del blog que son muy largas un botón de abrir y cerrar, cuando haces un post tan largo está muy bien porque se obtiene mucha información sin irte del sitio, pero también es verdad que la página tarda más en cargar, porque las imágenes y el contenido ralentizan el sitio, lo hacen más lento, hace un tiempo se me ocurrió poner un "spoiler", un botón que rápidamente dentro del mismo post o edición "abra y cierre" sin recargar el sitio, y sin apenas notarse.

Boton efecto mostrar y ocultar dentro del post

Esté botón tiene un movimiento de tres pasos: "para verlo, para ocultarlo y para volverlo a ver".

Se suele llamar "toogle" y funcionaría con jquery, pero lo bueno de este mio es que es un "spoiler" solo hecho a base de css, y no lleva scripts que recarguen el blog, además se puede poner en todos los sitios que quieras tanto dentro de los post o ediciones, e incluso en el sidebar en los html donde se insertan los gadgets, y tantos como se quiera.


También dispone de la ventaja de poder meter dentro de la estructura de su código, tanto texto como imágenes u otros códigos, y que al pinchar en él se abra con un efecto suave sin saltos de línea, esto hace que se vaya cargando la edición del post o sea las imágenes y el texto, antes de que se pueda pinchar el botón, por lo cual cuando se pinche ya este todo cargado rápidamente, y los visitantes del blog lo verán todo sin bloqueos. Lo vais a ver en este post ahora mismo

Me han pedido que les diga el código y con mucho gusto aquí os lo pongo

Copiar y añadir el código de abajo al post o edición en vuestros blogs, en todos los post o solo en uno, como querais es un código independiente que no hace falta ponerlo en plantilla esta hecho a base de CSS y no lleva scripts ni nada parecido.

Copiar el siguiente código:

Pinchar en el botón y...

<div class="pre-spoiler">
<span style="float: left; padding-top: 2px;"></span> <input id="xs" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Vuelvelo a ver';}" style="font-family: verdana ms; font-size: 16px; margin-left: 60px; padding: 5px; border: 5px double; width: 120px; rgb (0, 0, 0); color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);" type="button" value="Ver Completo" /> <div class="spoiler" style="display: none;">

AQUI PONER TEXTO E IMAGENES QUE QUERAMOS ESCONDER CERRANDO SIEMPRE CON LOS 2 DIV DE ABAJO

... </div>
</div>

Podeis cambiar dentro de ese mismo codigo: el tamaño, el color, los márgenes, y el texto donde dice "Ver completo", o "Pinchar en el botón y..." y también donde dice " Vuelvelo a ver", y poner el texto que querais vosotros.

*También podeis hacer una "plantilla de entrada", dentro de la configuración del blog, y pegar el código, así cada vez que abráis una edición nueva en el blog os saldrá dentro del mensaje que vais a editar, y no tendreis que preocuparos.