75

Mostrar y ocultar con botones input

Una forma de Mostrar y ocultar parte de una entrada mediante el uso de botones input .

Lo he visto en esta entrada de Trucos Key donde podéis ver un ejemplo de como funciona con botones input sin personalizar.

Después de probarlo he cambiado algunas cosillas y personalizado el botón mediante CSS.

El procedimiento es muy sencillo, se trata de colocar el código directamente en el editor de entradas de esta manera:

<div class="pre-spoiler">
<span style="float: left; padding-top: 2px;"></span><input id="xs" value="Ver más" style="margin-left: 50px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" 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 = 'Ver más';}" type="button" /><div class="spoiler" style="display: none;">
COLOCAMOS AQUI LA PARTE A OCULTAR </div>
</div>

Cambios en el código del botón:

margin-left: 50px; La distancia del botón al borde de la entrada desde la izquierda.
width: 80px; Ancho del botón. Si ponéis un texto más largo en el botón, tendréis que aumentar su tamaño aquí.
font-size: 14px; Tamaño de la fuente del texto.
font-family: trebuchet ms; Tipo de fuente del texto.

Si queremos personalizar el botón input para adaptarlo al diseño de nuestro blog, añadiremos unas líneas en el código CSS de la plantilla (las verás pinchando en el botón de ejemplo) antes de ]]></b:skin>



Estos son los cambios en el CSS para personalizar el botón:

Entradas Relacionadas:

75 comentarios:


Anónimo

funciona perfecto!, muchas gracias rosa me ha sido muy util, si tienes tiempo y ganas pasate por mi humilde blog y me das alguna sugerencia para mejorarlo, un abrazo http://revistamotosclasicas.blogspot.com/

Ivan Rodriguez

ÑOOOOOSHHH!! Qué sencillo,no? Fántástico truco, Rosa,me da algunas ideas....
Un saludo.

Anónimo

Gracias x el truco, creo que me servira mucho :D saluditos y si quieres pasas por mi blog. byee!

Un Perro

buenisimo para resumir espacio en sidebar.
lo probe con link pensando que no se podia y en la propia barra lateral y funciona perfecto !!incluso añadi el banner de tu barra lateral ENLÁZAME y una foto. y todo perfecto
Genial Rosa !!

Ya tengo otro chiche para poner mas orden en mi Jauría.
un beso grande Rosa :D

El que sabe, sabe, y el que no, debe pasar por el Escaparate

Jaime Trujillo Escobedo

Muy buen truco Rosa!! es muy cómodo y muy lindo ;-)

LokoGB

Hola Rosa, tengo tiempo viendo tu blog, solo queda agradecer por todas las facilidades que encuentro aqui :D

Tengo una pregunta, tendria que hacer esto uno por uno con todos los post que deseo ocultar o hay una manera rapida? :S

Ahi te dejo mi blog hCk™

Unknown

Me encanta!!!!! :D es rápido y útil!
Muchas gracias ^_^

Un abrazote ronroneado ;)

Jessica

ay, Rosa..olvidalo...que ya lo hice, y me salio (estoy aprendiendo) pero conflige con algun otros jscript :S Que mala suerte tengo con esos scripts!

Anónimo

interesante, me sera de gran ayuda, muchas Gracias Rosa, como siempre excelentes ayudas.

Anónimo

Hola Rosa: hacia tiempo que quería preguntarte hacer de un efecto que vi en la pagina de Dimas, el en su blog tiene un post principal y conforme va publicando cada post el resto de las entrada anteriores se acortando, se resumen, tu sabes de algo o alguien que haya podido acoplar eso a Blogger?? Buen Sia!! :D

OptimusTronic

una pregunta para cambiar de color en que parte del codigo lo hago, donde dice id="xs" dentro de las comillas?

saludos.

Nelson

