teste: Tutorial: Data Personalizada

Oi gente, hoje vamos aprender mais um tutorial para deixar seu blog com a sua cara. Vamos aprender a deixar a data da postagem mais bonitinha, com background e fonte personalizada. Créditos ao blog da nah pelo tutorial.

Antes de tudo vá no Painel do seu blog e clique em "Configurações". Depois clique em "Idioma e Formatação". Agora configure a sua data como na imagem abaixo.

Salve, em seguida vá até seu HTML (Design > Editar HTML e na nova interface: Modelo > Editar HTML > Prossseguir) e procurepor:

.main-inner h2.date-header {

font: $(date.font);

color: $(date.text.color);

}

Então substitua esse código por:

.main-inner h2.date-header {
float: left; /** data no lado esquerdo, pode mudar para right **/
width:55px;/** largura **/
height:55px;/** altura **/
overflow:hidden;
font: normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #ffffff;/* cor da fonte da data */
background: url('URL DO BACKGROUND');
background-repeat: no-repeat;
text-align:center;/* alinha o texto */
font-family: 'NOME DA FONTE', sans-serif;
font-size: 18px;
width: 80px;/* largura */
height: 80px;/* altura */
float:left;
margin-left: -55px;
margin-top: 5px;
padding: 9px 1px 2px 1px;
overflow:hidden;
line-height: 18px;
word-spacing: 25px;
}

ALTERAÇÕES

Onde está URL DO BACKGROUND coloque o url da imagem que vai ser o fundo da data. Mas, CUIDADO! Dependendo da imagem usada as medidas deverão ser alteradas, senão vai ficar feio.

Em NOME DA FONTE coloque o nome certinho da fonte que você usa no seu blog, ou a que desejar, lembrando que ela deve estar instalada no HTML do seu blog. Aprenda aqui e aqui.

Se tudo for feito direitinho data vai ficar mais ou menos assim: