Personalize a data do seu blog

|
Tumblr_lx8n3ovm8c1qil5qho1_500_large
Oi gente linda! Quem quer tutorial levanta a mão! \o/ \o/ \o/
Eu acho esse tutorial super legal, porque dá uma cara de site ao seu blog. Com esse tuto você poderá deixar a data do seu blog como essas:
Vamos ao tutorial. Você deve prestar bastante atenção, pois tem vários códigos. Faça com calma que você consegue.

Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Configurações" > "Idioma e formatação":
 Mude o formato da data para a penúltima opção:

Salve as alterações. Clique agora em "Modelo" no menu lateral. É recomendável que você baixe uma cópia do seu modelo antes de prosseguir. Para fazer isso, clique no botão "Fazer backup/Restaurar" e depois em "Fazer download do modelo completo".
Depois de fazer download do seu modelo, clique no botão "Editar HTML" que fica abaixo da miniatura do seu blog. Clique em prosseguir no aviso que aparecer.

Marque a opção "Expandir modelos de widget":






Aperte Ctrl+F e procure por </head>
Logo abaixo disso, cole esse código:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>
Aperte Ctrl+F novamente e procure pela primeira linha deste código:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Logo abaixo do trecho que você procurou, cole isso:
<a expr:name='data:post.id'/>
Deve ficar assim:





Aperte Ctrl+F novamente e procure pela linha abaixo:
<h2 class='date-header'><data:post.dateHeader/></h2>

Provavelmente você irá encontrar mais de um desse código. Substitua todos que encontrar por esse código:
 <div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

Agora para finalizar, procure por  ]]></b:skin>
E acima disso, cole o código a seguir:

#fecha {
color: #464646; /*Edite a cor da data*/
padding-top: 5px; /*Margem interna superior da data*/
padding-right: 5px; /*Margem interna direira da data*/
padding-left: 5px; /*Margem interna esquerda da data*/
padding-bottom: 5px; /*Margem interna inferior da data*/
margin-right: -0px; /*Margem externa direita */
margin-left: -0px; /*Margem externa esquerda*/

float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') no-repeat; /*Imagem de fundo*/
height: 30px; /*Altura da imagem*/
width: 30px; /*Largura da imagem*/
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
display:block;
}
É nesse último código que você vai editar o estilo da data, colocar imagem de fundo e alterar a fonte.
Se você quiser que a data fique para fora da área de postagens, você deve aumentar os valores de "margin", que estão destacados em rosa. Se sua sidebar ficar no lado direito, aumente o valor de margin-left, sem apagar o tracinho (-) até que fique onde você quer. Agora se sua sidebar fica á esquerda, aumente o valor de margin-right.

Visualize se está tudo certo e salve. Se não funcionar, limpe as alterações e tente de novo com mais atenção. Abaixo tem algumas imagens para você usar como plano de fundo da data:

     

Créditos ao Mundo Blogger e ao Menina Nerd pelos códigos!

