16 junho 2016

Tutorial - Data do Post Personalizada

Olá meus amores, tudo bem com vocês? Espero que sim. 

O post de hoje é especialmente para tirar a dúvida de uma pessoa que me perguntou como eu personalizei a data dos posts do meu blog, e como eu prometi a ela que iria fazer o tutorial estou aqui para ensinar a ela e a quem tiver interessado,então vamos lá mão na massa.



Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Configurações" > "Idioma e formatação", marque a penúltima data:


Primeiro 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.



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'/>


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;
É agora no ú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.


 Abaixo tem algumas imagens para você usar como plano de fundo da data:






Créditos Cherry Bomb 
OBS:Imagens retiradas do google  

2 comentários:

  1. Obrigada :) vou tentar fazer :) beijinhos

    ResponderExcluir
  2. Amei Mary ....sou cabeçuda pra essas coisas..kkkkk eu ia e acabar com a plataforma blogger kkk bjs
    https://blogbrilhodasestrelas.blogspot.com

    ResponderExcluir

Obrigada pelo seu comentário,volte sempre!
♥ Deixe o link do seu blog para que eu possa visitar !
♥Siga-me no Instagram @marianasousaoficial
♥Deixe seu like na minha Fan Page

BLOG DA MARY 2015-2017: | • voltar para cima