Saludos mi siempre estimada Rosa, como siempre tu aportando lo mejor para apoyar a tus seguidores, amiga tengo un par de consultas a ver si me puedes ayudar, la primera, ¿conoces alguna manera de respaldar nuestros blog? he escuchado que algunos han desaparecido por falla de Blogger y quisiera prevenir. Por otro lado amiga, como se utiliza la etiqueta "Alt" para las fotos que utilizamos en nuestros blog? entiendo que al hacerlo los motores de busqueda de Google pueden detectar incluso nuestras fotos, lo que ayuda un tanto mas a posicionarnos. Gracias de antemano mi genial amiga. Un abrazo desde Venezuela

Un Perro

este imput es impecable, hasta un vídeo incrustado en la entrada pude ocultar.
Beso Rosa

Unknown

Rosa, en una ocasión me dijiste como hacer para que el titulo del blog no apareciese por encima de la imagen, pero no recuerdo que hice con esa información, era facil pero lo he olvidado.
Cuando puedas me dices pero esto no corre ninguna prisa, vale?

Un Perro

MALINA:
creo que a lo que te referís es al diseño de la cabecera.
En el box de la cabecera, cuando te da la opción de subir una foto, via url o desde el PC, debajo del recuadro de la foto, te da las opciones de configurar el titulo con respecto a la foto que subiste.
* detrás del titulo
* en lugar del titulo
* reducir hasta ajustar tamaño ( o algo así)
Si a esto a lo que te referís, clickeas donde dice, en lugar del titulo y la foto queda sola, sin mostrarse titulo y descripción del blog.
Espero sea esto, si no, toque de oído y le erre a las notas :S

Unknown

Gracias un perro pero no es eso, sino de cuando la imagen esta adaptada en la plantilla y no quieres subir otra por ese sistema, porque es entonces cuando te obliga a poner algo en el titulo y esos caracteres se montan

Un Perro

Y le erre nomas jajajaja
:D

Anónimo

Jessica, en realidad esto que ves no son dos botones, sino uno solo, lo que cambia es el texto que está dentro.
Para hacer esto con un botón como el que tienes, tendrías que conseguir ese botón pero sin texto, el botón vacío, y en el css en background, colocar la imagen del botón.

Anónimo

Si Rosa, ya lo trate y funciono de maravilla, con ,la excepcion de que cuando publicaba el articulo, no me funcionaba. parece q conflige con otro script. Si supiera que script es el q me da tanta lata, lo quito.:S

Anónimo

Jessica, en mis pruebas no funcionaba si estaba usando la etiqueta <div> en la misma entrada, por si te sirve...

Anónimo

Jessica, quería decir otra etiqueta <div> además de la del código.

Anónimo

sharysce , no, no se como podría hacerse algo así en Blogger...lo cual no quiere decir que no se pueda.

Anónimo

Optimus, no, el xs es el id del elemento, lo que nos posibilita cambiar su aspecto.
Para cambiar el color es en el último código, en el css, el que está oculto en mi botón.

Anónimo

Nelson Diaz , creo recordar que ya te había contestado a esto...desapareció el comment:O o no lo has visto...

Te decía que el "alt" no es precisamente al posicionamiento a lo que afecta, sino que facilita a nuestras vistas la navegación, ya que esa etiqueta hace que se muestre un texto en lugar de la imagen si por cualquier causa esta no se muestra. También ayuda a la gente como los invidentes, que usan programas especiales que se sirven de la lectura del blog.

En cuanto a lo de respaldar el blog, si accedes a tu panel desde Blogger in Draft en lugar de desde Blogger "normal" verás en Configuración - Básico la opción de importar-exportar el blog:
http://blogandweb.com/blogger/importar-y-exportar-contenido-en-blogger/

LokoGB

Rosa como puedo hacer esto con todos mis post sin tenerlo que hacer uno por uno :S

Anónimo

MALINA, localiza el css que corresponde al título:
#header h1 {

Y coloca esta línea debajo:
visibility:hidden; display:none;

Anónimo

:P hola mi tesoro!!!...tienes un MIMO en:
http://gracielaroth.blogspot.com/2009/01/dos-premios-mimos.html
besitos!!!

