Personalizando a data do Blog

   

Olá meus amores :D
Faz tempo que eu não posto algum Tutorial não é mesmo ? Então hoje eu vim postar um Tutorial de como personalizar a data do Blog !
Então vamos lá:

 Vá no seu Painel e clique em Configurações e depois em Formatação.
 Selecione a opção como mostra no print abaixo:

                                 


  Salve as configurações e depois vá em:
 Design  > Editar HTML e marque a opção Expandir modelos de widgets.

 


  Aperte F3 ou Ctrl + F e procure por </head>
 Cole o seguinte código abaixo da tag procurada.

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

------------------------------------------------------------


Agora aperte Ctrl + F ou F3 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>

Logo abaixo da linha que você procurou cole isso:

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

Agora para terminar, procure por ]]></b:skin>
E Antes disso, cole o código a seguir:

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

width: 30px; /*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: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;

}

Visualize e se estiver tudo certo, Salve ! Se não deu certo, tente novamente e preste mais atenção !
Aqui estão algumas imagens que vocês podem usar como plano de fundo da data ... Copie o URL da imagem que você escolheu e substitua pela parte Rosa do código acima ↑

              

Os códigos eu peguei do Blog: Cherry Bomb! Então aqui está os devidos Créditos !

Super post não é mesmo ? Espero que tenha valido a pena & espero que vocês tenham gostado !

Beijinhos !