Para ello, lo primero que tenemos que hacer es insertar una función que cambiará de oculto a visible aquel bloque que nosotros identifiquemos adecuadamente. Así, antes del </head> metemos...
.visible { display:block; }
.invisible { display:none; }
</style>
<script type='text/JavaScript'>
function plegardesplegar(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == "visible"){
menu.className = "invisible";
}
else{ menu.className = "visible"; } }
</script>
Ahora colocamos justo después del <body>, el bloque que vamos a mostrar a modo de ventana emergente, pero usando la técnica de la entrada enlazada al principio, es decir un Z-INDEX con un número grande que la muestre en la parte superior y centrado con TOP/LEFT y los MARGIN correspondientes (la mitad del ancho/alto del DIV):
En cuanto a la plantilla, ya hemos terminado y podemos grabar aunque no apreciemos nada en la Vista Previa. Ahora toca colocar el enlace que hará que lo anterior sea visible y al repetir el click, vuelva a ser invisible. Podría ser por ejemplo en la barra lateral, como gadget HTML.
En los dos últimos códigos insertados IDENTIFICAVOBLOQUE tiene que ser una combinación alfanumérica igual en ambos casos. Si se utilizara este sistema para plegar/desplegar otro bloque, tanto el enlace como el bloque tendrían que tener también la misma combinación alfanumérica entre sí, pero distinta necesariamente de la de otro/s bloque/s.
Opcionalmente por si nuestro bloque se tiene que abrir justo encima del enlace que serviría para volverlo a cerrar, lo cual complicaría esta acción, podemos incluir en el propio código que forma la información oculta, un segundo enlace con el mismo IDENTIFICATIVOBLOQUE, a modo de botón "cerrar" y que ya habeis podido ver en los ejemplos del principio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nulla leo, facilisis non euismod elementum, hendrerit at velit. Maecenas vitae justo vel mauris dignissim pellentesque sed et diam. Etiam dui quam, posuere ut egestas vitae, dapibus id felis. Donec egestas faucibus purus, a bibendum enim feugiat quis. Sed pellentesque orci porta urna tincidunt nec commodo mauris semper. Suspendisse at quam mattis velit commodo sollicitudin id a ante. Maecenas quis libero tortor, vel accumsan erat. Nullam sit amet enim in arcu tristique euismod.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum arcu justo, sed tincidunt lacus. Fusce lorem risus, accumsan vel commodo at, tempus a justo.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
TE he tenido que quitar de widgets rss en google como uno de los blogs que leo, porque emerge esta ventana y tapa toda mi pagina de google, no dejandome ver ningun blog, lo siento.Pero informate para que lo sepas.
ResponderEliminarSupongo que la que sale es una amarilla grande que pone una frase sobre Splash Screen. Si es eso, desaparece a los pocos segundos e incluso puedes cerrarla pinchando en ella. Me ha pasado a mí ahora mismo echando un vistazo a mi fuente directamente en FeedBurner. Es curioso esto de los feeds. Hay cosas que se interpretan y hay cosas que no. El truco de hoy también es visible desde el feed pinchando en elos enlaces. Gracias por el aviso.
ResponderEliminarEsto es muy similar a lo que te mostré ayer en mi blog, pero sin animación, ¿verdad?.
ResponderEliminarUn saludo.
El resultado final es similar, pero el tuyo está más elaborado y es mucho más chulo.
ResponderEliminarMuchas gracias. Es la solución que quería cuando te pedí esto al visualizar el Splash Screen. Es que tengo un Blog con un botón que dice Acerca de... y quería usar está solución para mostrar una pantalla emergente que exponga con texto el Acerca de ( algo parecido a lo que sale en el Adobe Reader ). Sigo con gran interés aplicando en mi Blog casi todo lo que hay publicado en el tuyo ya que los resultados finales quedan muy bien.
ResponderEliminarHola Oloman :)
ResponderEliminarMe he estado fijando en tu plantilla Blogger bloc y he encontrado muy interesante ese menú que está colocado debajo del head
¿¿¿Cómo lo has hecho???
Grácias
¿El de las pestañas a la izquierda o el de los iconos pequeños a la derecha?
ResponderEliminarEL DE LAS PESTAÑAS A LA IZQUIERDA
ResponderEliminarPERDON:)
Vale Mercier. Déjame un tiempo que lo explique en un post.
ResponderEliminarHola Oloman, instalé este truquillo pero no funciona la pestaña de cerrar, es decir, para cerrar el bloque emergente hay que volver a hacer clíck en el texto. Agradecería tu ayuda. Puedes observarlo en el texto "suscripciones" que puse encima de las entradas en este blog: http://jeramon-jurisprudenciaactualizada.blogspot.com/
ResponderEliminar¿Seguro que has copiado bien el código? En tu fuente veo unas barras que no me gustan un pelo:
ResponderEliminarhref='javascript:plegardesplegar(\'identificativobloque\');'
Creo que en lugar de una \', deberían ser un "
El que sabe, sabe, Seguro!!
ResponderEliminarNo entiendo por qué al copiar, en vez de ", se convertía en &apos. Tuve que corregir manualmente y listo.
Gracias mil.
:)
ResponderEliminarHola. Gran blog.
ResponderEliminarAndo haciendo una especie de tutorial en html que contiene una imagen y esta tiene distintas secciones a su vez mediante coordenadas, que al pulsar sobre ellas remiten a otros html. La cuestión es que me gustaría que al picar sobre las diferentes secciones se abriera una ventana sin necesidad de mas html, pero no doy con ello.
Un saludo
Hola
ResponderEliminarSupongo que lo haces con USEMAP, pero si quieres hacer algo más, creo que tendrás que programar más. Por si te refieres a no usar en concreto HTML, echa un vistazo a esto que está hecho sólo con CSS a ver si te sirve.
Hola Oloman, me parece excelente este truco, pero tengo una duda como hago para colocar un codigo html de un video por ejemplo , osea quiero que en lugar del texto o foto que tienes como ejemplo aparezca el codigo html tal cual y no el video, se puede?
ResponderEliminarsaludos
Hola Edgar.
ResponderEliminarSólo tienes que sustituir la parte "Aquí va un texto, una imagen, un enlace, un vídeo..." por el código HTML del vídeo.
Hola Oloman pues ya lo hice pero me sale el video, yo quiero que salga el codigo html tal cual, se puede?
ResponderEliminarsaludos
¡Ah! Es que pensaba que querías mostrar el vídeo. Si lo que quieres es mostrar el código para que la gente lo copie, pásalo primero por aquí y luego lo pegas dónde te dije:
ResponderEliminarhttp://nosetup.org/php_on_line/convertir_html_texto
muchas gracias Oloman era precisamente eso que quería.
ResponderEliminarsaludos y adelante con este excelente blog
no entendi
ResponderEliminarNo hay mucho que enteder. Sólo prueba los dos primeros botones/enlaces para ver en qué consiste el truco y luego, si te gusta, copia el código que se ofrece y pégalo. Posteriormente podrás cambiarlo a tu antojo releyendo el post.
ResponderEliminarMe encanta tu blog pero me estoy volviendo loca, como inserto un video de youtube para que salga en la ventana emergente? Muchas Gracias
ResponderEliminarMiriam, en el código que transcribo en la entrada, hay que cambiar
ResponderEliminarAquí va un texto, una imagen, un enlace, un vídeo...
por el código que te ofrece YouTube, ese que lleva un iframe.
Gracias por la respuesta pero sigo teniendo problemas jeje Definitivamente soy una inutil. Creo que he intentado con todos los códigos que me da youtube, ahora he puesto de nuevo la que me has indicado en la respueta pero al dar a guardar la plantilla me dice exactamente esto:
ResponderEliminarNo se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Attribute name "allowfullscreen" associated with an element type "iframe" must be followed by the ' = ' character.
Muchas Gracias de nuevo y a ver si lo consigo por fin!mua
Miriam, eso que me comentas es que o estás tomando mal el código o lo que creo más posible y que te explico ahora.
ResponderEliminarCuando insertas código en la plantilla (en gadgets o entradas no hay problema), Blogger es muy puñetero y no entiende los códigos normales. De esta manera, tienes que sustituir las comillas simples (') por dobles ("), las dobles (") por " y los & por &
Prueba con eso.