21/06/12

Datas para posts personalizadas

Novo layout, o que acharam do tema "Verão" ? 


Oi leitores, hoje vim trazer uma datas personalizadas que eu fiz, se usarem creditem ! As cores são personalizáveis.




Para meteres o estilo que gostares, procura por .main-inner h2.date-header {
A seguir, acharás algo assim :

.main-inner h2.date-header {

  font: $(date.font);
  color: $(date.text.color);
}

Apaga esse código e substitui pela data que mais gostares :)



1 - Data simples ( só muda a cor do fundo quando passa o mouse )

.main-inner h2.date-header { 
/* Data personalizada by Cat Girl */ 
font: arial; /* Fonte da Data */ 
color: #FFFAFA; /* Cor da Fonte */ 
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #00BFFF; /* Fundo da data */ 
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */ 
padding: 4px; 
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.main-inner h2.date-header:hover { 
background: #C1CDCD; /* Fundo quando o passa o mouse */ 
/* Fim da data personalizada by Cat Girl, não retire créditos */
}

2 - Data "folhinha"


.main-inner h2.date-header { 
/* Data personalizada by Cat Girl */ 
font: arial; /* Fonte da Data */ 
color: #000000; /* Cor da Fonte */ 
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #FFFFFF; /* Fundo da data */ 
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */ 
padding: 4px; 
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.main-inner h2.date-header:hover { 
background: #FFC0CB; /* Fundo quando o passa o mouse */ 
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
/* Fim da data personalizada by Cat Girl, não retire créditos */
}

3 - Data redondinha


.main-inner h2.date-header { 
/* Data personalizada by Cat Girl */ 
font: arial; /* Fonte da Data */ 
color: #00BFFF; /* Cor da Fonte */ 
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #FFFFFF; /* Fundo da data */ 
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */ 
padding: 4px; 
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomleft: 100px;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.main-inner h2.date-header:hover { 
background: #000000; /* Fundo quando o passa o mouse */ 
-webkit-border-top-right-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topright: 100px;
-moz-border-radius-bottomright: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
/* Fim da data personalizada by Cat Girl, não retire créditos */
}

Personaliza as cores com *esta* tabela
Beijinhos, usem e abusem das minhas datas !

7 comentários:

  1. adorei o teu layout e o tutorial é útil vou usar


    http://poesia-de-uma-vida.blogspot.pt/

    aceitas afiliação?

    ResponderEliminar
  2. adorei o layout gata!

    senhoritasimperfeitas.blogspot.com

    ResponderEliminar
  3. Caramba eu amei o lay!
    encantosdeumaadolescente.blogspot.com

    ResponderEliminar
  4. Esta lindo, só que é muito irônico o nome do tema ser "Verão" se estamos no inverno, enfim, beijos.
    http://fasesdegarota.blogspot.com.br

    ResponderEliminar
    Respostas
    1. aah,amor mas se vc não sabe no pais dela e "verão" sim,ok?

      Eliminar
  5. Tá lindo *w* !
    Adorablecliche.blogspot.com

    ResponderEliminar

-Não coloques o link do teu blog para ele não ser excluído. Retribuo mesmo que deixes só "Cat Girl".

-Comentários do género "Seguindo, segue de volta", "Adoro seu blog", "Novo concurso..." não serão respondidos.

-Fala alguma coisa sobre o post, senão não retribuo.

-Aceito críticas construtivas, nada de palavrões ou coisas do género.

Beatriz


Layout by Beatriz D. ~ Cat Girl | Proibido cópias