Mini calendario para el blog

5 comentaron



En estas transiciones de estacion veraniega, se me ha ocurrido diseñar este pequeño calendario a modo de widget para el que guste de ponerlo en su blog. Utilizando CSS3, una imagen para el fondo y un poquillo de Javascript, me ha salido este mini almanaque con un diseño sencillo a la par que elegante. Se actualiza automaticamente y, si pasais el raton por encima, aumenta ligeramente de tamaño.




Para ponerlo en tu blog o web, tan solo tienes que copiar el siguiente codigo y pegarlo alli donde quieras mostrarlo. Si lo prefieres, tambien telo puedes descargar haciendo clic aqui.

ver codigo
<center><table><tbody><tr><td><div class="app"><div class="app-calendario"><div id="weekday"></div><div id="day"></div><div style="font-size:16px;line-height: 10px;position:relative;left:-50px;bottom:60px;font-weight:bold;font-family: Century Gothic !important;-webkit-transform: rotate(2000deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 transform: rotate(90deg);">
<a href="http://redeando.blogspot.com" target="_blank"><script>
 mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;
if(myday == 0)
day = "  "
else if(myday == 1)
day = "  "
else if(myday == 2)
day = "  "
else if(myday == 3)
day = "  "
else if(myday == 4)
day = "  "
else if(myday == 5)
day = "  "
else if(myday == 6)
day = "  "
if(mymonth == 0)
month = "Enero "
else if(mymonth ==1)
month = "Febrero "
else if(mymonth ==2)
month = "Marzo "
else if(mymonth ==3)
month = "Abril "
else if(mymonth ==4)
month = "Mayo "
else if(mymonth ==5)
month = "Junio "
else if(mymonth ==6)
month = "Julio "
else if(mymonth ==7)
month = "Agosto "
else if(mymonth ==8)
month = "Setiembre "
else if(mymonth ==9)
month = "Octubre "
else if(mymonth ==10)
month = "Noviembre "
else if(mymonth ==11)
month = "Diciembre "

document.write(month+ "<\/font>");
</script></a></div></div></div></td></tr></tbody></table></center>
<script>
(function() {

 var date = new Date(),
 weekday = ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"];

 document.getElementById('weekday').innerHTML = weekday[date.getDay()];
 document.getElementById('day').innerHTML = date.getDate();

}) ();
</script>
<style>
.app { text-align: center; }
.app-calendario a{color:#000000 !important;}
.app-calendario {
 background:url(http://2.bp.blogspot.com/-qhbnx3gaORg/UcY1dKFYxkI/AAAAAAAAKhQ/c-f8NMisUoM/s1600/calendario1.png);
 height: 128px;font-family: Century Gothic;cursor:pointer;
 margin-bottom: 24px;
 width: 128px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

}
.app-calendario:hover {
    transform: scale(1.1) rotate(0deg);
    transition: all 0.5s ease 0s;
}
#weekday{
 border-radius: 35px 35px 0 0;
 color: #f9f9f9;
 font-size: 24px;
 line-height: 26px;
 position: relative;
 text-transform: lowercase;
}
#day {
 border-radius: 0 0 35px 35px;
 color: #15181f;
 font-size: 60px;letter-spacing:1px;
 font-weight: bold;
 line-height: 90px;
 text-shadow: -1px 0 #54B0E3, 0 1px #54B0E3, 1px 0 #54B0E3, 0 -1px #54B0E3, -1px 1px 2px #54B0E3;
}
</style>