Como ya estamos en la epoca navideña y muchos bloggeros desean decorar su blog para esta temporada hoy les traigo un bonito gadget que muestra un arbol navideño que muestra los dias que faltan para la Navidad.

 


Para agregar este gadget sigue los siguiente pasos:

  1. Si usas la interfaz antigua entra en Diseño | Elementos de la página | Añadir gadget |   HTML/Javascript.
  2. Si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript.  

 1. Primer Gadget es el que aparece donde tu quieras instalar el codigo :

 <center><br />
<div style="border: 0px solid rgb(0, 102, 51); color: #006633; font-size: 80%; left: 0px; padding: 7px; z-index: 888;"><a href="http://www.gadgetsblogger.com/2011/11/arbol-de-navidad-que-muestra-los-dias.html"><br />
<img src="http://www.miltrucosblogger.com/wp-content/uploads/2011/12/navidad.gif" style="clear: both; display: block;" /></a><br />
<script type="text/javascript">
//<![CDATA[
var today=new Date()
var theoccasion=new Date(today.getFullYear(), 12, 25)
var beforeOccasionText="hasta la Navidad"
var onOccasiontext="Hoy es Navidad. Felices Fiestas!"

var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")"
var one_day=1000*60*60*24
var calculatediff=""

calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}

var pluraldayornot=(calculatediff==1)? "día" : "días"
if (calculatediff>0)
document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+"!</b>")
else if (calculatediff==0)
document.write("<b>"+onOccasiontext+"!</b>")
//]]>
</script></div></center>

2. Ahora si quieres que el gadget se vea en la parte inferior de tu blog pega el siguiente codigo:

 <center><br />
<div style="display:scroll;position:fixed;bottom:0px;left:0px;color:#006633;font-size:80%;border: 0px solid #006633;padding:7px;z-index:888"><a href="http://www.gadgetsblogger.com/2011/11/arbol-de-navidad-que-muestra-los-dias.html"><br />
<img src="http://www.miltrucosblogger.com/wp-content/uploads/2011/12/navidad.gif" style="display: block;clear: both;"/></a><br />
<script type="text/javascript">
//<![CDATA[
var today=new Date()
var theoccasion=new Date(today.getFullYear(), 12, 25)
var beforeOccasionText="hasta la Navidad"
var onOccasiontext="Hoy es Navidad. Felices Fiestas!"

var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec")
theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format
var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")"
var one_day=1000*60*60*24
var calculatediff=""

calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day))
if (calculatediff<0){
var nextyeartoday=new Date()
nextyeartoday.setFullYear(today.getFullYear()+1)
calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff)
}

var pluraldayornot=(calculatediff==1)? "día" : "días"
if (calculatediff>0)
document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+"!</b>")
else if (calculatediff==0)
document.write("<b>"+onOccasiontext+"!</b>")
//]]>
</script></div></center>

Espero que os guste este precioso gadget y que sigan visitando Mil Trucos Blogger.

Via/Gadgets Blogger


4 commentarios

Anonymous · diciembre 4, 2011 a las 7:15 pm

Excelente post Juvinao,pronto lo pondre en mi blog

Juvinao · diciembre 4, 2011 a las 7:20 pm

Anónimo gracias por comentar 😛

Merlina · diciembre 6, 2011 a las 3:05 am

Muchas gracias!!! bastante sencillo pero lo suficientemente lindo para ke impregne el blog con el espíritu navideño. Ya está añadido en el mío y se ve genial ;).

Saludos =)

Juvinao · diciembre 6, 2011 a las 3:53 pm

Merlina si es simple pero muy lindo,gracias por comentar 😀

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *