Tutorial Duplo - Personalizar a Data

Yoo ~

Trouxe um tutorial, ou melhor dois, que a Nicka pediu, na realidade ela pediu só um, mas estou trazendo dois só pra prevenir. Os dois tutoriais, são de como personalizar a data, no primeiro a data, fica para fora do corpo da postagem, e com uma imagem como fundo, aqui está um exemplo :

1 - Vá em Configurações > Idioma e formatação > Formato de data, e modifique como na imagem abaixo :

2 - Vá em Modelo > Editar HTML,e clique em um quadradinho, onde está escrito Expandir modelos de widgets, tecle F3 e procure por :

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

3 - Se você encontrar dois códigos desse, vá no segundo, quando encontrado, apague todo o código acima, e substitua por esse :

  <div id='Data'>
<script>trocarData(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Data'>
<script>trocarData(&#39;&#39;);</script>
</div>

4 - Procure por  </head>, e acima desse código cole esses :

<script type='text/javascript'>

//<![CDATA[var DataCalendario;function trocarData(d){if (d == "") {d = DataaCalendario;}var da = d.split(' ');dia = "<strong class='data_dia'>"+da[0]+"</strong>";mes = "<strong class='data_mes'>"+da[1].slice(0,3)+"</strong>";ano = "<strong class='data_ano'>"+da[2]+"</strong>";
document.write(mes+dia+ano);DataCalendario = d;}//]]></script>

<style type='text/css'>
/* Data tipo calendario
----------------------------------------------- */
#Data {
background: transparent url(URL da imagem) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.data_mes {
display: block;
font-size: 15px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-1px;
text-align:center;
color:#ffc4f4; /* Cor do mês */
}

.data_dia {
display: block;
font-size: 28px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do dia */
}

.data_ano {
display: block;
font-size: 10px; /* Tamanho da fonte */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do ano */
}
</style>
</b:if>
.data_mes {
display: block;
font-size: 15px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-1px;
text-align:center;
color:#ffc4f4; /* Cor do mês */
}
.data_dia {
display: block;
font-size: 28px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do dia */
}

.data_ano {
display: block;
font-size: 10px; /* Tamanho da fonte */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do ano */
}
</style>
</b:if>
.data_dia {
display: block;
font-size: 28px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do dia */
}
.data_ano {
display: block;
font-size: 10px; /* Tamanho da fonte */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do ano */
}
</style>
</b:if>
.data_ano {
display: block;
font-size: 10px; /* Tamanho da fonte */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do ano */
}
</style>
</b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

5 - Modifique o código:

 background: transparent url(URL da imagem) no-repeat;=Acrescente o endereço da imagem que você irá usar como plano de fundo da data ou não acrescente nada para aparecer só o texto. 

width:60px e height:60px= Altere os números de acordo com o tamanho da imagem de plano de fundo.

float: left= posição esquerda ou direita (right).

margin: 5px 2px 0 -70px= Altere -70px por 0px se quiser que a data apareça dentro da postagem ou altere -70px para outros números posicionando a data para mais perto ou mais longe das postagens.

6 - Visualize se deu tudo certo e salve !

Aqui estão algumas imagens que vocês podem usar:

      

      

Créditos: Kawaii World

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Agora, com vocês o segundo tutorial, ele é um pouco mais fácil, e fui eu que o criei ** aplausos para mim **, a data fica pra fora do corpo da postagem, com um fundo de uma imagem, ele é um pouco diferente. Um exemplo de como ele irá ficar :

1 - Vá em Configurações > Idioma e formatação > Formato de data, e modifique como na imagem abaixo :

2 - Vá em Modelo > Editar HTML, tecle F3 e procure por :

.main-inner h2.date-header {

Você vai encontrar algo parecido com isso:

 .main-inner h2.date-header {  font: $(date.font);  color: $(date.text.color);

3 - Apague todo o código acima, e cole esse :

.main-inner h2.date-header {
font: century gothic;  /* Fonte da Data */
color: #000000;  /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da data , troque left por right se quiser na direita  */
background: url(LINK DA SUA IMAGEM) repeat; /* Cor do fundo */
float: left; /* Se você mudou acima para right , mude aqui tambem */
font-size: 11px;  /* Tamanho da Fonte */
padding: 4px;/
}

4 - Modifique como você preferir, visualize se deu tudo certo, e salve.

Espero ter ajudado, se precisarem de mais alguma coisa, é só pedir.