Cuenta Regresiva para FECHAS IMPORTANTES

Voy a mostrar dos códigos diferentes que sirven para tener una cuenta regresiva en el blog.

1º Forma de Hacerlo:
Este código Funciona para explorer y Firefox. Para tener nuestra cuenta regresiva solo vamos al menu plantilla, elementos de página, añadir elemento de pagina, HTML/javascript y listo copiamos todo el código ahi, y le ponemos el titulo a nuestra nueva sección:

Este es el código que debemos copiar:

  1. <form name="count">
  2.  
  3. </form>
  4.  
  5.  
  6.  
  7. /*
  8. Count down until any date script-
  9. By JavaScript Kit (www.javascriptkit.com)
  10. Over 200+ free scripts here!
  11. */
  12.  
  13.  
  14. //change the text below to reflect your own,
  15. var before="Mi Cumpleaños!"
  16. var current="Hoy es Mi Cumpleaños!"
  17. var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
  18.  
  19. function countdown(yr,m,d){
  20. theyear=yr;themonth=m;theday=d
  21. var today=new Date()
  22. var todayy=today.getYear()
  23. if (todayy &lt; 1000)
  24. todayy+=1900
  25. var todaym=today.getMonth()
  26. var todayd=today.getDate()
  27. var todayh=today.getHours()
  28. var todaymin=today.getMinutes()
  29. var todaysec=today.getSeconds()
  30. var todaystring=montharray[todaym]+&quot; &quot;+todayd+&quot;, &quot;+todayy+&quot; &quot;+todayh+&quot;:&quot;+todaymin+&quot;:&quot;+todaysec
  31. futurestring=montharray[m-1]+&quot; &quot;+d+&quot;, &quot;+yr
  32. dd=Date.parse(futurestring)-Date.parse(todaystring)
  33. dday=Math.floor(dd/(60*60*1000*24)*1)
  34. dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
  35. dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
  36. dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
  37. if(dday==0&amp;&amp;dhour==0&amp;&amp;dmin==0&amp;&amp;dsec==1){
  38. document.forms.count.count2.value=current
  39. return
  40. }
  41. else
  42. document.forms.count.count2.value=&quot;    &quot;+dday+ &quot; días, &quot;+dhour+&quot; hrs, &quot;+dmin+&quot; min, y &quot;+dsec+&quot; seg &quot;
  43. setTimeout(&quot;countdown(theyear,themonth,theday)&quot;,1000)
  44. }
  45. //enter the count down date using the format year/month/day
  46. countdown(2007,06,20)

Ahora en la penúltima línea del código, cambiamos la fecha countdown(2007,06,20), a la que cada uno necesite.

Yo realicé algunas modificaciones al código, ya que el mensaje que desplegaba estaba en ingles y era muy largo, pero si alguien lo necesita así, aquí se los dejo:

  1. <form name="count">
  2.  
  3. </form>
  4.  
  5.  
  6.  
  7.  
  8. /*
  9. Count down until any date script-
  10. By JavaScript Kit (www.javascriptkit.com)
  11. Over 200+ free scripts here!
  12. */
  13.  
  14.  
  15. //change the text below to reflect your own,
  16. var before="Christmas!"
  17. var current="Today is Christmas. Merry Christmas!"
  18. var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
  19.  
  20. function countdown(yr,m,d){
  21. theyear=yr;themonth=m;theday=d
  22. var today=new Date()
  23. var todayy=today.getYear()
  24. if (todayy &lt; 1000)
  25. todayy+=1900
  26. var todaym=today.getMonth()
  27. var todayd=today.getDate()
  28. var todayh=today.getHours()
  29. var todaymin=today.getMinutes()
  30. var todaysec=today.getSeconds()
  31. var todaystring=montharray[todaym]+&quot; &quot;+todayd+&quot;, &quot;+todayy+&quot; &quot;+todayh+&quot;:&quot;+todaymin+&quot;:&quot;+todaysec
  32. futurestring=montharray[m-1]+&quot; &quot;+d+&quot;, &quot;+yr
  33. dd=Date.parse(futurestring)-Date.parse(todaystring)
  34. dday=Math.floor(dd/(60*60*1000*24)*1)
  35. dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
  36. dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
  37. dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
  38. if(dday==0&amp;&amp;dhour==0&amp;&amp;dmin==0&amp;&amp;dsec==1){
  39. document.forms.count.count2.value=current
  40. return
  41. }
  42. else
  43. document.forms.count.count2.value=&quot;Only &quot;+dday+ &quot; days, &quot;+dhour+&quot; hours, &quot;+dmin+&quot; minutes, and &quot;+dsec+&quot; seconds left until &quot;+before
  44. setTimeout(&quot;countdown(theyear,themonth,theday)&quot;,1000)
  45. }
  46. //enter the count down date using the format year/month/day
  47. countdown(2002,12,25)

