♡ Tutorial : Modelos Para Agenda ♡

 The Moon Reverse (créditos)

Texto.: '' O que escrever? O que falar? O que dizer? O que verdadeiramente eu devo seguir? Por que todos querem ser iguais e basta eu ser diferente. Não querer ter as mesmas coisas , porém , deseja-lás. O caminho de cada um é pior o que cada um pensa. Ao invez de você toda hora querer se achar melhor do que alguém , procure a ser melhor do que si mesmo. Se não for , quando chegar lá na frente será derrubado , então cuidado , ninguém é igual e ser diferente é bem mais sensacional , do que ser igual a todo mundo. Você é livre. Você sane que pode. Então tente. ''

Eu quero acabar logo com esses tutoriais , mais sei lá , eu ainda quero mais e trazer mais goodies e muito mais , só quero que sei lá , peçam alguma coisa por que fica chato. Eu postando , e postando , sei lá peçam Ilustrações , ou avatares , ou alguma coisa ,  que estiver ao meu alcance irei postar. Então eu postarei alguns tutoriais até semana que vem , dependo da frequencia que eu estiver aqui eu irei ajudar. Bom alguns modelos de agendinha seria bom.

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>