Esta vez con unos retoques en el código CSS para mostrar de otra forma.
Voy a mostrar 3 ejemplos, abrir vídeo de YouTube, abrir una página web y abrir una caja con barra scrollbar.
La forma es la misma para todos los ejemplos y podemos utilizarla para abrir otro tipo de cosas, como imágenes, archivo flash, la caja de comentarios o lo que nos de la imaginación.
Primero agregamos el código JavaScript.
Ir a Diseño, Edición de HTML y justo arriba de </head>
Poner el siguiente código:
<script type="text/javascript">
//<![CDATA[
function mostrarventanavku() {
div = document.getElementById('ventanavku');
div.style.display = '';
}
function cerrarventanavku() {
div = document.getElementById('ventanavku');
div.style.display='none';
}
//]]>
</script>
Ahora agregamos el código CSS.
Justo arriba de ]]></b:skin>
Poner el siguiente código: (personalizarlo a su gusto)
/* CSS de la ventana no cambiar*/
#ventanavku {
position:fixed;
top: 50%;
left: 50%;
margin: -200px 0 0 -250px;
border: 1px solid #ccc;
z-index:99999
}
/* CSS del titulo - personalizar a gusto*/
.tituloventanavku {
border: 1px solid #ccc;
display: block;
background: #ccc;
color:red;
padding:2px 5px;
}
Ahora buscamos <body> y abajo ponemos lo que vamos a mostrar:
<div id="ventanavku" style="display:none;"><span class="tituloventanavku" >ACÁ VA EL TITULO
<a href="javascript:cerrarventanavku();"><img border="0" style="right:5px;position:absolute;top:3px" src="URL DE IMAGEN DE BOTÓN DE CERRAR" title="Cerrar" /></a></span>
ACÁ VA EL CÓDIGO DEL VÍDEO O IFRAME O SCROLL
</div>
Para abrir la ventana hay que poner un link de la siguiente forma:
<a href="#" onclick="mostrarventanavku();return false">TEXTO O IMAGEN</a>
Donde dice: ACÁ VA EL TITULO se puede personalizar desde el código CSS en:
/* CSS del titulo */
.tituloventanavku {
border: 1px solid #ccc;
display: block;
background: #ccc;
color:red;
padding:2px 5px;
}
Cambiar la URL DE IMAGEN DE BOTÓN DE CERRAR.
Si queremos mostrar un vídeo el código es el que nos da YouTube.
Algo así:
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/boDvXJLau1A?fs=1&hl=es_ES&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/boDvXJLau1A?fs=1&hl=es_ES&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
Una página web se tiene que mostrar por medio de un iframe.
Algo así:
<iframe allowtransparency="true" src="http://www.google.com.uy/" width="550" height="400" frameborder="0" scrolling="auto">
</iframe>
Pueden utilizar ese código cambiando el link de la página, ancho y alto.
Una barra de scrollbar.
<div style='border: 1px solid rgb(204, 204, 204); padding: 0px; overflow: auto; width: 500px; height: 200px;background: #fff;'>
Lorem Ipsum, Lorem Ipsum
Lorem Ipsum, Lorem Ipsum
Lorem Ipsum, Lorem Ipsum
</div>
Dentro del scroll se puede mostrar varias cosas como texto, imágenes, un marquee, etc...
Ver ejemplo con vídeo:
Leer Importante...
Enlaza el blog ...
Ultimos comentarios
:8) hola Llegue hazta donde tengo que buscar la etiqueta body, lo que sucede es que quiero hacer lo del video, para que se muestre en las entradas a escribir. me explico.
Para postear Videos en mi blog, antes usaba el codigo para ventanas emergentes. pero los navegadores menos internet explorer las bloquean y lo que e estado buscando es: Poner una imagen icono png de Play (para iniciar el video) donde salga una ventana emergente o algo paresido a lo que isiste. Gracias de antemano.
Alfredo, antes que nada tienes una linea de código agregada de mas en tu plantilla. borra esto: } --> esta después de <body class="loading">
Segundo: el código JavaScript de esta ventana lo pusiste por debajo y va arriba de </head>
Lo de mostrar en una entrada no lo recomiendo ya que trabaja con una ID, y una ID no se puede repetir.
Te recomiendo que para una entrada utilices alguna ventana modal.
Tu tienes Jquery en tu blog, tendrás que poner algo compatible.
Ok, bueno lo de lso codigos Jquery buscare algo en el blog de jmiur
a y no encontre la linea de codigo que me dijiste } --> amplie artilugios y los busque con el buscador interno de chrome ese que revisa el texto escrito en la pagina y nada. bueno muchas gracias Vku te pasaste Super rapido la respuesta y ademas con buenisima dispocision, saludos desde Chile Gracias
Alfredo en unos minutos subo una nueva entrada para lo que vos quieres hacer
Ok, de aqui somos.
hola espero estes de maravilla, la verdad tus pos me an servido a la perfeccion y antes que nada te digo que tienes una pagina exelente.
bueno yo tengo un peñisimo problemita... :6) ya puse la ventana emergente con el video y salio muy bien(puedes checarlo http://arboldeespejos.blogspot.com/)pero quiero poner otra ventana para un reproductor flash de mp3, la cuestion es cuando pego nuevamente el codigo los dos gadget me abren el video o no me abren nada... :10) ¿sabes que puedo hacer?
La verdad no lo vi, pero el problema es que las ID son unicas y no se debe repetir, puedes cambiar el nombre de las id para que no se repitan o mejor aun cambia por la proxima entrada, creo que es eso lo que necesitas.
http://loseasi.blogspot.com/2010/08/mostrar-ventana-otra-forma-2.html
Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.
Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.
Nota: solo los miembros de este blog pueden publicar comentarios.