Personalizando a data da postagem

Postagem atualizada dia 23/08/2013 às 20h57

Taí um tutorial bastante procurado e um dos mais vistos por aqui (segundo as Estatísticas do Blogger): ensinarei vocês a personalizar a data da postagem que, pelo design padrão do blog, é sem graça, e fica sempre num canto, tão escondidinha.
Prontos?

Pra começar, vá até Configurações >> Formatação >> Formato da data, e ajuste a data da seguinte maneira:

Salve, e em seguida vá até o seu HTML (Design >> Editar HTML) e procure pelo código abaixo:

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

E substitua esse código por esse:

.main-inner h2.date-header {
font: georgia;
color: #333;
margin-right: -100px;
background: #FFB6C1;
float: right;
font-size: 11px;
padding: 4px;
}
.main-inner h2.date-header:hover {
background: #DB7093;
}

Primeiro vamos alinhar a data, se seu quadro de postagem está à direita não é necessário mudar o "float: right;" e o "margin-right: -100px;" caso contrário, substitua o right por left. Agora vamos entender os códigos!

font: georgia; É a fonte da data.
color: #333; É a cor da data.
margin-right: -100px; Este código é a margem externa da data, ou seja, ela ira dar o espaçamento necessário entre o quadro da postagem e o quadro da data. Quanto menor o número mais perto ficará, e quanto maior mais longe.
background: #FFB6C1; Cor do fundo do quadro.
float: right; Alinhamento do quadro da data.
font-size: 11px; Tamanho da fonte da data.
padding: 4px; Margem interna do quadro, ou seja, espaçamento de dentro da caixinha.

PROPRIEDADE HOVER
background: #DB7093; Cor do fundo do quadro quando passa o mouse em cima.

Caso queiram bordas diferentes, deem uma olhada nessa postagem. Espero que tenham entendido! Qualquer dúvida deixem um comentário ou entrem em contato, ok? Beijos, Emily.