 |
| Demilinda |
Olá lovers, estou com o primeiro tutorial do blog. E, é super fácil e elegante! Quer fazer uma data com hover? E, além disso ela é redondinha igual esta:
( original: http://beijosxoxo12.blogspot.com.br/ )
1.Vá até Configurações > Formatação > Formato da data, e ajuste a data igual a da imagem:
( original: http://beijosxoxo12.blogspot.com.br/ )
Ajuste em dia/mês/ano igual na imagem
Salve, agora vá até seu HTML e procure por:
.main-inner h2.date-header {font: $(date.font);color: $(date.text.color);}
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 **/}
Fácil modificar. Eu coloquei outra cor no HTML pra não ter cópias.
