Data das postagens personalizada

Oii >.<

Nesse post vou ensinar a personalizar a data das postagens. Assim:

Eu vou dar o código mais básico igual aqui do blog,mas você pode personalizar de diversas maneiras!

                                                          

   Vá em Design  Editar HTML  Expandir modelos de widget

 Pesquise:

Posts

Logo abaixo cole:

.main-inner h2.date-header {

  background-color: #B265FF;

  color: #000;

  padding: 4px;

  margin-left: -85px;

  float: left;

 margin-top:4px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius: 5px;

-transition-duration: 1.20s;

-webkit-transition-duration: 1.20s;

-moz-transition-duration: 1.20s;

}

.main-inner h2.date-header:hover {

background-color: #EEB1FF;

-moz-border-radius:0px;

-webkit-border-radius:0px;

border-radius:0px;

padding: 4px;

-transition-duration: 1.20s;

-webkit-transition-duration: 1.20s;

-moz-transition-duration: 1.20s;

}

Explicando o código:

.main-inner h2.date-header {

Cor de fundo da data

  background-color: #B265FF;

Cor da fonte

  color: #000;

  padding: 4px;

Posição - Mude o valor para ajustar no seu layout,se necessário.

  margin-left: -85px;

Mude para right se quiser a data na direita.

  float: left;

Mude o valor se quiser que a data suba ou desça.

 margin-top:4px;

Bordas arredondadas

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius: 5px;

Tempo de transição do efeito Hover

-transition-duration: 1.20s;

-webkit-transition-duration: 1.20s;

-moz-transition-duration: 1.20s;

}

Hover

.main-inner h2.date-header:hover {

Cor de fundo da data com o mouse em cima

background-color: #EEB1FF;

Bordas arredondadas

-moz-border-radius:0px;

-webkit-border-radius:0px;

border-radius:0px;

padding: 4px;

Tempo de transição do efeito Hover

-transition-duration: 1.20s;

-webkit-transition-duration: 1.20s;

-moz-transition-duration: 1.20s;

}