Personalize a Data do seu Blog

Olá meus queridos! Tudo good com vocês? Comigo está tudo ótimo! Hoje eu trouxe mais tuto. Eu achei ele no blog Cherry Bomb, mas os créditos de verdade vão para o blog Menina Nerd pelos códigos.
Enfim, o tutorial de hoje é um pouco mais complicado, mas se prestar atenção, você consegue. Quer descobrir como deixar a sua data com a cara do seu blog? Então clique em leia mais e aproveite!


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:

                                  

 

Bom gente bonita, por hoje foi só, e desculpem pelo mega tutorial, mas era pra ficar bem explicadinho, tudo bem? Beijinhos e até a próxima!