Yahooo meu morangos com açúcar, trago algo hoje que pode ajudar vocês que esta com dificuldade para arrumar o estilo de data do blog ou tem preguiça mesmo ou sem criatividade. Bom trago três modelinhos em breve trarei outro mais detalhado e com efeitos de pontilhados e ribbons. Vamos lá?!
Os três modelos são esses vocês podem modificar as cores da forma que quiserem e o tamanho, aconselho editarem o formato de data para ficar menor.
.main-inner h2.date-header {
Agora abaixo dele depois do { cole o código de um dos modelos abaixo. Visualize para ver se deu certo e salve.
Códigos
font: Ariel;
color: #282828;
margin-left: -85px;
background: #d5d5d5;
float: left;
font-size: 12px;
padding-bottom: 20px;
padding-top: 20px;
padding-left: 3px;
padding-right: 3px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
box-shadow: inset 5px 3px 1px #eee, 0 0 5px #ffffff;
}
.main-inner h2.date-header:hover {
background: #dedede;
}
Códigos
font: Ariel;
color: #000000;
margin-left: -85px;
background: #9cd7e2;
float: left;
font-size: 13px;
text-shadow: #676767 1px -1px 1px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 3px;
padding-right: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 1px 1px 1px #ffffff, 0 0 5px #ffffff;
}
.main-inner h2.date-header:hover {
background: #FC71B4;
}
Códigos
font: Verdana;
color: #9B1AB0;
margin-left: -85px;
background: #ffffff;
float: left;
font-size: 11px;
padding-bottom: 20px;
padding-top: 20px;
padding-left: 8px;
padding-right: 8px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: inset 1px 1px 1px #ffffff, 0 0 5px #ffffff;
}
.main-inner h2.date-header:hover {
background: #4a494a;
}
Gostou? Espero que sim! Não esqueça de comentar viu? =)
adorei,lindos obrigado ^^
ResponderExcluirAmor, no meu HTML não tem esse código .main-inner h2.date-header { :/ Já procurei várias vezes e não encontrei. E agora ?
ResponderExcluirOie que modelo você usa? Se for o simples o código é um pouquinho diferente, mas você também adiciona lo. Mas procure por: .date-header span { vai achar dois, mas a data é o primeiro que aparecer. Para reconhece lo melhor, ele vai estar abaixo do /* Posts e abaixo dele vai estar assim:
ResponderExcluir.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
Você pode modifica-lo ou colocar um dos modelos acima em seu lugar. :3 kiss espero ter ajudado, caso não me avise.
Peguei o Primeiro modelo e modifiquei *--*
ResponderExcluirwww.k-awaiicherry.blogspot.com
Esta certo, faça ficar bem lindo!
Excluir