4 Modelos para Agenda/Calendário

Oi, hoje trouxe alguns modelos para agenda, eu acho que são muito úteis e eu amei-os. Se vocês quiserem podem usar para outras coisas, mas nunca deixem de creditar, tudo bem? >3< No total são quatro modelos e gostei bastante deles por serem bem diferentes e fofinhos em meu mero ponto de vista. Bem, e pra já começando a creditar o blog The Moon Reverse . Espero  vocês  na  próxima  postagem, guys.

Modelo número 01 - Cinza com gradiente

 

01. Dê Ctrl+ f e cole o código abaixo em seu html acima da tag ]]></b:skin> 

.tm1{
padding: 3px 5px 3px 5px;
background: #f6f6f6;
background: -moz-linear-gradient(top,  hsla(0,0%,96%,1) 0%, hsla(0,0%,96%,1) 47%, hsla(0,0%,93%,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,96%,1)), color-stop(47%,hsla(0,0%,96%,1)), color-stop(100%,hsla(0,0%,93%,1)));
background: -webkit-linear-gradient(top,  hsla(0,0%,96%,1) 0%,hsla(0,0%,96%,1) 47%,hsla(0,0%,93%,1) 100%);
background: -o-linear-gradient(top,  hsla(0,0%,96%,1) 0%,hsla(0,0%,96%,1) 47%,hsla(0,0%,93%,1) 100%);
background: -ms-linear-gradient(top,  hsla(0,0%,96%,1) 0%,hsla(0,0%,96%,1) 47%,hsla(0,0%,93%,1) 100%);
background: linear-gradient(to bottom,  hsla(0,0%,96%,1) 0%,hsla(0,0%,96%,1) 47%,hsla(0,0%,93%,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ededed',GradientType=0 );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
border: 1px solid #e1e1e1;
box-shadow: inset 1px 1px 0 #fff;
margin-bottom: 2px;
color: #c7c7c7;
font-family: "Trebuchet MS";
font-size: 11px;
letter-spacing: .1em;
text-shadow: 1px 1px #fff;
}

02. Agora vá em Layout e cole o código abaixo em um gadget de Html/Java Script. 

<div class="tm1">00/00 - Texto do seu calendário.</div>
<div class="tm1">00/00 - Texto do seu calendário.</div>
<div class="tm1">00/00 - Texto do seu calendário.</div>

Modelo 02 - Laranja com gradiente

 

01. Dê Ctrl+ f e cole o código abaixo em seu html acima da tag ]]></b:skin> 

.tm2{
padding: 3px 5px 3px 5px;
background: #ffdfd3;
background: -moz-linear-gradient(top,  hsla(16,100%,91%,1) 0%, hsla(18,100%,93%,1) 18%, hsla(17,100%,89%,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(16,100%,91%,1)), color-stop(18%,hsla(18,100%,93%,1)), color-stop(100%,hsla(17,100%,89%,1)));
background: -webkit-linear-gradient(top,  hsla(16,100%,91%,1) 0%,hsla(18,100%,93%,1) 18%,hsla(17,100%,89%,1) 100%);
background: -o-linear-gradient(top,  hsla(16,100%,91%,1) 0%,hsla(18,100%,93%,1) 18%,hsla(17,100%,89%,1) 100%);
background: -ms-linear-gradient(top,  hsla(16,100%,91%,1) 0%,hsla(18,100%,93%,1) 18%,hsla(17,100%,89%,1) 100%);
background: linear-gradient(to bottom,  hsla(16,100%,91%,1) 0%,hsla(18,100%,93%,1) 18%,hsla(17,100%,89%,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdfd3', endColorstr='#ffd6c6',GradientType=0 );
border: 1px solid #ffc0a5;
box-shadow: inset 0 1px 0  #fff2ec;
margin-bottom: 2px;
color: #fff;
font-family: "Trebuchet MS";
font-size: 11px;
letter-spacing: .1em;
text-shadow: 1px 1px #ffc0a5;
}

02. Agora vá em Layout e cole o código abaixo em um gadget de Html/Java Script. 

<div class="tm2">00/00 - Texto do seu calendário.</div>
<div class="tm2">00/00 - Texto do seu calendário.</div>
<div class="tm2">00/00 - Texto do seu calendário.</div>

Modelo 03 - Rosa com gradiente

 

01. Dê Ctrl+ f e cole o código abaixo em seu html acima da tag ]]></b:skin> 

.tm3{
padding: 3px 5px 3px 5px;
background: #ffd8e0;
background: -moz-linear-gradient(top,  hsla(348,100%,93%,1) 31%, hsla(350,100%,95%,1) 57%, hsla(348,100%,94%,1) 58%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,hsla(348,100%,93%,1)), color-stop(57%,hsla(350,100%,95%,1)), color-stop(58%,hsla(348,100%,94%,1)));
background: -webkit-linear-gradient(top,  hsla(348,100%,93%,1) 31%,hsla(350,100%,95%,1) 57%,hsla(348,100%,94%,1) 58%);
background: -o-linear-gradient(top,  hsla(348,100%,93%,1) 31%,hsla(350,100%,95%,1) 57%,hsla(348,100%,94%,1) 58%);
background: -ms-linear-gradient(top,  hsla(348,100%,93%,1) 31%,hsla(350,100%,95%,1) 57%,hsla(348,100%,94%,1) 58%);
background: linear-gradient(to bottom,  hsla(348,100%,93%,1) 31%,hsla(350,100%,95%,1) 57%,hsla(348,100%,94%,1) 58%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd8e0', endColorstr='#ffe0e6',GradientType=0 );
border: 1px solid #ffcad5;
outline: solid 1px #ffeef1;
outline-offset: -2px;
margin-bottom: 2px;
color: #fff;
font-family: "Trebuchet MS";
font-size: 11px;
letter-spacing: .1em;
text-shadow: 1px 1px #ffcad5;
}

02. Agora vá em Layout e cole o código abaixo em um gadget de Html/Java Script. 

<div class="tm3">00/00 - Texto do seu calendário.</div>
<div class="tm3">00/00 - Texto do seu calendário.</div>
<div class="tm3">00/00 - Texto do seu calendário.</div>

Modelo 04 - Simples com hover

 

01. Dê Ctrl+ f e cole o código abaixo em seu html acima da tag ]]></b:skin> 

.tm4{
padding: 3px 5px 3px 5px;
background-color: #f4f4f4;
margin-bottom: 2px;
color: #cdcdcd;
font-family: "Arial";
font-size: 10px;
letter-spacing: .1em;
text-transform: lowercase;
-webkit-transition-duration: .90s;
}
.tm4:hover{
background-color: #676767;
letter-spacing: .2em;
color: #a5a5a5;
-webkit-transition-duration: .90s;
}

02. Agora vá em Layout e cole o código abaixo em um gadget de Html/Java Script. 

<div class="tm4">00/00 - Texto do seu calendário.</div>
<div class="tm4">00/00 - Texto do seu calendário.</div>
<div class="tm4">00/00 - Texto do seu calendário.</div>