Unknown

Hola Rosa, el menu que tengo en el blog queda bien con mi plantilla (Rounders) o hay alguna que quede mejor?

Lino Moinelo

Esto significa que se puede poner en la plantilla y así tener por defeto la posibilidad de expandir entradas ¿no es así?

Saludos

Anónimo

Hola Rosa, mira tengo una gran duda. En mi blog (Los Tiempos Modernos) tengo los posts a la izquierda y un sidebar a la derecha. Lo que quiero (si se puede) es añadir otro sidebar más junto al que tengo, y si es posible que tenga alguna manera de "postear" actualizaciones o cosas así. No sé si me he explicado bien. Si no se puede aunque sea dime cómo poner otro sidebar más junto al que tengo porque en todos los blogs de ayuda te dicen cómo ponerlo pero en el otro lado. Muchas gracias Rosa!

Anónimo

lokoGB, esto en concreto, no puede hacerse para todos, hay que aplicarlo en cada entrada que necesitemos usarlo.

Lino Moinelo

«Esto significa que se puede poner en la plantilla y así tener por defecto la posibilidad de expandir entradas ¿no es así?»

Con lo de plantilla me refería a la de los post, no a la del blog. De forma que con cada entrada ya nos saliera el código por defecto, listo para usar.

Anónimo

Lino, ah, perdona :$ entonces si, así es, puedes ponerlo en la "plantilla de entradas"

Anónimo

TECARUNGA, a mi me gusta :D

Anónimo

Álvaro Blanes, las instrucciones para colocar una nueva sidebar al lado de la otra, serían las mismas que para hacerlo a cada lado, con la diferencia de la colocación del código.

Tendrías que seguir las instrucciones de esta entrada:
Añadir sidebar

Con estos matices:
En elpaso [2] NO cambiamos el float, lo dejamos como está.


En el paso [3] colocaremos el código sobre esta línea:
<div id='sidebar-wrapper'>

Unknown

Gracias Rosa, me funcionó!

Iradai

Hola Rosa, he probado esta utilidad y esta genial. Mi pregunta es si se puede hacer para que salga intercalado entre dos textos. Lo puse como decia esta entrada, dejando por fuera del código, una parte que no queria que se encogiera, pero se me queda oculto de todas formas.
Hay que poner algun codigo para que respete un texto por debajo del boton.

Gracias

Anónimo

Iradai, no, nada más colocas el código tal como ves y después del último </span> continuas con el resto de la entrada.
Eso si, un consejo, revisa antes de publicarla desde la pestaña "edición html" del editor que todo esté bien y publica la entrada desde ahí.
A veces al cambiar de pestañas "editar" a "edición html" del editor los span juegan malas pasadas, como desaparecer por ejemplo.

Iradai

Hola Rosa, no me funciona detras del /span, ni publicando desde el editor html. Alguna otra idea?
Gracias

Iradai

Anónimo

Genial Rosa, como siempre.

En su día estuve buscando algo así en los grupos de ayuda de blogger y en otros blogs, y llegué a conseguir un script pero no puede hacerlo funcionar. En mi caso me sirve para ocultar o mostrar fácilmente soluciones problemas de ajedrez planteados en el blog.

Gracias, este blog es un tesoro.

Un saludo.

Anónimo

Iradai, pues no :( lo único que se me ocurre es que estés usando la etiqueta <div> en la misma entrada, porque eso si noté yo en mis pruebas, que entonces no funcionaba...

Iradai

Me rindo, lo dejo por imposible, he revisado el codigo html, pero ni idea de lo que está mal. Gracias de todas formas por tu paciencia.

OptimusTronic

gracias rosa! vere como me sale, si no puedo te molesto luego...

saludos.

Ana Gonzalez

Gracias Rosa:

Aun no te he preguntado nada, porque vengo aqui y lo encuentro todo muy bien explicado, pero aun asi te queria dar las gracias,ya que mi blog esta mejor desde que visito este tuyo.

Anónimo

Ana, gracias corazón :)

