Personalizando a Data
Vamos ao tutorial. Você deve prestar bastante
atenção, pois tem vários códigos. Faça com calma que você consegue.
Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Configurações" > "Idioma e formatação":
Mude o formato da
data para a penúltima opção:
Logo abaixo do trecho que você procurou, cole isso:
Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Configurações" > "Idioma e formatação":
Salve as alterações. Clique agora em "Modelo" no menu lateral. É
recomendável que você baixe uma cópia do seu modelo antes de prosseguir. Para
fazer isso, clique no botão "Fazer backup/Restaurar" e depois em "Fazer download
do modelo completo".
Depois de fazer download do seu modelo, clique no botão "Editar HTML" que
fica abaixo da miniatura do seu blog. Clique em prosseguir no aviso que
aparecer.
Marque a opção "Expandir modelos de widget":
Aperte Ctrl+F e procure por </head>
Logo abaixo disso, cole esse 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>
Logo abaixo do trecho que você procurou, cole isso:
<a expr:name='data:post.id'/>
Deve ficar assim:
Aperte Ctrl+F novamente e procure pela linha abaixo:
<h2 class='date-header'><data:post.dateHeader/></h2>
Provavelmente você irá encontrar mais de um desse código. Substitua todos que encontrar por esse código:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
Agora para finalizar, procure por ]]></b:skin>E acima disso, cole o código a seguir:
#fecha {
color: #464646; /*Edite a cor da data*/
padding-top: 5px; /*Margem interna superior da data*/
padding-right: 5px; /*Margem interna direira da data*/
padding-left: 5px; /*Margem interna esquerda da data*/
padding-bottom: 5px; /*Margem interna inferior da data*/
margin-right: -0px; /*Margem externa direita */
margin-left: -0px; /*Margem externa esquerda*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') no-repeat; /*Imagem de fundo*/
height: 30px; /*Altura da imagem*/
width: 30px; /*Largura da imagem*/
}
.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;
}
É nesse último código que você vai editar o estilo da data, colocar imagem
de fundo e alterar a fonte.
Se você quiser que a data fique para fora da área de postagens, você deve
aumentar os valores de "margin", que estão destacados em rosa. Se sua sidebar
ficar no lado direito, aumente o valor de margin-left, sem apagar o tracinho (-)
até que fique onde você quer. Agora se sua sidebar fica á esquerda, aumente o
valor de margin-right.
Visualize se está tudo certo e salve. Se não funcionar, limpe as alterações
e tente de novo com mais atenção. Abaixo tem algumas imagens para você usar como
plano de fundo da data:
Aperte Ctrl+F e procure por: <data:homeMsg/> Esse código vai aparecer em dois lugares, mas você só vai mexer no primeiro que aparecer.