Tutorial - Como personalizar a data do blogger

Primeiro vamos fazer algumas mudanças para que funcione corretamente.

Vá no painel do blog, CONFIGURAÇÕES,  IDIOMA E FORMATAÇÃO e faça as seguintes alterações na data e hora de seu blog:

Agora vamos adicionar os códigos ao HTML do seu modelo.

Vá em MODELO, EDITAR HTML e procure por :

</head>

 abaixo cole o seguinte 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>

e abaixo desse código, cole mais esse

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

Agora procure por:

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

Substitua o trecho encontrado por esse:

 <div id='fecha'>

<script>remplaza_fecha('<data:post.dateHeader/>');</script>

</div>

E agora por fim, procure por :

]]></b:skin> e cole o código abaixo:

/* INICIO DATA BLOG */ #fecha { color: #ffffff; /* COR DA FONTE DATA*/ padding-top: 5px; /*MARGEM SUPERIOR*/ padding-right: 15px; /*MARGEM DIREITA*/ padding-left: 25px; /*MARGEM ESQUERDA*/ padding-bottom: 5px; /*MARGEM INFERIOR*/ margin-right: -0px; /*MARGEM DIREITA */ margin-left: -0px; /*MARGEM EXTERNA DA ESQUERDA*/ float:left; text-align:center; border: 1px none #cccaca; /*BORDA*/ list-style:none; display: block; background: url('ENDEREÇO DA IMAGEM DA DATA') no-repeat; height: 76px; /*ALURA DA IMAGEM DA DATA*/ width: 66px; /*LARGURA DA IMAGEM DA DATA*/ } .fecha_dia { display:block; font-size:22px; /*TAMANHO DA FONTE*/ line-height:16px; /*ALTURA DA LINHA*/ font-family:'Arial'; letter-spacing:-1px } .fecha_mes { font-size:12px; /*TAMANHO DA FONTE*/ line-height:9px; /*ALTURA DA LINHA*/ text-transform:uppercase; display:block; } .fecha_anio { font-size:14px; /*TAMANHO DA FONTE*/ line-height:8px; /*ALTURA DA LINHA*/ display:block; }

Não esqueça de fazer as alterações no código.

Aqui tem alguns modelos para personalização da data do seu blog: