Data personalizada para Blogger + Caixinhas para data!

Geeente!
Vocês não tem noção do tanto que eu penei para personalizar a data do blog até achar esse tutorial!
Ou a caixinha onde fica a data aparecia cortada no meio depois que eu salvava o HTML, ou eu não achava os códigos do tutorial, cês nem imaginam.
MAAAS, finalmente achei um bem legal, e como sei como foi difícil achar, penso que muitas outras pessoas aí tem essa mesma dificuldade, por issor resolvi ensinar aqui como é que eu fiz! :3
O tuto não é difícil não, só é meio gigante, mas é só prestar bastante atenção que você faz sem dificuldades, prometo.
Olha, vou deixar aí no final do post algumas caixinhas para colocar a data. Tentei colocar caixinhas redondas que eu achei lindas no Strawberry on Top quando fui fazer mas não funcionou, para mim só funcionou caixinhas quadradas, então vou colocar as que provavelmente funcionarão.

1. É importante que sua data esteja neste modelo:

Aperte vá em Editar HTML e pressione CTRL + F

Na caixinha que abrir, procure por  </head>

Abaixo desse código, cole esse aqui:

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

Depois, procure pela primeira linha desse código:

<b:if cond='data:post.dateHeader'><h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if> 

Após isso, procure pelo seguinte código:

<h2 class='date-header'><span><data:post.dateHead

Talvez você encontre mais de um, então substitua todos que encontrar por esse:

<div id='fecha'>

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

</div> 

Para terminar, procure por ]]></b:skin> e quando achá-lo, cole acima dele esse aqui:

#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: -13px; /*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: 60px; /*Altura da imagem*/

width: 40px; /*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:12px; /*Tamanho da fonte*/

line-height:10px; /*Altura da Linha*/

text-transform:uppercase;

display:block;

}

.fecha_anio {

font-size:15px; /*Tamanho da fonte*/

line-height:17px; /*Altura da Linha*/

display:block;

}

Agora é só substituir onde está URL AQUI pelo URL da imagem da sua caixinha.
Eu adaptei os números para encaixar certinho no meu blog, mas você pode usá-lo sem mexer, se estiver bom no seu blog.

OBS: se você quiser a caixinha da data mais para a esquerda, diminua o valor de margin-left, e se quiser mais para a direita, aumente.

         

Aqui tem algumas caixinhas, não são minhas, achei elas em alguns blogs, caso sejam suas, fale nos comentários que ponho os devidos créditos.

É isso, beiijux!

Tutorial: Simplesmente Belinha