Data da postagem com efeito Hover?
08:00
Minha querida leitora Ester Santana do blog Primeiros Erros, me pediu para postar um tutorial explicando como deixar a data do blog do mesmo jeito da data no Acesso Permitido. Então, vou ensina-los como deixar a data da postagem com efeito Hover (Troca de cores).
A primeira modificação que faremos será mudar o modelo da sua data.. Vá em Configurações>Idioma e Formatação>Formato da Data> E escolha o penúltimo modelo (03 setembro 2012).
Feito isto, vamos em Modelo>Editar HTML> Aperte Ctrl+F e procure por.:
.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
Então substitua todo este código por um destes códigos abaixo.:
*Se a área da postagem do seu blog é na direita.:
.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;
}
*Se a área da postagem do seu blog é na esquerda.:
.main-inner h2.date-header {
font: georgia;
color: #333;
margin-left: -100px;
background: #FFB6C1;
float: left;
font-size: 11px;
padding: 4px;
}
.main-inner h2.date-header:hover {
background: #DB7093;
}
Personalizando o código de acordo com seu blog.:
margin-right: -100px; ou
margin-left: -100px;
Este código é a margem externa da data, ou seja, ela irá 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: #FFB6C1; Cor do fundo do quadro.
font-size: 11px; Tamanho da fonte da data.
padding: 4px; Espaçamento de dentro da caixinha.
background: #DB7093; Cor do fundo do quadro em hover (quando passa o mouse em cima.)
Quadro de personalização, fonte.: Bubblegum Burst.
AndyReis...
18 Comentários
18 mil comentários
esse tutorial é um show adorei!!
ResponderExcluir
kisses~~
#>>> http://www.the--baby.blogspot.com.br/
Anônimo3 de setembro de 2012 16:31QUE FOTO MAIS FOFAAAAAAA!*-*
ResponderExcluir
Vou postar no meu tumblr ok?
Adoro esse efeito na data do post!
Luz,Câmera,Read...
Beijos
Muito legal essa dica. :) O dia que eu for refazer o layout, vou dar uma passada aqui para esse tipo de tuto.
ResponderExcluir
Abraço. Tudo Tem Refrão
- Anônimo3 de setembro de 2012 22:16
Belo tutorial, amei eu cheguei a um mes a blogfera vc pode me ajudar? gostaria de saber como se bota um video do youtube no blog, eu ja tentei só que quando agente v a imagm so aparec um quadrado preto, nao aparece a imagem e nem a setinha do player!
ResponderExcluir
rockdeverdadeeatitude.blogspot.com/ bjs 
- Anônimo5 de setembro de 2012 12:28
Adorei o tutorial, ótimo. Eu adorei esse efeito!
ResponderExcluir
Bia
morangoredondo.com.br
