Personalize a data da postagem

Nossa, fazia tempo que eu não postava um tutorial, né? Me desculpem por isso. Hoje, com ajuda desse tutorial do Templates Para você, vou ensinar como colocar a data do seu blog parecido com o do MN.


Eu disse "parecido" porque no MN a data fica pra fora da área do post, e explicar como eu fiz isso seria impossível muito difícil. Então, no seu blog, a data ficará ao lado do título do post, pode ser? Só mais uma coisa: esse tutorial vai mexer com vários códigos, portanto, faça as modificações com calma e prestando bastante atenção. Só por precaução, faça o download do seu modelo atual.




1. Vá em Configurações > Formatação > Formato da data e escolha a opção "20 Março 2011", como mostra a imagem ao lado (clique para ampliar). Depois vá até o final da página e salve as configurações.

Obs.: Essa é a data de hoje avá. Em outro dia a data vai estar diferente avá. Então o importante é só que esteja nesse formato (dia mês ano). 


2. Agora vá em Design, depois em Editar HTML, dê Ctrl + F e procure por:

</head>

e logo ABAIXO dele cole:

<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>


Salve as alterações.

3. Agora marque a caixinha "expandir modelos de widgets"

Dê Ctrl + F e procure pelo seguinte código:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
pra facilitar a sua busca procure só pela primeira linha.

e logo ABAIXO dele acrescente:

<a expr:name='data:post.id'/>

Agora substitua essa linha:
<h2 class='date-header'><data:post.dateHeader/></h2>

por esse código:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

4. Agora é o último código! Procure por:

]]></b:skin>

e ACIMA dele cole:

#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:5px; /*Margem externa direita*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') no-repeat;
}
.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;
}

Se quiser colocar uma imagem de fundo substitua URL AQUI pelo endereço da sua imagem.

Espero que tenha gostado. Qualquer dúvida é só comentar. Beijos.

76 comentários:

Anônimo disse...

Nossa, super legal bem explicado, estou passando por reforma no meu blog, e graças a esse lindo e bem explicado tutorial, eu deixarei ele meio que perfã *-*

Anônimo disse...

Eu não estou conseguindo achar o segundo código, #eagora?

Anônimo disse...

Aleluuuia, achei o código, [eee]

Dassa disse...

nussa seu blog é super
veja o meu tbm :D
to começando agora .
http://gotasdechuva10.blogspot.com/

Dry Lima disse...

Oi AMO seu blog, ele me ajuda muito haha *-*
Perfeito *-*
Eu queria saber como você colocou aquele banner de propaganda lá em cima, acima do seu banner, eu queria muito saber. Eu tentei já de tudo e quando deu certo, ficava aparecendo as colunas no fundo sabe?
Você poderia me ajudar?
Muito obrigada.
Beijos,

www.paradiisegirls.com

Profano Feminino disse...

Adorei o post, faz tempo que estou tentando mudar a data, achei varias tutorais mais nenhum deu certo. Vou tentar esse tomara que de certo ^^

http://www.profanofeminino.com/

Anônimo disse...

Adorei o tutorial, já tentei por outros mas nunca dava certo, obrigada!

Brenda Palma disse...

Olá flor!
Eu adorei e conseguir, ficou legal...
Ah quero saber como colocar essas imagens nos marcadores, quando der você ensina pra gente?

Beijos
http://tudodmenina.blogspot.com

Francelle Machado disse...

Maais um post ótimo e super útil para toodas as blogueiras!! Adoooro seu bloguinho querida,e o novo lay está perfeeeito...\Õ/

Kisses
http://backstreetmorgan.blogspot.com

Anônimo disse...

fiz no meeu blog e ficou muito perfeito !

Luh Siglindes disse...

Eu amo esse blog ! ta cada vez melhor e lindo .
aceita parceria ? http://fashionscream.blogspot.com/

Anônimo disse...

Adorei o tutorial , *-* logo logo vou testar *o*

Gab disse...

Adorei o tutorial, vou testar!

Retribui?
Beijinhos =*
www.fanaticospornoticia.tk

Ella disse...

O GD está em reforma, e voltará em breve com mts novidades, uma delas é a EliteAfiliados. Bem, estou selecionando alguns blogs que eu amo e acompanho para fazerem parte, e o MN é um deles. act fazer parte? Me responda por e-mail, assim que possível. (giovannadieguez@hotmail.com), obrigada!
Beijos e desculpe o imenso comentário!
destemidagarota.blogspot.com

Ana Luiza disse...

Amor,você me mandou pelo msn,lembra?! Consegui colocar,mas acontece que ficou encima da postagem *o*
http://voceealergicoasonhar.blogspot.com

