Tutorial: Personalizar a data do post

março 09, 2013,7 Comments

Oi gente, eu de novo e respondendo mais um pedido no ask.

Personalização de data. Eu achei esse tutorial no Diamantes de uma garota

Para quem quer personalizar a data clique em leia mais.

Bom antes de tudo você vai abrir seu blog e vai em configurações → Idioma e formatação.

E arruma a data assim.

Depois de arrumar assim você vai salvar configurações e pronto.

Agora vamos personalizar a data.

Vai em Modelo → Editar HTML → Ctrl+F e procura pela tag:

.main-inner h2.date-header {

Quando você achar, vai ter algo parecido com isso:

.main-inner h2.date-header {

font: $(date.font);

color: $(date.text.color);

}

Apague todo esse código e substitua pelo código da data que você mais gostar, eu trouxe dois estilos hoje.

1 - Data simples (só muda a cor do fundo quando passa o mouse)

.main-inner h2.date-header {
/* Data personalizada by DDUG*/
font: arial; /* Fonte da Data */
color: #FFFAFA; /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #00BFFF; /* Fundo da data */
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */
padding: 4px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.main-inner h2.date-header:hover {
background: #C1CDCD; /* Fundo quando o passa o mouse */
/* Fim da data personalizada by DDUG, não retire créditos */
}

2 - Data "folhinha"

.main-inner h2.date-header {
/* Data personalizada by DDUG */
font: arial; /* Fonte da Data */
color: #000000; /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #FFFFFF; /* Fundo da data */
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */
padding: 4px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.main-inner h2.date-header:hover {
background: #FFC0CB; /* Fundo quando o passa o mouse */
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
/* Fim da data personalizada by DDUG, não retire créditos */
}

3 - Data redondinha

.main-inner h2.date-header {
/* Data personalizada by DDUG */
font: arial; /* Fonte da Data */
color: #00BFFF; /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #FFFFFF; /* Fundo da data */
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */
padding: 4px;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomleft: 100px;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.main-inner h2.date-header:hover {
background: #000000; /* Fundo quando o passa o mouse */
-webkit-border-top-right-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topright: 100px;
-moz-border-radius-bottomright: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
/* Fim da data personalizada by DDUG não retire créditos */
}

Espero que gostem e ajude vocês... Usem essa tabela (www) Para ajudar na personalização. Qualquer duvida só perguntar nos comentários.

7 comentários:

Ana Luuh 10 de março de 2013 às 10:03
Oi, Cami!!!
Eu não entendo se a gente usa a cor de "Código Java" ou "Código HTML"... Please, me responda!!!
Obrigada desde já...
OBS: Amo suas fics!!
ResponderExcluir
Respostas
Anônimo28 de abril de 2013 às 07:51
Oiiiier, Liamda amei o tutorial, tbm sou directioner e vou te pertubar um poquinho..Curti minha página please ? ~~> http://www.facebook.com/LODS2
Segue o meu blogger ~~> http://jordanahoran.blogspot.com.br/
Agradeço, seu blogger é daHoran... Malikisses :*
ResponderExcluir
Respostas
Anônimo11 de maio de 2013 às 18:04
Nossa a data fica muito fofinha,adorei *-*
minhas-confissoes-2012.blogspot.com
ResponderExcluir
Respostas
Kawaii"ka"15 de junho de 2013 às 23:25
obrigada ajudou muito http://nerd-me-entende.blogspot.com.br/
ResponderExcluir
Respostas
Unknown3 de outubro de 2014 às 20:51
Amei o Tuto!!! Ajudou bastante XD
Beijos
ResponderExcluir
Respostas
Paula Okummura ~8 de janeiro de 2015 às 18:51
Ficou muito fofo! Amei! Vou usar no meu novo lay! Beijooos!
apenas-sorrisos.blogspot.com
ResponderExcluir
Respostas