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. Aiih Ti Fofo,Amei O Tutu

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

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

    ResponderExcluir
  8. 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
  9. Oii o meu não tem o primeiro código,aparece 0 de 0

    Pode me ajudar?

    ResponderExcluir
  10. 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
  11. Este comentário foi removido pelo autor.

    ResponderExcluir
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. Conseguiiiiiii , diwosaa :)

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

    http://divabasica.blogspot.com/

    ResponderExcluir
  19. 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
  20. Muito útil! Mas não consegui usá-lo no Modelo Simples. Esse código foi testado em qual ou quais modelos?

    ResponderExcluir
  21. 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
  22. Ficou super fácil de fazer, o tutorial ficou ótimo, muito obrigada, ajudou bastante! <3

    http://sampensou.blogspot.com

    ResponderExcluir
  23. Peguei uma data :D bjs

    diamante--colorido.blogspot.com

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

    Meu Blog

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

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

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

    ResponderExcluir
  28. 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
  29. 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
  30. 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 ^^