Alice disse...

Oi querida! Quanto tempo...

Aqui, teria como você fazer um post explicando como colocar imagens do lado das categorias? Não achei explicando em lugar nenhum! =(

Beeijãão
http://biquinhos.blogspot.com

A M A N DA M O N TT disse...

awwn amei o tutorial ! logo Ru testo ^^'
Muito lindo seu blog , te segui ! Me segue tb? :D
Beeijos
mush

fanjjiteen.blogspot.com

Viviane disse...

Adorei o tutorial, super explicadinho, perfeito! Pra falar a verdade, adoro aqui! Uma pergunta, como vc fez a barra de pesquisa personalizada? Beijos *-*

Anônimo disse...

Me ajudou muito muié!
Adorei.
http://garotasnasruas.blogspot.com/

The Place - Mah disse...

Oii! Amei seu Blog, estou seguindo! E acabei de criar o meu. Visita e se gostar segue? Beijo, Mah
www.theplacemah.blogspot.com

Yuuki Kirkland disse...

Euamoosseustutoss, ajudam mto a gente!
Mee ajuda a divulgar a minha Web Novela? Chama Cair da Noite :) Agradeçoo e ajudo a divulgar o seu tbm
http://historiacairdanoite.blogspot.com

.Scarlat disse...

Seeguiindo aqui! Me segue? http://www.siteshoow.com/
Ameeei aqui!

Luiza Santos disse...

Não deu certo :(

Andreza disse...

Que pena Luiza :/ Tem certeza que fez tudo certinho?

Alice Monteiro disse...

Oi! Estou seguindo, segue de volta e retribui o comentário? hehe, beijão! s2

E a propósito, ameei o nome, o layout, tudo no blog está lindo s2 *-*

www.blog-da-alice-estrela-cadente.blogspot.com

Barbara disse...

Seu blog é incrivel,
seu q ja deve ter escutado varios comentarios desse tipo pq é realmente d+, mas mesmo assim!
Parabens por ter um blog tao perfeito!
I love Menina Nerd =)
http://blogportalteen.blogspot.com

Anônimo disse...

Oii :]
Ameei o seu blog, já to seguindo!
Segue e meu tbm?

www.poemasdamarii.blogspot.com e
www.tortadegarota.blogspot.com

*kisskiss* ≈Mαrii.

Erica Lima disse...

Eu esta fazendo pelo internet explorer e não tava conseguindo visualizar, salve e mudei de navegador. funcionoou obrigada *-----*
OBS: pelo internet explorer não aparece

http://garotasederivados.blogspot.com/

Hellen disse...

tem selinho pra vc! http://cantoseencantosdahellen.blogspot.com/p/awards-e-selinhos.html

Nathália de Siqueira disse...

ai amei seu blog mesmo ele muito perefito o lay o conteúdo e tudo mais, eu tô seguindo seu blog tô deixando o linke do meu se gostar segue:www.blog-nath-n.blogspot.com bjsss!

Mariana C. disse...

Oii, gostaria de saber, como fasso para me Afiliar com o seu Blog ?
Sei que as Vagas já acabaram, mas, eu tinha pedido uma vez na Postagem que você colocava o URL do Blog, você visitava e Dizia se Aceitava ou Não. Gostaria de saber se você Aceita ?? ^^
Se você não quiser eu vou entender. ^^

http://maariihsouza.blogspot.com/

Mariana C. disse...

Obrigada pela compreensão !! ^^

Jo Moura disse...

Olá eu fiz isso no meu blog,ficou legal,mais vou pedir a vc que depois com calma vc faça um tutorial igual a sua data e como faz pra deixar o banner tipo o seu(que parece que foi recortado)bjo ameiiii o blog já tow seguindo,descobri hoje e ñ largo mais daqui!!

luana disse...

oie segue meu blog que eu siigo o seu .bjs

Lílian Elen , Isadora Suassuna disse...

Ameey!

http://www.megateensbr.blogspot.com/

LUANA ANDRADE disse...

nao funcionou !
;X

Nathanny disse...

O meu até funcionou, mas ficou em cima do título e não do lado. Como faço? :/

www.justnatha.blogspot.com

Babi disse...

Parabéns pelo tuto mas queria te perguntar se tem como fazer uma data tipo essa aqui do coisinhas de blog:

http://www.coisinhasdeblog.com.br/

só com o dia e o mês

entra e responde please?

http://arts-babi.blogspot.com/

Babi disse...

Ah o meu ficou assim:

QUARTA-FEIRA
30
de

O que eu faço?

Maria disse...

D++ *---* funcionou! ~dançaa~ Obrigada ^^ adoro aqq :*

