Tags:
Este tutorial vou mostrar como personalizar a data da postagem no estilo da foto acima, que está personalizado neste blog [www] Muito fácil e rápido de personalizar! Vamos lá? (testado no templante Viajem/travel do blogger)
Primeiramente vá em Configurações >> Formatação >> Formato da data, e personalize para que a data fique igual a foto abaixo e, salve! (versão antiga)
Vá em Design - Editar Html pressione as teclas Ctrl+F ou F3 e procure por:
(se o seu código não for personalizado irá aparecer assim)
.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
Caso ao contrário poderá aparecer assim
.main-inner h2.date-header {
font: normal normal 7px 'Trebuchet MS',Trebuchet,sans-serif;
color: transparent; }
Ou de alguma outra maneira.
Exemplo:
Caso ao contrário poderá aparecer assim
.main-inner h2.date-header {
font: normal normal 7px 'Trebuchet MS',Trebuchet,sans-serif;
color: transparent; }
Ou de alguma outra maneira.
Se preferir e para facilitar, apenas procure pelo primeiro código: .main-inner h2.date-header {
Agora, substitua todo o código que citei acima, pelo código abaixo:
.main-inner h2.date-header {
font: georgia;
color: #FFD700;
margin-left: -60px;
background: #000000;
float: left;
font-size: 11px;
padding: 4px;
}
.main-inner h2.date-header:hover
{
background: #FF1493;
}
Vermelho : Altere o tamanho.
Azul : Fonte da data
Vinho : Cor da fonte/data
Roxo : Fundo sem ser selecionado (imagem - antes)
Laranja : Efeito hover. Fundo com o mouse passando por cima (imagem - depois)
PS:.
font:
georgia ; É a fonte da data.
color: #FFD700 ; É a cor da data.
color: #FFD700 ; É a cor da data.
margin-right:
-60px ; 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 fica, quanto maior mais longe.
background:
#000000 ; Cor do fundo do quadro.
float: left; Alinhamento do quadro da data. (se a sua postagem está para a direita altere o left pelo right)
font-size: 11px ; Tamanho da fonte da data.
padding: 4px ; Margem interna do quadro, ou seja, espaçamento de dentro da caixinha.
float: left; Alinhamento do quadro da data. (se a sua postagem está para a direita altere o left pelo right)
font-size: 11px ; Tamanho da fonte da data.
padding: 4px ; Margem interna do quadro, ou seja, espaçamento de dentro da caixinha.
Beijos :*
Fonte: [www]
