Nossa, fazia tempo que eu não postava um tutorial, né? Me desculpem por isso. Hoje, com ajuda desse tutorial do Templates Para você, vou ensinar como colocar a data do seu blog parecido com o do MN.
Eu disse "parecido" porque no MN a data fica pra fora da área do post, e explicar como eu fiz isso seria impossível muito difícil. Então, no seu blog, a data ficará ao lado do título do post, pode ser? Só mais uma coisa: esse tutorial vai mexer com vários códigos, portanto, faça as modificações com calma e prestando bastante atenção. Só por precaução, faça o download do seu modelo atual.
1. Vá em Configurações > Formatação > Formato da data e escolha a opção "20 Março 2011", como mostra a imagem ao lado (clique para ampliar). Depois vá até o final da página e salve as configurações.
Obs.: Essa é a data de hoje avá. Em outro dia a data vai estar diferente avá. Então o importante é só que esteja nesse formato (dia mês ano).
2. Agora vá em Design, depois em Editar HTML, dê Ctrl + F e procure por:
</head>
e logo ABAIXO dele cole:
<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>
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>
Salve as alterações.
3. Agora marque a caixinha "expandir modelos de widgets"
Dê Ctrl + F e procure pelo seguinte código:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
pra facilitar a sua busca procure só pela primeira linha.<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
e logo ABAIXO dele acrescente:
<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>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
4. Agora é o último código! Procure por:
]]></b:skin>
e ACIMA dele cole:
#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:5px; /*Margem externa direita*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') 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;
}
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:5px; /*Margem externa direita*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') 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;
}
0 comentários | Deixe seu comentário.: