Feliz Navidad 2011

El Mejor Regalo de Navidad es una sonrisa.. X eso Aqui esta la Mia !!!

Feliz Navidad para todos nuestros Fans, Amigos, Clientes y todos los seres que aman.

Abrir una ventana al cargar el blog

Dic 22, 2011   //   by Diseño Web Roger Soto   //   Programacion  //  3 Comments

Al parecer a muchos les a gustado ver como se abre una ventana al cargar el blog de Diseño Web Roger Soto, que estoy usando para el saludo navideño, pero que muchos usan para mostrar publicidad, mostrar un video, o una animacion flash.

Bueno para Abrir una ventana al cargar el blog, solo sigan los siguientes pasos que no es muy dificil. Primero el pseudo codigo:

al cargar el blog, mostrar div oculto
al hacer click en cualquier parte del div ocultarlo
hacer esto solo una vez al dia (ya que es molesto ver el mismo mensaje a cada rato)

Para lograr eso nos apoyamos en jquery, que casi todos los CMS como wordpress, drupal, joomla, etc cargan por defecto y tambien vamos a usar por comodidad el jquery-cookie, que nos permite gestionar las cookies, lo pueden bajar desde aqui https://github.com/carhartl/jquery-cookie y listo!!

primero suban el jquery-cookie a su servidor y lo referencian como cualquier archivo js.

esto va antes de cerrar la etiqueta </head> si usan wordpress esta etiqueta esta en el archivo header.php

<script type="text/javascript" src="/path/to/jquery.cookie.js"></script>

<script type="text/javascript">
$.cookie('mostrar');
 if($.cookie('mostrar')==1){
   }else{
     $(document).ready(function(){
         $("#xmas").show("slow");
         $("#xmas").click(function(){$("#xmas").hide("slow")});
         $.cookie('mostrar', '1', { expires: 1 });
       });
  };
</script>

No olviden cerciorarse que el jquery este cargado.

y luego debajo de la etiqueta <body> ingresan este codigo :

 <style>
   #xmas{
    position:fixed;
    width:560px;
    height:430px;
    top:100px;
    left:50%;
    margin-left:-250px;
    overflow:hidden;
    display:none;
   }
 </style>
 
 <div id="xmas">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/-Hele-9851A" frameborder="0" allowfullscreen></iframe>
<br>
cerrar
 </div>

y listo con eso queda

3 Comentarios

  • Me ha interesado mucho este post y lo he probado sin mucho éxito. En http://www.cocinasana.org colocado una ventana modal con Shadowbox, pero estoy tratando de incorparar una expiración por día. He hecho la prueba en http://www.cocinasana.org/curriculum.html. Siguiendo las instrucciones he colocado antes de :

    Después he seguido textualmente las indicaciones del post, pero la ventana no salta.

    ¿Alguna ayuda o pista?

    Gracias Roger Soto, tiene vd un blog muy instructivo.

  • Adrian, he probado el codigo y funciona perfectamente, igual lo probe con el codigo fuente de tu blog y funciono, te envie unos archivos con la ventana operativa, espero te hayan servido.

    gracias por leer mi blog y hacerte fan en el facebook https://www.facebook.com/disenowebrogersoto

  • Thanks for your write-up on this blog. From my own experience, occasionally softening upward a photograph could provide the digital photographer with a bit of an creative flare. Many times however, that soft blur isn’t what precisely you had under consideration and can sometimes spoil a normally good snapshot, especially if you consider enlarging them.

Que opinas de esto?