Como personalizar a data dos posts do blog- modelo fácil de editar e usar - * Blog Elaine Gaspareto *

Como personalizar a data dos posts do blog- modelo fácil de editar e usar

Publicado em 13/03/2018


Hoje vou te mostrar como personalizar a data dos posts do blog, com as variações possíveis para todos os modelos, usando basicamente o mesmo modo de fazer.
O tutorial vai contemplar todos os modelos nativos do Blogger, menos os modelos de visualizações dinâmicas e os modelos responsivos tipo SoHo, Notável, etc... pois eles não permitem edições.
Mas todos os demais, em todas as variações, eu vou ensinar nesse tutorial.
Ficará assim:


Demonstração do tutorial


Vamos lá?
Ah, sim!
Quer baixar o Template Clarissa que estou mostrando como exemplo?
Clique: Série Como personalizar o blog passo a passo
O download está disponível no último post da série!


Como personalizar a data em todos os modelos do Blogger?



Para começar acesse a página com os códigos necessários à execução do tutorial:


Copiar os códigos


Na página com os códigos você verá que eu separei os códigos de acordo com o template-base que você estiver usando.
Para cada um dos templates os códigos variam, então antes de mais nada é preciso saber qual seu template-base, ok?
Você descobre isso facilmente!
Acesse a aba Tema de seu blog e clique em Editar HTML.
Dentro do código, bem no comecinho, tem os créditos e aí já vai aparecer qual o tema-base de seu blog.
Caso seu template tenha sido personalizado e os créditos originais removidos fica mais complicado, mas vá testando até achar o código correspondente ao que você conseguir localizar.

Tema-base identificado?
Na página de códigos localize o código correspondente ao template que está personalizando.
Acesse o painel administrativo do blog onde deseja personalizar a data e clique na aba Layout e configure a data.
O formato da data deve ser assim:



Uma dica importante é: jamais faça procedimentos assim em seu blog real.
Sempre, sem exceção, teste antes em um blog de testes, ok? Preferencialmente em um que use o mesmo template de seu blog real, assim você terá mais segurança na hora de aplicar o tutorial ao blog real.

Precaução tomada, clique em Editar HTML e dentro do código fonte do template tecle Ctrl+F.
Vai expandir a caixa de busca.
Dentro dela digite o trecho que deseja localizar e tecle Enter.
Selecione todo o trecho que pedi para encontrar, de acordo com o modelo de seu template e substitua-o pelo código que eu deixei pronto na página com os códigos necessários ao tutorial.
Sempre use o código correspondente ao seu template, ok?
Personalize as áreas que desejar e a seguir salve.
E está feito!

Dicas extras:
Nos códigos eu deixei marcado tudo que é editável.
Também especifiquei o que pode ser alterado via painel administrativo do blog.
No caso do fundo da data você pode, por exemplo, tirar a cor e colocar bordas.
Basta definir a cor de fundo como transparent e adicionar as bordas.
Ficaria assim:

background: transparent;
border: 1px solid #000000;

Nesse caso a borda seria simples, preta.
E dá pra aumentar a espessura alterando 1px pelo valor que desejar.
Também pode colocar o estilo da borda como desejar: groove, dotted, double, dashed, ridge...

Estilos de borda:
none: nenhuma borda.

dotted: borda pontilhada

dashed: borda tracejada

solid: borda contínua

double: borda dupla

groove: borda entalhada

ridge: borda em ressalto


Como usar imagem como fundo da data


Sim, é possível usar uma imagem como fundo da data.
Assim:

Use este código em qualquer template que tenha como tema-base os modelos Viagem.
Não testei nos outros, mas #ficaadica: teste!
Via de regra dá pra usar em qualquer modelo.

Dicas extras:

Para trocar a imagem que deixei de exemplo no código substitua a url marcada em laranja pelo endereço da sua imagem.
E altere os valores:
width: 180px;
height: 55px;
Pelo valor da largura e da altura de sua imagem.
Ajuste a propriedade margin para posicionar a imagem, e a propriedade padding para ajustar a data dentro da imagem.
Ajuste o formato da data, caso seja preciso. Em algumas imagens fica melhor esse formato:

Vá testando até posicionar sem erros.
Nunca esqueça: teste, mexa nos valores de margin e padding até ajustar como deseja. Tenha paciência, sempre!

Modelos de imagens para usar na data do blog


Quer um presente?
Baixe e use em seu blog esses modelos de data com imagem.
São todos vetores Freepik.


















Espero que seja útil e que você faça em seu blog.
Salve esse tutorial em seus favoritos, compartilhe em suas redes sociais.
Eu agradeço muito!!!




2 comentários via Blogger
comentários via Facebook

2 comentários:

  1. Muito bom!! Adorei as dicas e que imagens lindas!! Grata por compartilhar <3

    http://www.minhacasafuncional.com

    ResponderExcluir
  2. Interessante, estou só vendo um tempo para que possa testar todas essas dicas maravilhosas.
    Beijos!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…