Data do blog personalizada (hover)

05 setembro 2013


Hi peoples ! Tudo bam ?Nossa quanto tempo eu não posto né ? kkk
Então a pedido da Mio-chan eu vou ensinar a fazer a data igual a daqui tipo assim :


Então querem aprender ?

créditos ao:Go Imagine

Primeiramente vá em Configurações>Formatação>Formato de data e deixe assim?
Salve agora vá no seu HTML>Ctrl+F e procure por :
.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}


Então substitua 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-size:15px;/** tamanho da fonte,se ficar para fora diminua a letra **/
color: #fff !important;/** cor da fonte **/
text-align:center;/** alinha o texto **/
margin-bottom: -65px; /** desce para subir diminua os números**/
margin-left: -80px; /** margem pra esquerda **/
padding: 8px 2px 0px 2px; /** espaço interno: topo, direito, embaixo, esquerdo **/
-webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/
background: #FF6C91; /** cor do fundo **/
}
.main-inner h2.date-header:hover {
background: #E9B4BB; /** cor do fundo hover **/
}
Qualquer dúvida me grita !
Para mudar as cores use essa tabela aqui espero ter ajudado
                                                                   ~Beijos~
Comentários
2 Comentários

2 comentários:

© Dilemas Indies - 2014. Todos os direitos reservados - Criado por: Bárbara Nascimento - Tecnologia do Blogger. imagem-logo