16/05/2013

TUTORIAL-modelos para data!

Boa tarde!
Como estão? Eu estou ótimo, o blog de Extras está fazendo bastante sucesso para um blog criado há poucos dias,tudo está indo bem na minha vida!!!!
Ainda por cima estou criando o layout de 1 ano do blog (quem visita o blog de extras sabe) e nesse layout já vou mudar a url,porque vai ficar mais fácil pra mim(os entendedores entenderão)
A Raquel, postadora do blog,já viu alguns dos testes pro novo design,não sei o que ela achou,mais vale lembrar que é apenas um TESTE!
Mudando de assunto,para o post de hoje trouxe alguns modelos para data,porque acho super eficientes na hora que estamos criando layouts e não conseguimos achar um estilo legal para a data!



Para usar é muito simples: Procure por .main-inner h2.date-header { e apague até a chave de fechamento, representada por }. Se você não encontrou o código, realmente não sei o que fazer, pois ele se encontra em todos os templates feitos no modelo travel. Depois de apagar, cole no lugar o código referente ao modelo de data que deseja e, se precisar, configure conforme achar melhor. Talvez você precise mudar algumas coisas como a localização da data, vai variar do tamanho da área de postagem de cada um e não é difícil. 

.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;
}




.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;
    }

Gostaram?CRÉDITOS: Yume Sekai

6 comentários:

  1. Ótimo tutorial, estava precisando, vou usar o primeiro no meu próximo Design >.<
    href="http://carol-backtoblack.blogspot.com.br/">Back To Black

    ResponderExcluir
    Respostas
    1. O primeiro é mesmo lindooooouuu,eu uso no blog de extras,é muito diwo!

      Excluir
  2. Gostei principalmente da data redondinha (a ultima),é bem melhor personalizar do que deixar normal >w<,vou guardar esse tutorial,porque vou precisar *^^*

    ResponderExcluir
  3. Eu estou bem,obrigada >.< kkk
    Eu gosto de blogs que tem esses modelos. Eles de alguma forma fazem seu blog se diferenciar dos outros.
    Adorei o penúltimo..se fosse vermelho no lugar de azul ficaria perfeito! Mas azul ou vermelho,o que importa é que está aí kkk

    ResponderExcluir