Tutorial: Personalizando a data do blog

Recebi alguns e-mails pedindo para que eu fizesse um tutorial, ensinando como personalizar a data do blog, colocando uma imagem de fundo. Como sempre digo, fico super feliz em receber pedidos de vocês e procuro atender o mais rápido possível. Peço para vocês que antes de me pedirem um tutorial, verifique se ele já não foi postado. Pois tenho recebido muitos pedidos de tutoriais que já publiquei. Use a ferramenta de busca do blog, ou vá na página de Tutoriais . Caso o tutorial que você deseja não tenha sido postado, ficarei feliz em atender o pedido de vocês. Então vamos lá ao tutorial do dia.

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.