Revista Tecnología

Calendarios con estilo para tu blog

Publicado el 27 febrero 2014 por Johnr @REDEANDOblog
Calendarios con estilo para tu blog
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.
ver codigo<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(http://4.bp.blogspot.com/-RpD7jlChXYc/Uw9uvfWQclI/AAAAAAAAL24/JNEviXgNtPc/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>

ver codigo<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(http://4.bp.blogspot.com/-RpD7jlChXYc/Uw9uvfWQclI/AAAAAAAAL24/JNEviXgNtPc/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>

ver codigo<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(http://4.bp.blogspot.com/-RpD7jlChXYc/Uw9uvfWQclI/AAAAAAAAL24/JNEviXgNtPc/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>

ñ ñ ñ

Volver a la Portada de Logo Paperblog