Tutorial n°7 - O maior da semana!

E o Tutorial mais esperado da semana é:tantantantaaaaan... Só depois dos comerciais!

Personalizar a data do blog: ele só é tão grande porque é cheio de códigos e regrinhas.

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:

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:

     

Bejucs.. tchudo do Cherry Bomb.