29 de mai de 2013

Como personalizar a data do blog?


Hooy tudo bom com vocês? Hoje trouxe mais um tutorial que eu vou explicar como faz para personalizar a data do seu blog o.k.? Espero que vocês gostem, mas antes... 1,2,3,4 eu não vou pra escola que amanhã é feriado (kkkkk tá parei)
 Gostaria de dizer a vocês que os posts daqui do blog, sempre serão feitos a tarde porque eu estudo de manhã. Então já sabem né? hahaha vamos ao tutorial clique em let's  go baby.

Pra começar o tutorial você vai abrir seu blog (óbvio) e ir em configurações > idioma e formatação. E arrumar a data assim ó



Depois de arrumar a data desse jeito você vai salvar as configurações e pronto.

Agora vamos personalizar a data: Vá em modelo > Editar html > Ctrl + f e pesquise pela tag
.main-inner h2.date-header {
Quando você achar essa tag vai ter algo parecido com isso:
.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}
Apague todo esse código e coloque no lugar esse aqui:
font: normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #ffffff;/* cor da fonte da data */
background: url('URL DO BACKGROUND');
background-repeat: no-repeat;
text-align:center;/* alinha o texto */
font-family: 'Arimo', sans-serif;
font-size: 18px;
width: 80px;/* largura */
height: 80px;/* altura */
float:left;
margin-left: -55px;
margin-top: 5px;
padding: 9px 1px 2px 1px;
overflow:hidden;
line-height: 18px;
word-spacing: 25px;
}
Onde está URL DO BACKGROUND você irá colocar uma imagem de fundo, separei algumas aqui:




Onde está escrito Arimo é o nome da fonte que eu escolhi, mas você pode colocar outra fonte ex: Verdana, Arial, Calibri. Entenderam? É isso meu povo beijos, ha e não deixem de comentar o.k.? Até mais, Xoxo *.*

41 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Oiiii o meu não tem o rpimeiro código,aparece 0 de 0

    Me ajuuuuda

    ResponderExcluir
    Respostas
    1. coloca em formatar modelo , dai espera um pouco , e da ctrl F ( ou F3 ) e procura o codigo e da um enter . prontinho :)

      Excluir
  4. Oiiii o meu não tem o rpimeiro código,aparece 0 de 0

    Me ajuuuuda

    ResponderExcluir
  5. Oiiii o meu não tem o rpimeiro código,aparece 0 de 0

    Me ajuuuuda

    ResponderExcluir
  6. Obrigada, estava atrás disso *-*

    http://purplestreakss.blogspot.com.br/

    ResponderExcluir
  7. Muiro legal esse post me ajudou pois ja estou procurando alteraçoes pro blog no proximo ano tanks :)
    Meu blog: wwwblogpapoteen.blogspot.com.br

    ResponderExcluir
  8. Oii o meu não tem o primeiro código,aparece 0 de 0

    Pode me ajudar?

    ResponderExcluir
  9. Ai meu Deus! Estou há muuuuuuito tempo tentando achar esse código, só que todos que eu colocava davam errado! O seu funcionou perfeitamente e os modelos são lindos, vou colocar um e dar os créditos, tá?
    Obrigada!

    ResponderExcluir
  10. Este comentário foi removido pelo autor.

    ResponderExcluir
  11. Eu não consegui colocar o primeiro código, fiz como você disse (para uma menina que estava com o mesmo problema), e formatei o modelo, esperei um tempinho, colei o código, e mesmo assim não apareceu!

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
  12. OI, muito obrigada pelo tuto! Me ajudou muito, estou seguindo seu blog, gostaria que visitasse ou seguisse o meu também! Obrigada e parabéns c;

    simsegredei.blogspot.com.br

    ResponderExcluir
  13. Adorei o tutorial , já tinha procurado em vários outros blogs mas o seu foi o único que me ajudou!! Obrigada!!
    http://blogmagicaldreams.blogspot.com.br/

    ResponderExcluir
  14. Não tem outra forma de modificar a data da postagem a não ser por esses ".main-inner h2.date-header {" e ".main-inner h2.date-header {
    font: $(date.font);
    color: $(date.text.color);
    }" ??? O meu já está modificado esta parte.

    ResponderExcluir
  15. Achei agora esse aqui:
    <Variable name="date.font" description="Font" type="font"

    Não sei se da pra ser.

    http://mundofashionvih.blogspot.com.br/

    ResponderExcluir
  16. Adorei ficou lindo no meu blog.
    Muiito obrigada :)

    http://divabasica.blogspot.com/

    ResponderExcluir
  17. não consegui :( não consigo achar o código: .main-inner h2.date-header

    ResponderExcluir
    Respostas
    1. Provavelmente é o modelo que está usando. Este código não deve ter sido testado em todos eles.

      Excluir
  18. Muito útil! Mas não consegui usá-lo no Modelo Simples. Esse código foi testado em qual ou quais modelos?

    ResponderExcluir
  19. Muito obrigada :) Ajudaste-me imenso, estou a aprender a fazer o meu próprio layout e todos os outros tutoriais sobre personalizar a data estavam dando erro... O teu foi o primeiro que deu certo :) Super beijo <3

    ResponderExcluir
  20. Ficou super fácil de fazer, o tutorial ficou ótimo, muito obrigada, ajudou bastante! <3

    http://sampensou.blogspot.com

    ResponderExcluir
  21. Peguei uma data :D bjs

    diamante--colorido.blogspot.com

    ResponderExcluir
  22. Vou tentar,VLW
    Você pode visitar o meu blog e se gostar,
    Segue?

    Meu Blog

    ResponderExcluir
  23. Ameii o tuto, ja to usando :3
    mythings2.blogspot.com

    ResponderExcluir
  24. Este comentário foi removido pelo autor.

    ResponderExcluir
  25. Perfeito, ficou bem melhor que o anterior <3

    ResponderExcluir
  26. Não consegui :( Fiz tudo direitinho, e amei o tutorial pois é muito fácil, mas no final não deu, eu visualizei e não ficou com o background que eu escolhi.

    ResponderExcluir
  27. Não consegui :( Fiz tudo direitinho, e amei o tutorial pois é muito fácil, mas no final não deu, eu visualizei e não ficou com o background que eu escolhi.

    ResponderExcluir
  28. Muito bom o tutorial! Passei umas duas horas ontem tentando fazer esse troço e nada. Finalmente consegui *-*
    http://acasodemenina.blogspot.com.br/

    ResponderExcluir

Fico feliz em saber que você vai comentar neste post, mas antes algumas regrinhas:
- Só aceito "Segue, sigo de volta" se você seguir primeiro, há e você também tem que comentar o que achou do post SEJA SINCERA(O)!
- Tenho certeza que todos conhecem a "política da boa vizinhança" então não serão aceitos comentários de baixo escalão, ou qualquer comentário ofensivo.
- Deixe o link do seu blog para eu retribuir sua visita
É isso, obrigada por comentar e volte e comente sempre ^^