domingo, abril 29, 2012

Personalizando a data da postagem

:D
Yo minna!
Esse é um tutorial muito útil que a maioria dos blogs hoje em dia usa;para ber o tutorial clique em Leia mais :)






Tutorial >_<
  1. No Blogger, vá em Configurações> Formatação> Formato da data.
2. Coloque um dos formatos abaixo:

3. Salve.
4. Agora vá em Design> Editar HTML. Marque a caixinha 'Expandir modelos de widgets':

5. Tecle Ctrl F e procure por:
</head>
6. Cole o código abaixo logo depois dessa tag:

<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>
7. Tecle Ctrl F novamente e procure por:

<b:if cond='data:post.dateHeader'>
8. Você vai achar esse código assim:

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


Cole o código abaixo logo depois do </b:if>:
<a expr:name='data:post.id'/>
E substitua o <h2 class='date-header'><data:post.dateHeader/></h2> pelo código abaixo:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
9. Tecle Ctrl F e procure por:
]]></b:skin>
10. Cole o código abaixo antes dessa tag:

#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Margens internas da data*/
margin-right:5px; /*Margem externa direita*/
float:left;
text-align:center;
border: 1px none #FFFFFF; /*Se quiser coloque borda*/
list-style:none;
display: block;
background: url('URL DA IMAGEM') no-repeat;
}
.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;
}
11. Edite o código de acordo com as instruções que estão nele e salve :)

0 comentários: