Data personalizada com efeito hover

      

Oiie meninas o tuto de hoje é como colocar a data no blog personalizada bom, é bem facil qualquer duvida ou se não conseguiu fazer comente vamos?

O senhor é o meu pastor e nada me faltará (Salmos 23:1)

Oiie meninas trazendo outro tutorial como deixar data da postagem do blog personalizada é super facil e vai ficar dessa forma:
                                          

   
Quer ver clique leia mais...

Vá em configurações ->  Idioma e Formatação -> formatação de data e ajuste a data como na imagem:
Salve em seguida você vai no Modelo -> editar HTML -> clica na caixa do HTML e aperte CRTL + F3 e procure por:


Então substitua o codigo 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.

É isso meninas beijos e se reblogar dê creditos.

Resultado da Montagem

3 comentários:

REGRAS:

✖ Proibido xingar, insultar
✖ Faça criticas construtivas
✖ Siga, Comente e divulgue
✖ Não plagie as postagens, pegar algum post Credite
✖ Comente sobre o assunto do blog, e no final do comentário coloque o link do seu blog, que eu visitarei e seguirei.