Anônimo disse...

eU NÃO ACHO

help!
http://styleteensnews.blogspot.com

Anônimo disse...

aaaaaah.. no meu só aparece o ano, o mês e o dia não..
help

bjs

http://styleteensnews.blogspot.com

Rafah - Rááh - Sah disse...

Oie , o meu não deu certo , porque é diferente os lugares onde clika , o meu tem coisas estranhas (tô começando agora )

Rafah - Rááh - Sah disse...

wwwetcvariascoisas.blogspot.com

Mari disse...

ficou encima do titúlo e o plano de fundo não deu certo :S ajuda?

Mari disse...

o q eu coloco em: *Altere as margens internas da data*/, *Margem externa direita*/...? Não sei essas coisas :S:S

Helena Nunes disse...

Amei todos os tutoriais! Me ajudaram muito na reforma do meu blog. Muito obrigada mesmo. O seu blog é tudo de bom e mais um pouco hihi

http://heleninhanunes.blogspot.com

Natasha disse...

Não deu certo ;/

Unknown disse...

não deu certo, :s
Bjs
jornalfemininonet.blogspot.com

Princesa Marrenta disse...
Este comentário foi removido pelo autor.
Princesa Marrenta disse...

Oi vlw deu certo . Acessem larissafeitosaa.blogspot.com

Anônimo disse...

Muito obrigada, adorei!

Anônimo disse...

Segue Andreza?Já estou seguindo o seu!
http://garotassuperfashions.blogspot.com/

Thamíris disse...

Andreza, meu blog tem a largura menor eu acho, porque essa parte que no seu é roxa, fica em cima das minhas colunas. Como faço para diminuir?
Me responde pleaaaaaaase: dezoitovoltas.blogspot.com

Thamíris disse...

OBS: Eu to falando da área de comentários. )):

Andreza disse...

@Thamíris - Nossa, que estranho >< Vou tentar descobrir amr, quando souber eu te falo, beeijos

Thaís Lima Fotografias e Design disse...

Não deu certo, será pq?? me ajuda?? =/

www.thaisllima.blogspot.com

Docinho . disse...

Não funciona cmg ç_ç

fooreveraloone.blogspot.com

Geez disse...

não funciona no modelo Viagem ?

Mariana Vieira disse...

Fiz tudo certinho e deu certo só que só aparece no primeiro post, nos outros não aparece :/

Duda Mathuz disse...

o mmeu ñ pegou :S

Maandy disse...

ooi .
sou nova no blogger eentão vc pode dar uma olhadinha no meu blog e comentar o que estar faltando no desing ?
http://sweetgirlc2.blogspot.com/
ooobg ;*

Anônimo disse...

Não consegui! Triste!!!!
Vou tentar de novo...

Fernanda Daher disse...

Bom, eu fiz exatamente do jeito que você disse e não mudou absolutamente NADA. snif snif =/ isso sempre acontece. Não dá erro, mas também não dá nenhum sinal que deu certo. Porque?

PS: Seu blog é perfeito e ajuda muuuuuuuito, parabéens *-*
KISSES ;*

Anônimo disse...

Tentei de novo e não deu! Bua!!! Tou triste, já é o segundo tutorial do MN que eu não consegui fazer. Eu fiz exatamente o que falou e não mudou nada

nicole disse...

não deu certo!

Nete disse...

Deu certo! E eu descobri como colocar a data "pra fora". Ficou um amor.

Sônia Pessoa disse...

O meu nao aparece 20 de março oqe eu faço? *0*

Rodrigo Sousa disse...

Ola menina nerd, o meu deu muito certo so que nao consegui colocar do lado do titulo, mas sim antes do mesmo, por favor me mostre como fazer isso...(rodrigofrcs@hotmail.com)muito obrigado!

Unknown disse...

Não consegui, não achei o codigo do passo três.Que pena!
AA, queria tanto fazer isso no meu blog, acho tão mais fofo a data assim... bubu

Giulia F. Ferreira disse...

Não deu certo, buáááá...

Le Blog da Caah disse...

Não estou conseguindo... tem uma parte que não entendo o que você quer dizer :X

Danúbia Domingos disse...

o meu não tem essa linha:


<*h2 class='date-header'><*data:post.dateHeader/><*/h2>

me mostra onde é?

Danúbia Domingos disse...

o meu não consigo achar o passo 3 :(

Cavaleiro Apocaliptico disse...

posts do mesmo dia não repetem a data; tentei todos tutoriais da internet nenhum funcionou.

Attitude Included disse...

Deu certinho :)
Beijos,
www.theattitudeincluded.blogspot.com