Data no blog costumizada

Vou ensinar como se modificar o layot da data que temos no Blogger, para ficar assim como a que tenho aqui, mas é claro, no seu blog, ficará com o fundo que você escolher.

O primeiro passo é clicar em "Configurações"

Agora clique em "Formatação e depois clique na seta ao lado do "Formato da data", para abrir a tabela, conforme mostra a imagem abaixo. Clique na opção mostrada na imagem abaixo e depois salve.

Clique em "Modelo" e depois em "Editar HTML", procure pelo código:

]]></b:skin

e ABAIXO dele, cole o código:

<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(mes+dia);
}
</script>

Clique em Salvar.

Agora clique em "Expandir Modelos de Windgets", procure pelo código:

<data:post.dateHeader/>

e substitua pelo código abaixo:

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

Se você quer que a data apareça em todos os posts, coloque o código abaixo:

<b:if cond='data:post.dateHeader'> <h2 class='date-header'><div id='fecha'><script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div></h2>
<b:else/>
<h2 class='date-header'><div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script><script>remplaza_fecha(ultimaFecha);</script></div></h2>
</b:if>

Procure por:

]]></b:skin>




E cole acima todo o código abaixo, fazendo suas substituições. (Em verde cor da letra, em vermelho endereço de sua imagem, em azul, cor da borda)

#fecha {
height: 60px;
width: 60px;
background: #fff;
border: 2px solid #000;
color: #808080;
text-align: center;
padding: 0 2px 0 0;
line-height: 100%;
float: left;
}
.fecha_dia {
display: block;
font-size: 18px;
font-weight:bold;
}
.fecha_mes {
height: 16px;
display: block;
font: normal 11px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
padding-top: 3px;
}
.fecha_anio {
display: block;
font-size: 10px;
}

Créditos: Blog and Web