Pablo

un saludo desde a coruña.galicia.españa
Tusaro
Mi blog es muy modesto pero con tu ayuda va creciendo poco a poco.

Jessica

Rosa! Ya me salieron los botoncitos estos! wohoo!! Gracias!

Mira que lindos quedaron en este
blog con el fondo que le puse.

Me tomo tiempo, y aun estoy cambiando este codigo por el script que tenia antes,pero me gusta mas.

Como le hago para que no se tarde tanto en cargar mi blog?

Theemilio_crazy

muchas gracias en verdad me sirvio de mucho... tienes por hay en truco de leer mas...

Aguila78

Muchas gracias por el aporte!!!!:D
Pero tengo una pregunta y si la respuesta es afirmamtiva un pedido...
Con el boton de ocultar texto de un post, tambien se puede ocultar enlaces/vinculos...
He tratado de ocultar texto/enlaces o hipervinculos pero sin exito.
Me podrias ayudar xfvr!!!
mi BLOG: ZC-ZonaCero

Aguila78

:o:o:o:o
retractandome de mi ultimo comentario...
Fue error humano, error mio, habia combinado dos codigos, uno el escrip que gentilmente nos obsequias y otro de un enlace fantasma que pongo debajo del titulo. Esto lo hago para mis lectores sepan la fuente de la informacion que ofresco...
Asi que mis RESPETOS ROSA!!! gente como tú embellecen el mundo... :P ;)
GRACIAS!!! :):d

Raul

hola rosa, donde pone display: none, supongo que se podrá poner otra cosa además de none, yo creo que display se refiere a si se está mostrando desde el principio ¿no? pues yo quiero eso, que se esté mostrando desde el principio y que haya un botón para cerrar, otra pregunta ¿el botón para cerrar puede estar dentro del div que se va a cerrar? ya se que si lo hago así no se podrá volver a abrir pero me da igual

Anónimo

Alex y Raúl Prueba poniendo display: block a ver...
No puedo pararme a modificar las cosas según pidáis...sería imposible disponer de tiempo para todos, piensa que cada uno pedirá algo distinto, que se vea, que no, botón dentro, fuera...la opción que se propone es la más cómoda o lógica y cada uno intentará adaptarlo...sino me volvería loca.

Anónimo

rosa, se puede poner este boton imput dentro de la entrada que tiene el "leer mas" habilitado?


Softread blog

Anónimo

Softread No lo he probado...quizás como usa etiquetas span haya algún problema...no se, sería cosa de probar.;)

jmaza37

excelente este truco, lo he buscado hace mucho,los otros no me servian, pero este es sensacional y nada complicado..gracias

.|. +++ .|.

Muchas gracias rosita, esto lo estaba buscando por todo lado, y gracias a ti ya lo tengo.

Una pregunta mas, no sabes como convertir una plantilla de WORDPRESS a PLANTILLA BLOGGER, si lo sabes, espero que lo publiques, SUERTE y SIGUE ADELANTE

kloco23

muy sensiyo y muy bueno gracias:D

GONZALO

Hola Rosa.... cual sería el código para un botón como el de esta entrada que dice "VER CÓDIGO" pero no para mostrar y ocultar... sino para agregarle un enlace.... muchas gracias

Anónimo

Mauricio Sería algo así:
<a href="http://elescaparatederosa.blogspot.com"><input type="submit" name="nombre" value="Enlace"></a>

Este por ejemplo iría al Escaparate :D

En value colocas lo que se verá en el botón y en la url del escaparte la del enlace a donde llevará.

MinGi

Hola Rosa me a gustado mucho tu boton y lo he puesto pero quiero poner 7 y solo el primero funciona correctamente los otros no habren quisiera saber que tengo que hacer??? Ojala y puedas tener una solucion GRACIAS DE ANTYEMANO

Anónimo