2º Forma de Hacerlo:
Esta Otra Forma solo funciona en Explorer, y desplega sólo los días.

Este truco para el nuevo blogger, es mas fácil aún, ya que no se debe agregar nada en la plantilla, solo vamos al menu plantilla, elementos de página, añadir elemento de pagina, HTML/javascript y listo copiamos todo el código ahi, y le ponemos el titulo a nuestra nueva sección:

Este es la primera parte del código:

  1. <!-- Mas trucos y scripts en http://www.javascript.com.mx -->
  2.  
  3. <!--
  4. function getRemaining() {
  5.   today = new Date();
  6.   targetdate = new Date("June 20, 2007");
  7.   targetdate.setYear(today.getYear());
  8.   milliseconds = (24 * 60 * 60 * 1000);
  9.   remaining = ((targetdate.getTime() - today.getTime()) / milliseconds);
  10.   remaining = Math.round(remaining);
  11.   }
  12. // -->

La fecha que yo quiero resaltar es Junio dia 20, año 2007. Ustedes simplemente cambian este dato por el de ustedes.

Ahora vamos al lugar en donde quieren que aparesca el aviso, en mi caso lo deje en la columna izquierda parte superior.

Este es la segunda parte del código:

  1. <!--
  2. getRemaining();
  3. document.write("Faltan ",remaining," dias para mi cumpleaños!");
  4. // -->

Nota: La primera y segunda parte del código se copian juntas, una abajo de la otra, de la manera que mencione anteriormente (como elementos de pagina).

El tipo de aviso lo cambian en la línea donde aparece el código document.write, si no estan seguros en donde copiar este código revisen este otro post: Donde Debo Pegar el Código de Algún Accesorio en mi Plantilla (Template)

Artículos Relacionados

  • Agrega un Buscador para tu Blog o pagina Web Para colocar un buscador simple en el blog, que sea solo de búsqueda dentro de nuestro blog, solo deben pegar éste código en la sidebar: [html] [/html] Lo único que deben […]
  • Como dejar archivos para Descarga Directa Varios han preguntado esto, es sumamente facil, solo debe buscar un servicio que les permita subir archivos y entregar la direccion en donde quedan alojados estos, yo utilizo […]
  • Agrega tu CHAT de CBOX Esto es aplicable en cualquier plataforma de Blogs (Blogger, WordPress..) o Página web. Quieres tener este chat??? Primero debemos Ir a la pagina CBOX y crean una cuenta. Rellenamos […]
  • Como Agregar Musica al Blog para Descarga Directa Por mientras les dejo esta página para que tengan una idea. Crea tu RadioBlog...sin PHP despues haré un resumen con toda claridad en todo caso yo ya he puesto un ejemplo a disposicón en […]
  • Crear un Blog Con Secciones Esto es aplicable en cualquier plataforma de blogs (Blogger, WordPress...) o Página web. Si quieren crear un blog con distintas secciones, por ej: Un blog que tenga: Seccion de […]
  • Colocar tu propio reproductor en tu blog y más (EXPLICADO) Esto sirve para la mayoría de las plataformas de blog, por ahora lo he comprobado para 3: Classic-Blogger, Blogger, WordPress. Tener tu propio reproductor en tu blog es muy sencillo y […]
Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

About patriram

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

Leave a Reply

Your email address will not be published. Required fields are marked *