103 comentários

  1. Muito legal :) adorei! bjs 
    http://www.cotidianodeumabarbie.blogspot.com/ 

    ResponderExcluir
  2. Oi Liah!! quanto tempo não passo aqui =(
    Adoro suas dicas. são mto uteis!!

    bjinhus

    maryecia.blogspot.com

    ResponderExcluir
  3. mUITO LEGAL O TUTORIAL,VOU POR EM PRÁTICA

    http://www.senhoritaperfeita.blogspot.com

    ResponderExcluir
  4. Amei o tutorial,post novo passa lá?

    http://dezapaixao.blogspot.com/2012/02/ebaeba-parabens-pra-mim.html 

    ResponderExcluir
  5. Como sempre CB único *-*, estava tentando isso a tempos e nenhum código funcionava =/, muito obrigada Lia. *-*

    ResponderExcluir
  6. Adorei a dica, isso vai me ajudar depois. Adorei o blog, e já estou seguindo e iria gostar muito se retorna-se a visita.

    http://jennywestwick.blogspot.com

    Beijinhos

    ResponderExcluir
  7. Adorei o tutorial! Mas vc pode fazer um tutorial de como fazer aquele negócio q tá escrito 11 comentários|categoria: elite afiliados. como faz pra ele ficar assim?

    http://s2daniih.blogspot.com/ 

    ResponderExcluir
  8. Aai que máximo os planos de fundos das datas!
    Mt fofos ^^
    Adorei o tuto, super explicadinho e útil (:

    Bjshttp://blogportalteen.blogspot.com

    ResponderExcluir
  9. Nossa, ameeei o tuto.Sempre quis saber como colocava, vou tentar num blog de testes 

    Beijão
    Ana
    meninasantenadas.tk

    ResponderExcluir
  10. Muuuito obrigada Liah! Amei as respostas! Semana que vem eu posto, e claro, vc vai ser a primeira a saber o link!

    Mil beijos *-*

    ResponderExcluir
  11. Amei o tuto!!!*--*
    http://www.facebook.com/blogmudancas
    http://meumundomudando.blogspot.com/ 

    ResponderExcluir
  12. Ótimo tutorial, muito útil. Pena que acabei de mudar o lay do meu blog, mas vou guardar pro próximo.
    Obrigada por passar lá no blog, seguir e comentar, fico feliz que tenha gostado do layout, volte sempre!

    Tem post novo no Garota Unbroken!
    Beijos!
    garota-unbroken.blogspot.com

    ResponderExcluir
  13. Eu tinha la no blog esse code,depois enjooei e voltei ao normal,kkk'
    post novo la no blog,pode comentar amori?
    http://tutoriar-oficial.blogspot.com/ 

    ResponderExcluir
  14. BOM TUTORIAL GATAAAAA *-*

    Gosto pacas e camelos )(?)(?)(? do seu blog HJKGHFJKGHJKF

    CARA, ANDAR DE LADO? OBA, SOU UM SIRI GHFJKGHFHGFHJKGFJKGHJFHGJKFMano, amei seu blog. Super lindo! Vou seguir *-*Bjonas e fique com Deus <3Camilla Martins - http://sugar-dance.org 

    ResponderExcluir
  15. Esse tuto é demais, fiz no meu blog, mas de um modo um pouco diferente, fica muito legal! 

    Bjs

    daimaginacaoaescrita.blogspot.com

    ResponderExcluir
  16. Amei o tuto! Estava louca pra saber como fazia isso =D Obrigada Liah!
    Flor, você pode postar um tuto fazendo favor? Queria que você ensinasse fazer o Menu de Abas, por favor? Estou louca atrás do código! Mas não acho de maneira alguma! 
    Beijos,
    http://menina-delicada.blogspot.com/

    ResponderExcluir
  17. Oi flor, seu blog esta no "cliquei e achei legal" do Senhoritas X.
    confira: http://senhoritasx.blogspot.com/2012/02/clique-e-achei-legal.html

    ResponderExcluir
  18. Hey linda ! Adorei seu blog, é muito lindo o desing e você sabe escrever os posts muito bem, parabéns. Já estou seguindo, e vou voltar sempre aqui. Se você quiser, faiz uma visitinha no meu blog ^^
    Beijos da Laari'

    http://theattitudepink.blogspot.com

    ResponderExcluir
  19. Fiz tudo direitinho, mas não deu certo.

    ResponderExcluir
  20. Amei muito , e eu acho seu blog muito lindo parabéns pelo sucesso !*
    http://princesinhafalsa.blogspot.com/ 

    ResponderExcluir
  21. lindo blog!!
    http://blogjustall.blogspot.com/ 

    ResponderExcluir
  22. amei o tutorial eu tava super atrás , parabens , ficou muito bem explicado
    http://perfeitinha-blog.blogspot.com/http://thaisr-encomendas.blogspot.com/

    ResponderExcluir
  23. Eu não canso de dizer que o cherry Bomb é o melhor blog de utilitários *-*
    Seguindo...
    Brigadinha por passar no Senhorita Perfeita
    http://www.senhoritaperfeita.blogspot.com

    ResponderExcluir
  24. Muito bom seu blog! 
    www.pinturadepalavras-139.blogspot.com

    ResponderExcluir
  25. Adorei este tutorial, no meu próximo lay terá este tuto.
    Adorei mesmo, super fácil e prático. Obrigado
    www.blogapenasmenina.blogspot.com

    ResponderExcluir
  26. oi diva *u*
     estou divulgando seu blog pois ele merece me ajudou muito =)
    bjuss bye 

    ResponderExcluir
  27. amei esse tutorial! sempre quis saber fzr isso!
    bjs

    http://sacheebombom.blogspot.com

    ResponderExcluir
  28. Oi fofa! Seguindo,segue de volta??
    Muito lindooo seu blog!
    Bjss
    http://leka2002.blogspot.com

    ResponderExcluir
  29. Meio complicadinho né? hahahaha Mais vou tentar fazer um dia desses! :D

    http://girlsrepublic-s2.blogspot.com/ 

    ResponderExcluir
  30. O meu nao deu, sera porque? Me ajuda Liah!

    Beijos!
    garota-unbroken.blogspot.com

    ResponderExcluir
  31. oi! amei tudo aqui *-*
    eu tentei esse tuto, amei! Mas eu queria colocalo a data bem do lado, com é a sua.
    eu entendi tudo que voce explicou e fiz tudo certinho. mas nao sei porque a data não vai para a esquerda, só para direita ><
    eu queria muito e não tá dando.. acho que é algo com meu lay ;/
    beijinhos

    ResponderExcluir
  32. o tutorial é ótimo, mais no meu blog não deu certo, apesar de ter feito tudo certo ;(

    www.garotascomplicadas.com

    ResponderExcluir
  33. Deu quase tudo certo. Já fiz e refiz umas mil vezes e não consigo colocar pra fora da área de postagem. Me ajuda por favor!!!

    http://nataliamedice.blogspot.com

    ResponderExcluir
  34. O meu não está funcionando. Já tentei fazer muitas e muitas vezes, mas parece que ele não aceita o código.. sei lá!
    Ajuda? =/

    http://blogskygalaxy.blogspot.com.br/

    ResponderExcluir
  35. ah :( não consegui ! mais tudo bem ! seu blog é fabuloso viu ? parabéns ! Dê uma passadinha lá http://www.mundodavick2000.blogspot.com !! tudo sobre tecnologia ♥ bjins tchau !

    ResponderExcluir
  36. Liah, eu não consegui fazer não
    Não sei se foi porq eu fiz algo errado ou sei láa. Pra quem conseguiu PARABÉNS !!
    teen-girl-luuh.blogspot.com

    ResponderExcluir
  37. Olá eu fiz mais não apareceu nada e uso o modelo viajem do blog,o blog apareceu normal mais a data não mudou será que é por causa do modelo que eu escolhi uma sidebar só,da uma olhadinha lá depois vc me fala bjoO!

    ResponderExcluir
  38. Oie amor.eu fiz mais no meu blog não aparece nada a data fik igual a que estava eu uso o template Travel não sei o que acontece?!
    S.O.S

    ResponderExcluir
  39. Gostei, venho aqui sempre. Meu blog está a Mil, e seus posts ajudam muito. (:

    ResponderExcluir
  40. adorei pena que naum consegui por no meu blog :(

    ResponderExcluir
  41. Não consegui :(((((
    mas gostava que ficasse assim....

    ResponderExcluir
  42. não consegui encontrar uma das linhas, oq faço?

    ResponderExcluir
  43. o meu deu mais ou menos certo, '-'
    O background não aparece D:

    ResponderExcluir
  44. muuito booa está dica ameii!
    vou tentar fazer no meu blog!

    http://adolescenteambulante.blogspot.com

    ResponderExcluir
  45. Liah, adoro o Cherry Bomb e seus tutoriais sempre me ajudam muito, já tentei várias vezes esse código, fiz e refiz e nada adiantou, não funciona! Não sei o que deu de errado. ): Se possível, poderia me ajudar?
    Desde já obrigada, e continue assim com blog maravilhoso. :]

    ResponderExcluir
  46. Adorei esse tutorial daqui, fazia um século que os que achava não conseguia.
    Usarei no próximo layout

    http://sejalivrevoe.blogspot.com.br/

    http://layanne-eduarda.blogspot.com.br/

    ResponderExcluir
  47. Estava procurando esse tutorial a muito tempo, ajudou muito, obrigado. *-*

    ResponderExcluir
  48. liaaaaaaaaah! não achei a ultima linha que tinha que pesquisar!

    ResponderExcluir
  49. Cherry Bomb! Estou fazendo editagens no blog e quero mudar a data e também pra aquela editagem de layout estilo revista precisa desta data mas algumas coisas não dão mais certo no blog e alguns dos códigos que vocês colocaram (o ultimo por exemplo) não funciona mais! -não existe- Peço a vocês para fazerem um novo post mais atualizado e correto pois tenho muita vontade de mudar isso no blog! Agradecida, Amanda Azevedo, Fica a Dicca http://ficaadiicca.blogspot.com.br/

    ResponderExcluir
  50. Liah, a data não aparece :( O que eu faço?

    ResponderExcluir
  51. Liah nao consigo fazer e muito dificil aquela parte que tem que ficar igual o seu o meu nao ficou:(

    ResponderExcluir
  52. Eu não consegui Liah!!!

    http://nicolli-tudinhoparameninas.blogspot.com.br/

    ResponderExcluir
  53. Oi Liah, bem eu também não consegui arrumar a data, mesmo com o layout que você disponibilizou - o delicate - ela não aparece, e eu já usava a data nesse formato que o lay pede. Acho que é porque o meu não aparece esse código: h2 class='date-header'></h2.

    Ajuda? Obg.

    ResponderExcluir
    Respostas
    1. O meu também não aparece esse codigo. No meu o h2 class é assim " h2 class=title'..."
      Já tentei substituir do mesmo jeito, mas não dá. (Na verdade o meu titulo não aparece data nenhuma e nao consigo arrumar nem por reza)
      Ajuda a gente Liah

      Excluir
    2. Corrigindo, a minha data no titulo**

      Excluir
  54. Não funcionou no meu mas pelo visto fica bem legal

    ResponderExcluir
  55. muito útil esse tutorial, eu estava mesmo precisando dele

    ResponderExcluir
  56. Consegui, funcionou direitinho!
    Pra quem não está conseguindo achar o < class='date-header'>, pelo menos no meu estava é só retirar e fazer tudo normalzinho! :)

    ResponderExcluir
  57. no meu template não tem , não deu certo :(

    ResponderExcluir
  58. hm não consegui achar o 4º html (n tem como cola-lo aki)

    ResponderExcluir
  59. Fiz e no meu deu tudo certinho.
    Gostei do tutorial.

    ResponderExcluir
  60. Adorei, serviu mt :)
    http://umagarottarocknroll.blogspot.com.br/

    ResponderExcluir
  61. Então, a data fica em cima do título... como faço para que ela fique do lado do título do post, mas fora da área de postagem, como o seu?

    ResponderExcluir
  62. Liah, obrigada por existir meu s2
    beijos obrigada pelo o tuto!
    Sempre arrasando

    ResponderExcluir
  63. Liah tenho um problema com o tuto eu consigo colocar os códigos direitinho mais a imagem aparece e a data não, será que você pode me ajudar com isso? Eu já tentei outros códigos mais nem a imagem aparecia, será que tem um problema com o modelo que eu uso ou coisa do tipo, me ajude por favor.

    ResponderExcluir
  64. Não deu certo. Eu refiz tudo direitinho e deu errado!

    ResponderExcluir
  65. Adorei o tutorial, foi o único que funcionou no meu, obrigada!

    ResponderExcluir
  66. Não conseguir fazer :/, acho que é porque sou burro mesmo kk

    ResponderExcluir
  67. Ah, eu queria que ficasse em cada postagem, mas tudo bem. O importante é que eu consegui

    ResponderExcluir
  68. Ah eu fiz, mas não ficou ao lado do titulo, ficou em cima e eu não consigo deixar alinhado. Mesmo quando jogo pra esquerda(fora da àrea de postagem,fica acima, e um espaço gigante entre o topo e o título. Eu adorei o tuto, só não gostei disso

    ResponderExcluir
  69. Gostei muito,consegui o que queria.Aos poucos vou melhorando. :D

    ResponderExcluir
  70. Esta dica eu estou colocando em pratica no meu blog estou sempre aqui.

    Samuel
    http://live-tim.blogspot.com

    ResponderExcluir
  71. No meu não tem essas palavras heart e várias outras como eu faço e pelo modelo ?

    ResponderExcluir
  72. Obrigada pela ajuda! :)
    http://babadodegala.blogspot.com.br/

    ResponderExcluir
  73. Dica super interessante, volta a postar
    Bjs
    http://eshopbelledujour.blogspot.com.br/

    ResponderExcluir
  74. ameei!
    to usando para criar um lay,ficou até bacana,mas é meu primeiro,poderia postar mais tutoriais assim!!

    ResponderExcluir
  75. O meu não teve muita coisa aí :o

    ResponderExcluir
  76. Legal :( pena que fechou o blog!

    http://blogdetestefurby.blogspot.com.br/

    ResponderExcluir
  77. aaaaaaah eu não consegui aparece isso "Não foi possível carregar a visualização do modelo: Erro ao analisar XML, linha 997, coluna 12: The content of elements must consist of well-formed character data or markup."
    Que triste :(

    ResponderExcluir
  78. No meu não deu certo :( Mas não tem problema :)
    http://teconteia.blogspot.com.br/
    Dão um olhadinha aíi :D

    ResponderExcluir
  79. Dica muito boa.
    Visite meu blog http://kworldofbooks.blogspot.com.br/

    ResponderExcluir
  80. Não deu certo, e ainda quando eu abro a minha página inicial fica escrito "Underfine" oque eu faço por favor
    http://chiclete-funny.blogspot.com.br/

    ResponderExcluir
  81. Nossa esse blog me ajudou muito com o meu blog, aos poucos aprendo uma coisa nova aqui ;)
    Obrigada...
    http://vemderosas.blogspot.com.br/

    ResponderExcluir
  82. Eu não consegui achar a 5ª coisa que vc pediu :/
    E Agora ????

    http://alessandradelimablog.blogspot.com/

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

      Excluir
  83. Este comentário foi removido pelo autor.

    ResponderExcluir
  84. Eu encontrei todos os códigos mais depois que salvei a imagem não apareceu :(

    ResponderExcluir
    Respostas
    1. Clicou na imagem que quiz com botão direito do mouse e "copiar o link da imagem"
      Se não fez, exprimenta.
      Bjs

      Excluir
  85. Qual é o link de uma imagem redonda, alguém sabe?
    Me responda por favor.

    Dei tudo certinho.

    ResponderExcluir
  86. Ebaa.. tinha tentado vários tutoriais, mas só o seu deu certo!! Obrigada!!
    Olha como ficou =)
    biancabiondi.com.br
    Beijosss

    ResponderExcluir
  87. Consegui colocar o template mas a data não aparece, somente a figura. Alguem pode ajudar?

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...