FAN_Amuro Yo no lo he probado, pero he visto en muchos blogs que los usan incluso como leer mas en cada entrada...

Anónimo

rosita bueno te kiero preguntar algo fuera de tema
me gustaria tener un dock o algo asi para mi blog algo como esto
http://interpretesdeasl.blogspot.com/

me gusto mucho en realidad lo eh buscado desde que tengo un blog
como podria hacer algo asi?
muchas gracias

Anónimo

aaa ya descubri como hacerla
con wybiya
gracias de todos modos
:D

Mega

oye como puedo poner ese fecto pero en el boton de un menu?

Anónimo

Mega No lo se... y por cierto, no me llamo "oye" sino Rosa.

Mega

ok rosita :D jeje

grax de todos modos

saludoz

M&M

Hola Rosa!
En primer lugar, quiero agradecerte por tu blog. Al nuestro lo ha sacado de algún que otro apurillo y, gracias a El Escaparate y a unas lejanas clases de informática, nuestros histo-blogs cautivan a más de uno ^^

Tengo una preguntita:
Hoy es el cumpleaños de nuestro primer blog (http://locuraimperfecta.blogspot.com) y estamos haciendo una "fiestecilla" de cumple en este blog: http://xqlamagianoessolocosadepeliculas.blogspot.com
Hemos hecho dos test sobre los personajes de dos de nuestras historias y hemos usado el mostrar y ocultar de input que has sugerido en esta entrada. El problema es que cuando le doy al segundo input, me sale la respuesta del primero, y así continuamente. Sólo me sale lo que contiene el primero le de al input que le de.
Lo he intentado cambiando los id y las value, pero nada... ¿alguna sugerencia? Mil gracias ^^

M&M

Se me olvidaba!
La entrada es http://xqlamagianoessolocosadepeliculas.blogspot.com/2010/01/test-locura-imperfecta.html

Graciass =)

Anónimo

M&M No es necesario cambiar ni los ids ni el value... eso si, has de tener la precaución de incluir el código para los botones siempre desde la pestaña HTML del editor y no cambiar a Editar, es decir, colocar el código desde ahí y publicar...
Se me ha ocurrido que para que veas que si pueden incluirse más de uno, añadir otro en esta misma entrada, así lo verán también otras personas que tengan la duda... compruebalo, ahí están funcionando y no he hecho más que colocar de nuevo el código.

M&M

Bueno, pues no sé entonces qué habrá pasado..., ya lo volveré a hacer a ver si sale bien.
Muchas gracias^^

Anónimo

Hola Rosa: me encantó este post, excelente, queria preguntarte algo relacionado mas o menos al tema: como puedo cambiar el botón Archivo de la sidebar (en mi caso se llama Blog), personalizarlo como en el cuadro de búsqueda que tengo. O quitar el botón y poder expandir y contraer los archivos haciendo clic sobre el título (que tambien es Blog). Te agradezco tu tiempo y te envio un abrazo

Anónimo

carolinaEso no es un botón, es un menú expandible... para cada cosa su manera...

Mira si esta entrada te sirve:
http://elescaparatederosa.blogspot.com/2007/11/mostrar-y-ocultar.html

Anónimo

Si Rosa, muchas gracias por la ayuda, era lo que estaba buscando y no supe explicarlo, hasta pronto y me pongo a trabajar con el menú.

Unknown

Hola Rosa excelente Blog, quisiera que me ayudaras en un dilema que tengo:
Como hago para que el efecto sea inverso.

Osea que se muestre el Contenido pero cuando apretas el boton se oculte?

Ojala me puedas ayudar gracias y saludos

Rosa

Souhiro Lo siento, no puedo ayudarte... no modifico las cosas para cada uno o ni tiempo a dormir tendría... publico lo que me parece más útil para todos... no entiendo que objeto tendría el ocultar algo que ya has visto... se trata de acortar o aligerarla carga del blog ocultando... una vez visto y cargado...¿para que cerrar nada? :o

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S