Image Map

Personalizar a data do post

|
Tumblr_li6bkk6g6l1qdwdzao1_500_large
Hoje vou ensinar pra vocês a como colocar a data da postagem, bem parecida com a nossa.É bem simples, mas requer que vocês prestem muita atenção com os códigos ok?Ela ficará mais ou menos assim: 
Clique em Leia o resto da Postagem pra ver o tutorial. 
1- Vá até Configurações > Formatação > Formato da Data > 20 Dezembro 2011
(Essa é a data de hoje. Por isso, se você estiver fazendo esse tutorial em outro dia, ela vai estar diferente. Mas o importante é o formato Dia Mês Ano.) Assim como mostra a imagem ao lado. 


2- Agora vá em Design, Editar HTML, Aperte CTRL+F (Ou F3) e procure por: </head>
E logo ABAIXO 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"

Aperte CTRL+F ou F3 e procure por:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Logo ABAIXO dele, acrescente o código:
<a expr:name='data:post.id'/>
Agora procure por:
<h2 class='date-header'><data:post.dateHeader/></h2>
e substitua por:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
4- Procure por ]]></b:skin> e logo ACIMA cole:

#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:-8px; /*Margem externa direita*/
margin-top: -76px;
float:right;
text-align:center;
list-style:none;
display: block;
background-color: #FFFFFF;
border-left: solid 3px #CA9ED8;
border-right: solid 3px #CA9ED8;
border-top: solid 3px #CA9ED8;
border-bottom: solid 3px #CA9ED8;
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Tahoma';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:11px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:15px; /*Altura da Linha*/
display:block;
}
Agora vamos personalizar! Altere #FFFFFF pela cor que você quer o fundo da data. Altere todos os #CA9ED8 pela cor da borda da sua data. E altere #464646 pela cor que você quer a data.
Prontinho! Sua data estará pronta. Mas caso ela tenha ficado ''bagunçada'', é só você alterar os valores de " margin-right " e " margin-top ".
Ficou bem grandinho né gente? >< Aprendemos esse tutorial no blog Menina Nerd, mas fizemos algumas alterações no ultimo código... portanto, créditos pra mim e pra ele ok?  Qualquer dúvida é só perguntar! 

46 comentários:

Chiquissimas // Oficial disse...

Nossa, adorei o tuto.
O resultado é lindo demais *-*

Beijos
Chiquissimas.blogspot.com

Anônimo disse...

Adorei a dica.


Começou o sorteio de Natal, corra lá no blog e participe.

Beijooos
www.idfashion.com.br
@blogidfashion

Andreza Hoffmann disse...

olá flor, salvei muitos brushes! amei, coloquei em uma pasta separada com o nome do seu blog, quando eu usar deixo créditos,adoro seu blog, em breve vou dar uma olhadinha nos tutoriais, agora estou mt ocupada, vou me desativar do blog e tals ^^ SUCESSO PRO SEU BLOG, ele está cada vez melhor.. beijos! http://dezahoffmannmoda.blogspot.com/

Isabel Gusmão disse...

Que bacana, muito útil *-*

www.caprichando.com

Maaria Eduarda Andraade disse...

amei !

Larissa disse...

Eu queria muito esse tuto,haha Vou fazer em breve,haha
Kissus!

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

Marcinha disse...

assim q eu chegar da igreja vou fazer, amei, estava aguardando esse tutorial, pode perceber que lá no blog os posts estão sem data :/
O blog tá cada vez melhor *-*
Beijoo
The Diary of Teens

Dani Ribeiro disse...

Ótimo tutorial! Muito bom mesmo. Amor, gostaria de saber se aceita afiliação com meu blog. Mil beijos! :*

onthefame.blogspot.com

Andreza Hoffmann disse...

Olá, obrigado pelos comentários, volte sempre, ja tenho novo post no meu cantinho! XOXOXO'

http://dezahoffmannmoda.blogspot.com/
Tem twitter? @DezaHoffmann (sigo de volta!)

Isabela Godoy disse...

Gostei do tuto, mas não uso data lá no blog, rs.
Beijos!
http://tendencias-teens.tk - Tem post novo, não esqueça de comentar e de votar no seu blog favorito na enquete da barra lateral!

Fernanda Zucolotto disse...

Adorei o tutorial, não uso data também, mas vou ver se ponho pra ficar mais organizado.

Beijos ;3
meianoiteequinze.blogspot.com

Lidi disse...

Ótimo tutorial!!! Valeu por avisar, já salvei os brushes e identifiquei, qdo usar te aviso e dou os créditos, claro =D

Bjão!

http://seguindotendencias.blogspot.com

Ao alcance da moda disse...

Primeiramente, amei seu blog , suas postagens , k
Queria que você retribuísse o mesmo carinho, Obrigada !


http://aoalcancedamoda.blogspot.com/

Lívia.S disse...

Amo blogs que fazem tutoriais, que pena quem sou meio travada pra essas coisas de layout, então eu não faço, beijos feliz natal passa la!
http://friends-friendsprasempre.blogspot.com

Mary.S disse...

Oi, passei aqui e gostei muito do seu blog seguindo, bjos!
da uma passadinha la? segue?
http://espacodamary-morena.blogspot.com/

Dani Ribeiro disse...

Já coloquei o Other Things Attitude Included nos meus afiliados, vou esperar vocês colocarem também! :3

Tem novo layout no blog, amor! onthefame.tk

Anny S. disse...

