Ocultar datos en blog con botón abrir / cerrar

LuJo


Mediante un sencillo botón se puede ahorrar espacio en una entrada. Con este truco es posible esconder información (texto, imagen, link, código) o simplemente hacer visualmente una entrada más simple.
En este caso este tipo de códigos son factibles en cualquier otra parte del blog como la sidebar, footer,...

El que uso tiene la fórmula:




<div><div><div class="pre-spoiler"><span style="padding-top: 12px;"></span><input style="margin: 0px; padding: 0px; width: 100px; border: 3px double rgb(250, 201, 128); color: rgb(0, 0, 0); background-color: rgb(239, 251, 251);" value="ABRIR" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'CERRAR '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'VER ';}" type="button"> </div> <div> <div style="display: none;" class="spoiler"><span><div style="text-align: center;"><div style="text-align: justify;"><u></u>





Texto, código, imagen.....







</div></div></span></div></div></div></div>


- Tanto ABRIR - VER - CERRAR pueden sustituirse por otro conjunto de palabras
- margin es la distancia al borde la entrada.
- width es el ancho del botón. Si colocas un texto largo en el botón habrá que aumentar su número en px.
- font-size: Tamaño de la fuente del texto.
- font-family: trebuchet ms u otras es el tipo de fuente del texto.
- background-color: color del fondo del botón.
- color: color de la fuente del texto.
- border: bordes y tipos.

► Formación de botones y rollover con ellos en este enlace


Apuntes...


10 comentarios:

Steven O.

Hola lujo, este truco esta muy bueno para cuando tienes varias opciones y quieres ahorrar espacio, me lo apunto.
saludos!

Sonix

Me lo apunto, quiero probarlo en la barra lateral en alguna cosilla que ocupa mucho! Gracias!

LadyMarian

Me encanta este truco! Sobre todo que hasta podés esconderlo casi completamente, si querés.
Besos

Lujo

@fabian Holaaa,
Es muy simple. He visto que lo usan mucho para esconder los códigos interminables.
Abrazotes!!!

Lujo

@Sonix Holaaa,
Sí, en esa zona hay varias opciones. Intenta jugar con los colores y bordes; eso ayuda. (#^_^#)
Abrazotes!

Lujo

@LadyMarian,
Sí, es simple y no dependes de ningún script de carga.
Abrazotes!!!

elciervo99

muchas gracias me re ayudo!!

Lujo

@elciervo99
De nada!

mabel

Muy buen truco me imagino que no pone lenta la carga del blogg ya puse en carios gadged del blog y se ve mucho mejor.
saludos

Lujo

@mabel
Noooooo, esto es lo más sencillo que siempre funciona y no da problemas.
La carga no se resiente porque no hay scripts ni similares.

Recuerda tal y como indica el post que se pueden modificar:

- Tanto ABRIR - VER - CERRAR pueden sustituirse por otro conjunto de palabras
- margin es la distancia al borde la entrada.
- width es el ancho del botón. Si colocas un texto largo en el botón habrá que aumentar su número en px.
- font-size: Tamaño de la fuente del texto.
- font-family: trebuchet ms u otras es el tipo de fuente del texto.
- background-color: color del fondo del botón.
- color: color de la fuente del texto.
- border: bordes y tipos.

Saludotes

Publicar un comentario

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP