Olá pessoal como estão?
Aqui volto eu com mais um tutorial,hoje vim ensinar como colocar o formato da data da postagem do blog com efeito hover,no final do tutorial a data ficará assim:
primeiro você deverá ir em configurações---> idioma e Formatação e coloque o formato da sua data assim:
Tem que ficar igual o da imagem , DATA/MÊS/ANO
Depois vocês devem ir em---> modelo----> Editar HTML ---> Apertem CTRL+F ou F3 e procurem por:
.main-inner h2.date-header { font: $(date.font); color: $(date.text.color);}
Tentem procurar pela primeira linha assim ficará mais fácil de encontrar. Apaguem o código e substituam 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 **/color: #fff !important;/** cor da fonte **/text-align:center;/** alinha o texto **/margin-bottom: -65px; /** desce **/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 **/}
Observações:
- Se colocar right em float, mude margin-left por margin-right.
- Para mudar a cor do fundo é só trocar o código da cor (tabela aqui).
- Se a data estiver saindo pra fora do circulo diminua o tamanho da fonte.
- A data ficará com a mesma fonte do titulo do post. Se quiser outra fonte adicione:
font-family: nomedafonte; antes de color: #fff !important;/
- Dependendo da sua fonte e tamanho pode ficar meio desconfigurado, aí é só você fazer os ajustes necessários (mudar valores de padding, margin, font-size, widht, height etc) e deixar do jeito que você quiser.
- Para mudar a cor do fundo é só trocar o código da cor (tabela aqui).
- Se a data estiver saindo pra fora do circulo diminua o tamanho da fonte.
- A data ficará com a mesma fonte do titulo do post. Se quiser outra fonte adicione:
font-family: nomedafonte; antes de color: #fff !important;/
- Dependendo da sua fonte e tamanho pode ficar meio desconfigurado, aí é só você fazer os ajustes necessários (mudar valores de padding, margin, font-size, widht, height etc) e deixar do jeito que você quiser.
Espero que tenham gostado do tutorial,os créditos são todos do blog Sonhos Mais Profundos,pois vi o tutorial lá.
Beijos meus lindos fiquem com Deus,qualquer duvida perguntem. Tchauu....
Olá, muito lindo seu Blog !
ResponderExcluirSeguindo aqui Flor ^^
Beijos *--*
http://sonhomaisprofundo.blogspot.com.br/
Obrigada,to seguindo o seu também ^^
Excluirbeijos more
Lindo talvez eu use! Obrigada pela visita!
ResponderExcluirCréditos são para o Go imagine, essa do Sonho Profundo não fez nada '-'
ResponderExcluir