Modelos de Data

Por || Tags: , ||

Olá pessoal antes da postagem de hoje eu queria que dona do blog Totalmente Pniners entrasse em contato comigo, pois já terminei o layout que ela encomendou. Se ela não quiser mais o layout eu coloca-lo como layout free.
Agora vamos ao post de hoje:

Trouxe aqui pra vocês alguns modelos de data para vocês colocarem no blog de vocês.
No painel do seu blog>> Vá em Modelo>>Editar HTML>> Clique na caixa de códigos e aperte Ctrl+F e procure por:

.main-inner h2.date-header {

Você vai encontrar mais ou menos assim:

    .main-inner h2.date-header {
    font: $(date.font);
    color: $(date.text.color);
    }

Quando achar apague tudo e coloca no lugar o código do modelo de data que você escolheu:
Se quiser esse modelo:
Cole o código:

    .main-inner h2.date-header {
    -webkit-transition-duration: .50s;
    float: left;
    width:57px;
    height:57px;
    overflow:hidden;
    font-size:13px;
    color: #fff !important;
    text-align:center;
    margin-bottom: -75px;
    margin-left: -70px;
    padding: 8px 2px 0px 2px;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
    background: #CCD4DA; }
    .main-inner h2.date-header:hover {
    -webkit-transition-duration: .50s;
    background: #BEC8CF; }


Se quiser esse modelo:
Cole o código:

.main-inner h2.date-header {text-align: center;background:#000;color: #fff;border-radius: 10px 10px 10px 10px; }


Se quiser esse modelo:
Cole o código:
.main-inner h2.date-header {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;text-align: center;background: #FFF;margin: 10px -1px -15px -110px;color:#D2D56C;Border: 2px solid #D2D56C;width: 15%;float: left;}

Se quiser esse modelo:
Cole o código:
.main-inner h2.date-header {
width:94px;
height:18px;
margin-left:-118px;
float: left;
text-align: center;
font-size: 11px;
padding: 10px;
background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/01-9.png) no-repeat center;
color: #ffffff;
text-shadow:0 1px #ccc;
margin-top: 20px;
-webkit-transition-duration: .30s;
}
.main-inner h2.date-header:hover {
color: #ba930c;
background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/02-10.png) no-repeat center;
-webkit-transition-duration: .30s;
}

Se quiser esse modelo:
Cole o código:
.main-inner h2.date-header {
 font: Tahoma;
    color: #fff;
    text-shadow:0 1px #a4cce6;
    margin-left: -85px;
    background: #89c0e2;
    float: left;
    font-size: 12px;
    padding-bottom: 20px;
padding-top: 20px;
padding-left: 3px;
padding-right: 3px;
-webkit-border-radius: 100px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 100px;
-moz-border-radius-bottomright: 0;
border-radius: 100px;
border-bottom-right-radius: 0;
box-shadow: inset 0 0 30px #67869a, 0 0 2px #7596ab;
-webkit-transition-duration: .50s;
    }
    .main-inner h2.date-header:hover {
    background: #f86c6c;
box-shadow: inset 0 0 30px #ab4b4b, 0 0 2px #ab4b4b;
 text-shadow:0 0px #a4cce6;
-webkit-border-radius: 100px;
-webkit-border-bottom-right-radius: 100;
-moz-border-radius: 100px;
-moz-border-radius-bottomright: 100;
border-radius: 100px;
border-bottom-right-radius: 100;
-webkit-transition-duration: .50s;
    }
Aconselho a vocês que mudem somente o que está em negrito.
Espero que tenham gostado e comentem!
Créditos: Space Tutorials e Kawaii World