28 de maio de 2019

Personalização da Data das Postagens

Três Modelos Diferentes




Personalização da data das postagens




Essa é uma atualização  de uma das postagens do blog  de quando publiquei para hoje eu já evolui bastante no meu aprendizado então resolvi dar um up nesse post e trazer três modelos diferentes mas simples de personalização da data das postagens e de quebra algumas imagens grátis para sua personalização .
Bora lá então.





Primeiro Estilo  Data das Postagens Quadrada

Primeiro vá em configurações no painel do blog  , idioma e formatação e  troque o formato da data  para ficar assim , 14 Mai 2019 ou 14/05/2109.
Depois vamos em tema ( não esqueça de fazer um backup do seu blog ) , feito editar  HTML ctrl + f na caixinha interna do modelo e vamos procurar por :
]]></b:skin>  ( dentro que é a folha de estilo está toda aparência do blog ) estamos em busca desse trecho :

.date-header span {
  color: $(date.header.color);

Descobri a pouco tempo em que alguns modelos do blogger pode estar assim:

.main-inner h2 data -header{

Apague esse trecho e cole no lugar :


.date-header span {
font-family: Cursive;  /* formato da fonte */
color: #403c52;  /* cor da fonte */
margin-Right: -80px;
background: #ffedff;  /* Cor do fundo */
float:top ;
font-size: 14px;  /* tamanho da fonte */
padding: 6px;
border:none; /* borda nenhuma */
}

Se você desejar trocar o estilo da borda que aqui está nenhuma é só trocar a palavra dotted por:

solid - continua
double - dupla
dotted - pontilhada
dashed - tracejada
ridge - resalto


Algumas vezes dependendo da  personalização do seu template a troca pode não funcionar eu testei no modelo simples e deu certo.

Visualize  ( veja como fica no modelo abaixo ) se deu tudo certo e salve.




Demonstração da Personalização da data postagem



Você pode trocar a cor aumentar  a fonte( trocar o estilo da fonte que pode ser baixada do google web fonts ) , de acordo com as cores e o estilo do seu blog.



Segundo Estilo Data das Postagens Arredondada


.date-header span {
border-radius:12px;
background: #fac07c; /*COR E FUNDO DA DATA */
color: #874e4c(date.header.color); /*COR DA FONTE DA DATA*/
letter-spacing: 2%(date.header.letterspacing);
width: 180px; /*LARGURA*/
height: 30px; /*ALTURA*/
padding: 5px; /* não mexa*/
padding-top: 5px;/*não mexa*/
text-align: center;/*não mexa*/
margin-top: -25px;/*não mexa*/
margin-left: 40%;/*não mexa*/
}


Nesse modelo sua data ficará assim:


persoanalização da data das postagens

Terceiro Estilo Data das Postagens com Imagem
 /* Personaliza Data  */
font:normal 16px Cursive, sans-serif;
color: #403c52;/* cor da fonte da data */
background: url(' url da sua imagem aqui');
background-repeat: no-repeat;
text-align:center;/* alinha o texto */
font-family: 'Cursive', sans-serif;
font-size: 13px;/* fonte da data */
width: 80px;/* largura */
height: 80px;/* altura */
float:left; /* localização */
margin-left: -12px; /* margin */
margin-top: -20px; /* margin */
padding: 19px 13px 52px 1px; /* margin entre o texto e imagem */
overflow:hidden;
line-height: 20px;/* margin */
word-spacing: 55px;/* margin */
}

Se precisar de uma ajustada na largura e altura aumente de vagar e visualize estando ok salve.


Nesse modelo a data ficará assim:




Para testar qual cor combina com o seu blog de uma olhada na 
 Paleta de Cores do Baú da Dri

Eu fiz algumas imagens simples para serem usadas testei todas não tive problema para que se ajustassem  , é só salvar hospedar em uma pagina nova do seu próprio blog e copiar o link













E por hoje é isso . 
Gostou!! Comente , compartilhe , curta 😉







Nenhum comentário:

Postar um comentário

Gostou do Post , deixe seu comentário e sugestões .
Em breve responderei a todos.

Copyright © Blog de Variedades Baú da Dri Design by Adriana Bentim | Tecnologia do Blogger