Ahora mostrar la fecha en tu blog puede, ademas de ser practico, ser un elemento mas de decoracion del sitio. Para tal motivo, me he estrujado un poquito las neuronas y me ha salido este widget tan 'cool' que muestra el numero y el nombre del dia a la perfeccion. Con un diseño elegante, con forma de icono y fondos combinando degradados y 'glossy', he utilizado Javascript para lo tecnico y CSS3 para lo visual. Esta disponible en 3 tonos: azul, negro y rojo, elige el que mas te guste y copia su codigo correspondiente para ponertelo en tu blog o web.
<style>
/* Calendario diseñado por (design by):
Johnny Vega - REDEANDO Blog
http://redeando.blogspot.com */
.cajacalendario {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.widget { text-align: center;}
.widget-calendario {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#nombredia {
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
font-family: 'Francois One', sans-serif;
text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;
border-radius: 35px 35px 0 0;
color: #f9f9f9 !important;text-decoration:none !important;
font-size: 30px;letter-spacing:0px;font-weight:bold;
line-height: 35px;height: 40px;
position: relative;
text-transform: lowercase;
}
#dia {
border-radius: 0 0 35px 35px;border:0px solid #565656;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;
color: #0C74B6;font-family: 'Francois One', sans-serif;
font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;
height:150px;
line-height: 120px;}
</style>
<div class="cajacalendario"><div class="widget"><div class="widget-calendario"><a style="text-decoration:none !important;" href="http://redeando.blogspot.com" target="_blank"><div id="nombredia"></div></a><div id="dia"></div></div></div></div>
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
<script>
(function() {
var date = new Date(),
weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
document.getElementById('nombredia').innerHTML = weekday[date.getDay()];
document.getElementById('dia').innerHTML = date.getDate();
}) ();
</script>
/* Calendario diseñado por (design by):
Johnny Vega - REDEANDO Blog
http://redeando.blogspot.com */
.cajacalendario {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.widget { text-align: center;}
.widget-calendario {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#nombredia {
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
font-family: 'Francois One', sans-serif;
text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;
border-radius: 35px 35px 0 0;
color: #f9f9f9 !important;text-decoration:none !important;
font-size: 30px;letter-spacing:0px;font-weight:bold;
line-height: 35px;height: 40px;
position: relative;
text-transform: lowercase;
}
#dia {
border-radius: 0 0 35px 35px;border:0px solid #565656;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;
color: #0C74B6;font-family: 'Francois One', sans-serif;
font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;
height:150px;
line-height: 120px;}
</style>
<div class="cajacalendario"><div class="widget"><div class="widget-calendario"><a style="text-decoration:none !important;" href="http://redeando.blogspot.com" target="_blank"><div id="nombredia"></div></a><div id="dia"></div></div></div></div>
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
<script>
(function() {
var date = new Date(),
weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
document.getElementById('nombredia').innerHTML = weekday[date.getDay()];
document.getElementById('dia').innerHTML = date.getDate();
}) ();
</script>
<style>
/* Calendario diseñado por (design by):
Johnny Vega - REDEANDO Blog
http://redeando.blogspot.com */
.cajacalendario2 {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.widget2 { text-align: center;}
.widget-calendario2 {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#nombredia2 {
background: #4c4c4c;
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313));
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
font-family: 'Francois One', sans-serif;
text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;
border-radius: 35px 35px 0 0;
color: #f9f9f9 !important;text-decoration:none !important;
font-size: 30px;letter-spacing:0px;font-weight:bold;
line-height: 35px;height: 40px;
position: relative;
text-transform: lowercase;
}
#dia2 {
border-radius: 0 0 35px 35px;border:0px solid #565656;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;
color: #565656;font-family: 'Francois One', sans-serif;
font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;
height:150px;
line-height: 120px;}
</style>
<div class="cajacalendario2"><div class="widget2"><div class="widget-calendario2"><a style="text-decoration:none !important;" href="http://redeando.blogspot.com" target="_blank"><div id="nombredia2"></div></a><div id="dia2"></div></div></div></div>
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
<script>
(function() {
var date = new Date(),
weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
document.getElementById('nombredia2').innerHTML = weekday[date.getDay()];
document.getElementById('dia2').innerHTML = date.getDate();
}) ();
</script>
/* Calendario diseñado por (design by):
Johnny Vega - REDEANDO Blog
http://redeando.blogspot.com */
.cajacalendario2 {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.widget2 { text-align: center;}
.widget-calendario2 {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#nombredia2 {
background: #4c4c4c;
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313));
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
font-family: 'Francois One', sans-serif;
text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;
border-radius: 35px 35px 0 0;
color: #f9f9f9 !important;text-decoration:none !important;
font-size: 30px;letter-spacing:0px;font-weight:bold;
line-height: 35px;height: 40px;
position: relative;
text-transform: lowercase;
}
#dia2 {
border-radius: 0 0 35px 35px;border:0px solid #565656;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;
color: #565656;font-family: 'Francois One', sans-serif;
font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;
height:150px;
line-height: 120px;}
</style>
<div class="cajacalendario2"><div class="widget2"><div class="widget-calendario2"><a style="text-decoration:none !important;" href="http://redeando.blogspot.com" target="_blank"><div id="nombredia2"></div></a><div id="dia2"></div></div></div></div>
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
<script>
(function() {
var date = new Date(),
weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
document.getElementById('nombredia2').innerHTML = weekday[date.getDay()];
document.getElementById('dia2').innerHTML = date.getDate();
}) ();
</script>
<style>
/* Calendario diseñado por (design by):
Johnny Vega - REDEANDO Blog
http://redeando.blogspot.com */
.cajacalendario3 {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.widget3 { text-align: center;}
.widget-calendario3 {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#nombredia3 {
background: #efc5ca;
background: -moz-linear-gradient(top, #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efc5ca), color-stop(50%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99));
background: -webkit-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
background: -o-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
background: -ms-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
background: linear-gradient(to bottom, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=0 );
font-family: 'Francois One', sans-serif;
text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;
border-radius: 35px 35px 0 0;
color: #f9f9f9 !important;text-decoration:none !important;
font-size: 30px;letter-spacing:0px;font-weight:bold;
line-height: 35px;height: 40px;
position: relative;
text-transform: lowercase;
}
#dia3 {
border-radius: 0 0 35px 35px;border:0px solid #565656;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;
color: #BB2939;font-family: 'Francois One', sans-serif;
font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;
height:150px;
line-height: 120px;}
</style>
<div class="cajacalendario3"><div class="widget3"><div class="widget-calendario3"><a style="text-decoration:none !important;" href="http://redeando.blogspot.com" target="_blank"><div id="nombredia3"></div></a><div id="dia3"></div></div></div></div>
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
<script>
(function() {
var date = new Date(),
weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
document.getElementById('nombredia3').innerHTML = weekday[date.getDay()];
document.getElementById('dia3').innerHTML = date.getDate();
}) ();
</script>
/* Calendario diseñado por (design by):
Johnny Vega - REDEANDO Blog
http://redeando.blogspot.com */
.cajacalendario3 {
height: 200px;
position: relative;
margin: 0 auto;
width: 200px;}
.widget3 { text-align: center;}
.widget-calendario3 {
height: 150px;
margin-bottom: 24px;
width: 190px;
}
#nombredia3 {
background: #efc5ca;
background: -moz-linear-gradient(top, #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efc5ca), color-stop(50%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99));
background: -webkit-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
background: -o-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
background: -ms-linear-gradient(top, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
background: linear-gradient(to bottom, #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=0 );
font-family: 'Francois One', sans-serif;
text-shadow: 0 0 9px #ffffff;border-left:4px solid #C1C1C1;border-right:4px solid #C1C1C1;border-top:4px solid #C1C1C1;
border-radius: 35px 35px 0 0;
color: #f9f9f9 !important;text-decoration:none !important;
font-size: 30px;letter-spacing:0px;font-weight:bold;
line-height: 35px;height: 40px;
position: relative;
text-transform: lowercase;
}
#dia3 {
border-radius: 0 0 35px 35px;border:0px solid #565656;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o5RiY4czv6H2GzuAcg8S9mbGq0sGTRRcmCSqig97VdGVSMaWyx9FwFgaSPgRlJweey-NFCsUJbjIj5gj2I4nJ0i9Fi2BYi18LZgA3w6MYjslG0TG6clzDhp3BCC92evE7yzcx7-_YGQ/s1600/fondo+calendario.png) no-repeat center bottom;
color: #BB2939;font-family: 'Francois One', sans-serif;
font-size: 130px;text-shadow: -5px 0 #cdcdcd, 0 1px #000000, 0px 0 #cdcdcd, 0 -1px #000000, -1px 1px 2px #000000;
height:150px;
line-height: 120px;}
</style>
<div class="cajacalendario3"><div class="widget3"><div class="widget-calendario3"><a style="text-decoration:none !important;" href="http://redeando.blogspot.com" target="_blank"><div id="nombredia3"></div></a><div id="dia3"></div></div></div></div>
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
<script>
(function() {
var date = new Date(),
weekday = ["domingo", "lunes", "martes", "miercoles", "jueves", "viernes", "sabado"];
document.getElementById('nombredia3').innerHTML = weekday[date.getDay()];
document.getElementById('dia3').innerHTML = date.getDate();
}) ();
</script>