Adorei o tutorial, muuito bom mesmo (:

Já te coloquei nas afiliações ta amr? Beeijos :* Tem post novo lá, comenta?

Sabrina Machado - Mundo da Moda disse...

Hooy lindona *o*
obrigada pela atenção de ter colocado nos afiliados, amei o tuto :D

Blog Mundo da Moda | Twitter

Bye bye♥

Luciana Gomes disse...

Olá, querida! Passando pra conhecer o seu cantinho... Adorei, muito legal. Já to seguindo!
Aproveito p te convidar a conhecer o Vou-de-Blog e informar q a partir de janeiro teremos uma promo somente pra blogs parceiros. Junte-se a nós e divulgue o seu blog. Dá uma lidinha nas regras de parceria: http://www.voudeblog.com/p/anuncie-aqui.html

Bjinhos e um Natal de muita Paz p vc e sua família.
Lu
www.voudeblog.com

Eduardo Felipe disse...

Oi, Tudo bem? Estou aqui para te desejar um feliz natal, e que esse 2012 seja repleto de alegria!
Volte sempre ao Teen Thoughts!
Sua visita sempre será bem vinda.

http://construtordepensamentos.blogspot.com

Anônimo disse...

Só passei para desejar um Feliz natal!
Visite nosso Web Show! Você vai se divertir, isso você pode ter certeza!!! hehe*
itcrazyshow.blogspot.com

Dani Ribeiro disse...

Quando vai ter o próximo tutorial? Os tutoriais daqui sempre me ajudam. Gostaria de pedir que me colocassem nos afiliados, pois eu já coloquei o OTAI no meu blog :)

As votações do concurso começaram. Peça seus votos ou vote no seu blog preferido! :3

Beijos, onthefame.blogspot.com

Isabela Godoy disse...

Oi Ana... Então, eu tb era afiliada e não estou ai, poderia me colocar ? (: obg :*

Marcinha disse...

Flor, aceita afiliação? o.o
Aguardo resposta <3
Bjss
TDiaryofteens.net.tc

Newsdayoff disse...

Muito bom o tutorial, vou usar no novo modelo do meu blog *-*

http://newsdayoff.tk/

dribs disse...

Tutorial bem feito. Afinal, você é ou não maga do html? *o*
Flor, aceita afiliação? Diz que sim, diz que sim. :D
Blog | Blog Pessoal | Encomendas

Marcinha disse...

prontinho, coloquei seu link, muito obrigada por aceitar >< beijoo
TDiaryofteens.blogspot.com

Red Lisptick disse...

eei gente *-* desculpa meu sumiço é que eu tava sem internet mais passei aqui (atrasada) mais to vindo desejar um otimo fim de ano e que 2012 possa ser o melhor ano da vida de vocês *-*
xoxo;* @ItsLooh

www.furadateen2.blogspot.com

Paloma Viricio disse...

Ameii flor! Os Brushes são lindos!Estou seguindo...se puder me segue tbm!Confira o sorteio de marcadores no meu blog!Beijos!
http://palomaviricio.blogspot.com

Ana e Júlia!! disse...

Fofa,ajudou muito.Estou seguindo!Segue também???

http://coisasdeparty.blogspot.com/

Bia disse...

Num consigui naum,o meu template não tem estes códigos ai,alguns né,faze oq né.o modelo dele é travel,certinhu;0
http://blog-da-byaa.blogspot.com

Paula Araújo;* disse...

você faz layouts completo?

http://blog-dreamygirl.blogspot.com
@paulafonseeca

isabella disse...

Usei *-* http://innocenceofamind.blogspot.com/

Carol Oliveira disse...

Não consegui, mudei os códigos certinho mas não foi :( E olha que eu tentei umas 3 vezes... O que será que aconteceu? Acho essa data tão fofa, queria muito colocar.

muggle-world.blogspot.com

Rachelli Carpaneda disse...

Tive dificuldades em encontrar os códigos, e quando fui salvar não deu certo. :[
Mesmo assim, obrigada pelo tuto.

Um beijão!

Maísa Gabriela disse...

Pegueeeeeeei Liinda
http://www.replaygirl.blogspot.com
Obrigada por me ajudar tanto!

Nathalia disse...

Que legal adorei o tuto vou usar no meu blog obg.

Vicky ♡ disse...

não consegui :(

Eline Carla - Beleza Ruiva Blog disse...

Usei e deu certo, amei o tutorial flor !!! http://lustforagirl.blogspot.com.br/

Maria Eduarda Botelho de Souza disse...

Obrigada.....post bem utilidário!
bjss

Anônimo disse...

Outro que não consigo! Os códigos não aparecem no editor de HTML :(

Bárbara disse...

Não consegui, mas queria muito fazer ;/

O meu tem 2 códigos iguais e quando eu coloco modo visualizar, aparece tudo pequenininho igual uma formiga o negocinho de data. Me ajuda?

Obrigada
Bjs
Bárbara
www.sanschocolat.blogspot.com

- disse...

Usando, e creditando ;p

Beijos, Kawaii Colors

Unknown disse...

Carolina,tenta procurar só a primeira linha do códigos que não consegue.no meu tentei isso e achei,mas não foi :// qq eu faço gente?

Yasmin Ribeiro disse...

Oiii vo usar no meu prómixo lay :)
e....
Que tal um layout personalizado? Vem participar do sorteio em parceria com o blog já passou do tempo! Valendo um layout lindo e delicado! Com 2 modelos de cabeçalho a sua escolha flor! Que tal?
Ta curiosa então visita ai e saiba mais!
sweetsecretfantasy.blogspot.com.br/2012/12/sorteio-de-natal.html
beijus

Unknown disse...

mais um post UTIL.