Data personalizada com efeito hover

Data personalizada com efeito hover

Postado por Anny S. | |

aah que cute *-* encontrei em "A series of serendipity"

Hoy amores, até que enfim tuto novo né? Ultimamente tenho visto muitos blogs com a data "dentro de um circulo" e não sei vocês, mas eu acho lindo demais *-* Então esses dias me deu a loka e fui tentar fazer, não é que deu certo e ficou muito amor? E tem mais, é com efeito hover -awwn- <3

Sua data ficará assim:

Curtiu? Então leia mais (:

Primeiro, vá até Configurações > Formatação > Formato da data, e ajuste a data como na imagem:

"Dia Mês Ano"

Salve, em seguida vá até seu HTML (Design > Editar HTML e na nova interface: Modelo > Editar HTML > Prossseguir) e procurepor:

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);

}

Então substitua esse código 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.

Testado somente no modelo Travel! Espero que gostem, beijos :*