22/11/2012

Como personalizar a data do blog!

Olá!
Voy ensinar a personalizar data do blog igual como ta aqui!
Ela é uma bolinha redonda preta e quando passa o mouse em cima fica rosa!

Antes de tudo o teste foi no modelo travel,em outros modelos pode não funcionar!

Clique em Leia Mais para ver o tutorial!

Primeiro va em configurações>idioma e formatação e ajuste a data como na imagem:

Clique em salvar configurações e vá em modelo>editar html>prosseguir.

Aperte ctrl+f e procure por:

.main-inner h2.date-header {

voce vai ver:

.main-inner h2.date-header {  font: $(date.font);  color: $(date.text.color);}

então substitua tudo 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: #000000; /** cor do fundo **/}.main-inner h2.date-header:hover {background: #ff0066; /** cor do fundo hover **/}

OBS:

-Para mudar o fundo é só trocar a cor onde "diz cor de fundo" ou "cor de fundo hover"
-Pode diminuir e aumentar o tamanho da fonte onde diz "Tamanho da fonte"
-Pode trocar a cor da fonte onde diz"cor da fonte"

Crédito:Go Imagine 

BJO!

3 comentários:

  1. oiii adorei o seu blog ele é muito fofo e lindo, agora sou seguidora, passa lá no meu depois para dar uma olhada, beijocas...
    http://paradisedreamsonline.blogspot.com.br/

    ResponderExcluir
  2. Adorei seu blog :) estou seguindo. Da uma olhadinha no meu depois ♥
    http://editandocomaray.blogspot.com.br/

    ResponderExcluir