Como fazer a data igual a do Place Fame(Extras)

Tumblr_lp3vroraua1qcxczho1_500_large

Oii amores, tudo bom? Ultimamente tenho visto muita gente em dúvida de como fazer a data do Extras do Pace Fame, e é super simples... O tutorial é baseado no Template Travel do Blogger e não foi testado em outros ok?

Exemplo:


Primeiro você tem que ir em Detalhes e depois Formatação. Em formato de data marque a primeira opção 07/08/2011 e clique em "salvar configurações".

Vá em design >> Editar Html e procure por(Ctrl + F) ~> h2.date-header {


deve estar mais ou menos assim:

.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}
Substitua esse trechinho pelo código abaixo:
.main-inner h2.date-header {
float: right;
background: #FFF;
color: #333;
font-family: Tahoma, Arial;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
Vermelho - É o lugar que a data vai ficar: right(direita), left(esquerda)
Laranja  - É a cor de fundo da data
Azul claro - É a cor da data
Azul escuro - É a fonte em que a data vai ficar
Verde - É o que faz a borda ficar redonda, se não quiser ela assim retire as três linhas que contenham o numero verde. PS: O efeito não funciona no IEca(Internet Explorer).

Se quiser usar borda é só acrescentar a linha abaixo antes de fechar chaves:
border: 1px solid #000;
Vinho - É a grossura da borda
Rosa - É o tipo de borda, a traçada(dashed), a pontilhada(dotted), a dupla(double) e etc...
Azul - É a cor da borda

Agora vocês já podem personaizar a data de vocês sem fazes besteira viu? KKK Beijos...
Juu aguarda os comments...

Comente usando seu facebook!


Comente!

  1. muito boa a dica, bjinhos
    http://whatthehellsociedade.blogspot.com

    ResponderExcluir
  2. Gostei do tutorial, mais não gosto da data nesse estilo! Thank's pelo comentário..
    haha'

    Ecleticu's

    ResponderExcluir
  3. Ameei o seu blog; é lindoo!
    Olha lá meu novo blog.:
    just-a-girl21.blogspot.com
    Beijos

    ResponderExcluir
  4. já amo aqui faz tempo!!! bom, fiz um novo blog, poderia seguir? bjs
    http://trechygirl.blogspot.com/
    (retribui o coment?)

    ResponderExcluir
  5. Muito lindo seu blog! Seguindo, segue de volta? Bjs!
    http://myway-mw.blogspot.com/

    ResponderExcluir
  6. Como assim, faltando alguma coisa?
    Eu fiz e deu certinho. haha'

    Ecleticu's

    ResponderExcluir
  7. Utilizei o tutorial, mais não deu cert' então, nao editei nada, fiz do meu jeito haha'.

    Ecleticus

    ResponderExcluir
  8. brinquei amo esse blog, sempre estou aqui lendo seus tutoriais :D bjs linda *-*

    ResponderExcluir
  9. brinquei amo esse blog, sempre estou aqui lendo seus post só você prestar atenção .. eu comento sempre!! bjs

    ResponderExcluir
  10. Como eu faço para diminuir ou aumentar o tamanho dela?
    No meu blog ficou grande :s
    Beijos
    http://sweetstarblog.blogspot.com/

    ResponderExcluir