12.10.13

Data personalizada no seu blogger


O tutorial de hoje vai te ajuda a personalizar a data de suas postagens...
Sua data ficará assim:


Curtiu? Então leia mais (:


Primeiro, vá até Configurações > Formatação > Formato da data, e ajuste a data como na imagem:
"Dia Mês Ano"
Salve, em seguida vá até seu HTML (Design > Editar HTML e na nova interface: Modelo > Editar HTML > Prossseguir) e procure por:
.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}
Então substitua esse código 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: #FF6C91; /** cor do fundo **/
}
.main-inner h2.date-header:hover {
background: #E9B4BB; /** cor do fundo hover **/
}
Observações:
- Se colocar right em float, mude margin-left por margin-right.
- Para mudar a cor do fundo é só trocar o código da cor (tabela aqui).
- Se a data estiver saindo pra fora do circulo diminua o tamanho da fonte.
- A data ficará com a mesma fonte do titulo do post. Se quiser outra fonte adicione:
font-family: nomedafonte; antes de color: #fff !important;/
- Dependendo da sua fonte e tamanho pode ficar meio desconfigurado, aí é só você fazer os ajustes necessários (mudar valores de padding, margin, font-size, widht, height etc) e deixar do jeito que você quiser.

40 comentários:

  1. Hey... não estou entendendo!! Hehe' não sou boa pra fazer essas coisas e tal.
    Preciso de muita ajuda, quero deixar o meu blog legal, bonito, para que todo mundo possa ve-lo!

    maahdicas.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Olá, bom eu visitei seu blog e gostei...
      Eu já fiz esse tutorial aqui no blog e conseguir fazer, tenta prestar um pouco mais de atenção e seguir direitinho o que se pede, você consegue Flor, qualquer coisa é só me chamar aqui. Beijos :*

      Excluir
  2. ooi, o meu não aparece o codigo que vc mandou substituir. ele tem em todos os modelos?

    ResponderExcluir
    Respostas
    1. Sim são para todos os modelos, se o código não apareceu talvez seja porque você apagou ele tentando fazer um outro tutorial... Verifique e tente novamente. Qualquer coisa é só me chamar. Obrigada ♥

      Excluir
    2. Tente procurar só a primeira linha, ai você cola o código abaixo depois da última chave }
      Pode dar certo...

      Excluir
  3. http://beijoscomglooss.blogspot.com.br/ seguindo sdv

    ResponderExcluir
  4. consegui fazer oh,não acredito tanto tempo to tentando mudar você ensina direitinho ^^ amei ,
    olha resultado la meu blog
    http://carolineraquel.blogspot.com
    bjos
    ps : estou seguindo seu blog ,segue meu tambem :3

    ResponderExcluir
    Respostas
    1. Obrigada, que bom que deu certo linda ^^
      Não encontrei você nos meus seguidores =/
      Beijos :*

      Excluir
  5. Eu não consegui, quando procuro pela primeira tag que está escrita, não aparece selecionado, tentei umas 3 vezes e não consegui :(

    ResponderExcluir
    Respostas
    1. Procure então apenas pela primeira linha do código

      .main-inner h2.date-header {

      Excluir
  6. Oiii Muito obrigada você me ajudou muito amei o seu blog ele e MEGA %100 fofo =3 !!! s2 s2 s2 s2

    ResponderExcluir
  7. Nao estou encontrando o código que voce mandou procurar. Estou seguindo seu blog, segue o meu por favor? http://duringthefifteenyears.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Você pode ter alterado o código em algum outro tuto gatinha =/
      Seguindo de volta em 3, 2, 1...
      Beijoos :*

      Excluir
  8. Amei seu blog, muito fofo, seguindo segue de volta? :) purplestreakss.blogspot.com.br

    ResponderExcluir
  9. Amei o tuto, consegui , já tinha tentado umas 500 vezes, saiba q você é diva .

    ResponderExcluir
  10. Nunca consigo achar esses códigos ,eles não aparecem!

    ResponderExcluir
    Respostas
    1. Como você está fazendo?
      Se quiser posso ter ajudar a acha-los :)

      Excluir
  11. Muito obrigada mesmo, já tinha tentado várias vezes, mas só consegui após tentr com esse tutorial :)
    Se quiser dar uma olhada no meu blog:
    http://curtindoavidalendo.blogspot.com/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha conseguido fazer o tuto ^^
      Amei seu blog, parabéns!

      Excluir
  12. então eu nao entendo aqueles negocio de mudar tipo fica akela parte desce entres as ** eu devo colocar isso tbm '------' me ajuda por favor :*

    ResponderExcluir
  13. oiii funcionou obrigada adorei seu blog linda um beijo <3
    http://girlsprincesa.blogspot.com.br/

    ResponderExcluir
  14. oi você poderia fazer um tutorial de como fazer seu próprio template por favor

    ResponderExcluir
  15. o meu aparece a data mas nn o circulo :c porqueeeE? ta tudo direitinhoo

    ResponderExcluir
    Respostas
    1. Edita a parte que diz a largura, tamanho e tal e personalize do jeito que você quiser, só cuidado para não apagar coisas importantes para não dar erro na sua data <3 beijos linda

      Excluir
  16. Oie aparece a bolinha da data só que fazia sem a data, eu já configurei e nada :(

    ResponderExcluir
  17. Oie aparece a bolinha da data só que fazia sem a data, eu já configurei e nada :(

    ResponderExcluir
    Respostas
    1. Você deve ter editado a bolinha, mas esqueceu de pôs a fonte da data de acordo, seguindo a bolinha, por exemplo, se você jogou a bolinha mais para o canto e diminuiu o tamanho dela, então você deve fazer o mesmo com a fonte da data, jogar mais pro canto e diminuir a fonte, de forma que fique dentro da bolinha. Entendeu flor Qualquer coisa pode chamar novamente *-*
      Beijos

      Excluir
  18. Só pra constar que esse tutorial não é dessa fonte que você creditou, e sim do Go Imagines.

    ResponderExcluir
    Respostas
    1. Só pra constar também eu deixo a fonte de onde eu achei e não de onde surgiu... Se eu estivesse encontrado no blog Go Imagine, eu teria deixado fonte á esse blog, mas encontrei em outro blog, e se é do blog Go Imagine esse tutorial, bom acho que o blog em que me ensinou ao tutorial tem que deixar a fonte de onde achou né?! Então ao menos eu fui ética e deixei a fonte seja de quem for que criou, pelo menos não fui mal caráter e deixei os créditos à mim mesma sem que eu nem criei ;)
      A fonte está no post, de quem quer que seja... Mas e a sua cara mostrando quem você é, cadê?
      Beijoos

      Excluir

- Se tive alguma dica, diga! =)
- Alguma dúvida ou algum pedido? Comente!
- Sim, visito o seu blog, mande o link! =D
-Favor não ofender ninguém, elogios e criticas são bem vindos, mas mantem o respeito!
Obrigada, MB!

Copyright © 2016 | Design e Código: Mistério do Brilho e Sanyt Design | Tema: Viagem - Blogger | Uso pessoal • voltar ao topo