Receba todas as novidades em 2021.

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






    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