Colocando a data do lado do titulo do post no blogger

domingo, 25 de setembro de 2011

Colocando a data do lado do titulo do post no blogger

Nas maioria das templates a data vem sempre padrão em cima do post, hoje vou ensinar como modificar e colocar ela do lado do titulo do post. Você pode ver um exemplo no fim do post.

1- No painel do blogger vamos na aba "Configuração" > "Formatação" e em "Formato de data", escolha a penúltima opção. E depois clique em "Salvar Configurações" para salvar.

2- Agora vamos em "Design" > "Editar HTML" e clique em "Expandir modelos de widgets". Procure por:

</head>

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

2-Agora procure por:

]]></b:skin>

E acima cole o seguinte código:

#fecha {color: #a80000;padding-top: 2px; margin-right:5px;float:left;text-align:center;border: 1px none #dedede;list-style:none;display: block;}
.fecha_dia {display:block;font-size:18px; line-height:16px;font-family:'Arial';letter-spacing:-1px}
.fecha_mes {font-size:10px;line-height:9px;text-transform:uppercase;display:block;}
.fecha_anio {font-size:9px;line-height:8px;display:block;}

3- Agora vamos procurar por:

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

Apague todo o código acima e cole em seu lugar o seguinte código:

<b:if cond='data:post.dateHeader'>
<div class='date-header'><div id='fecha'><script>var ultimaFecha = '<data:post.dateHeader/>'</script>
<script>remplaza_fecha('<data:post.dateHeader/>')</script>
</div></div>
<b:else/>
<div class='date-header'>
<script>document.write(lastDate);</script>
</div>
</b:if>

Clique em "Salvar modelo" e a modificação já está instalada. Você pode colocar uma imagem de fundo, trocando o código:

#fecha {color: #a80000;padding-top: 2px; margin-right:5px;float:left;text-align:center;border: 1px none #dedede;list-style:none;display: block;}

Por:

#fecha {background: url(URL DA IMAGEM) no-repeat;color: #a80000;padding-top: 2px; margin-right:5px;float:left;text-align:center;border: 1px none #dedede;list-style:none;display: block;}

Para trocar a cor do texto, mude a parte selecionada em LARANJA no código da parte 2, e para adicionar uma borda, troque a parte selecionada em AZUL, na parte 2, por "solid", sem aspas.