28 maio 2019

Personalização da data das postagens

🗨


Para quem aprecia um blog personalizado, com estilo, cores e demais acessórios que representem seu negócio, marca até mesmo sua característica que é única de blogar.


Personalizar tudo de acordo com o que temos em mente. 


A data das postagens são logo visíveis, pois aparecem no cabeçalho da postagem, a personalização da data das postagens proporciona uma harmonia com as demais que já tenhamos realizado.


Essa é uma atualização da postagens de personalização  de quando publiquei.
Venho trazendo três modelos diferentes, mas simples de personalização da data das postagens e de quebra algumas imagens grátis para sua personalização.




tutorial personalização da data das postagens




Personalização da data das postagens, confira uma demonstração e escolha seu modelo. 






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, marca d'água e celestial e deu certo.


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*/
}



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.

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.


faixa para data

modelo gatinho

modelo glitter


modelo laço













E por hoje é isso. 
Gostou!! Comente, compartilhe, curta. 
Usou deixe os créditos.😉






Depositphotos [CPS] WW

Nenhum comentário:

Postar um comentário

Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri. Gostou?! Deixe seu comentário, criticas e sugestões, elas são muito importantes para o blog crescer e melhorar. Curta, compartilhe, ajude o blog a crescer.
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Atualizações do Instagram