Data dos posts em formato calendário no blogge

1 - altere o formato da data vai em:





layout > postagens do blog clique em editar > Opções da página de postagem > coloque exemplo: 13 fevereiro 2013

ou

configuraçoes > idioma e formatação > coloque exemplo: 13 fevereiro 2013


2 - Procure Por:

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

3 - Substitua a linha:

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

4 - Por esta:

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

5 - abaixo de </head> insira o codigo abaixo:

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

6 - cole o codigo css abaixo acima de  ]]></b:skin>

/* Data
------------------------- */
#fecha {
color: #464646; /*---Edite a cor da data---*/
padding: 8px; /*--- margens internas da data---*/
margin-right:10px; /*---Margem externa direita---*/
background: #eee;  /*--- cor do fundo---*/
border: 4px solid #ccc;  /*---cor da borda---*/
float:left;
text-align:center;
list-style:none;
display: block;
-moz-border-radius:80px;
-webkit-border-radius:80px;
border-radius: 80px;
width: 30px ; 
height: 30px;
}
.fecha_dia {
display:block;
font-size:20px; /*---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;
}

By THECREATE

Gostou? Comente e Vire um Seguidor!!!