Série Como personalizar o blog passo a passo- personalizar a área dos posts - * Blog Elaine Gaspareto *

Série Como personalizar o blog passo a passo- personalizar a área dos posts

Publicado em 24/01/2018

Série Como personalizar o blog passo a passo- personalizar a área dos posts

Dando seguimento aos tutoriais da Série Como personalizar o blog passo a passo hoje vou te ensinar como personalizar completamente a área de postagens do nosso tema-base.
Para começar acesse a página com os códigos que vamos usar hoje:


Copiar o código


A seguir vá até o painel do blog onde estamos trabalhando, clique em Tema e a seguir clique em Editar HTML.
Para facilitar sua vida eu gravei todo o tutorial de hoje em vídeo.
Aperta o play e veja a execução antes de começar, assim você se sentirá mais seguro e não terá nenhuma dificuldade.


Se inscreve no canal, ele serve de apoio aos tutoriais do blog, e assim você não perde os vídeos extras que publicarei apenas lá.
Inscreva-se!

Personalizar a área dos posts- título, autor do post e data


Vamos alterar a formatação da área de postagem, colocar o título centralizado, mudar a data de lugar e adicionar o autor do post.
Também vamos corrigir um erro nos títulos, "forçando" o código para mostrar sempre a fonte correta que definimos, a cor, etc...
Vamos lá!

Dividir área dos posts em caixas:
Nós vamos dividir a área dos posts em caixas.
Por padrão a área dos posts nesse tema-base que estamos trabalhando é um bloco só. Vamos mudar isso, para deixar mais harmônico, mais equilibrado e melhor posicionado.
Mesmo que você vá, no futuro, deixar seu blog todo branquinho, ainda assim eu recomendo essa divisão para deixar tudo bem mais equilibrado e ajustado.
Vamos lá?

Para personalizar a área dos posts digite, na caixa de pesquisa, esse trecho:
/* Posts
Aparecerá um pedaço de código assim:


Selecione tudo, substitua pelo código PERSONALIZAR ÁREA DOS POSTS e salve.
A área dos posts agora está separada.
Calma, sei que a data está estranha, chegaremos lá!

Data e autor abaixo do título dos posts:
Vamos mudar a posição da data e do autor do post.
Localize <div class='post-header-line-1'/>; aparecerão 2 ocorrências dessa linha mas estamos buscando a 2ª ocorrência, ok?
Achou?
Cole o CÓDIGO AUTOR E DATA abaixo dele.
Salve.

Localize esse trecho:



Você verá que abaixo dele tem essas linhas:

 <b:if cond='data:post.dateHeader'>
 <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
 </b:if>

Assim:

Apague o trecho que marquei em cinza e salve.
Isso elimina a data duplicada.

Importante:
Caso queira usar outro formato de data pode usar.
Nesse caso não faça o procedimento que expliquei acima de incluir data e autor abaixo dos títulos do post, ok?

Personalizar o rodapé da área dos posts


Nesse ponto seu template já estará com as áreas dos posts separados em caixas.
Chegou a hora de personalizar o rodapé dos posts.
Vamos inserir botões de compartilhar responsivos, personalizar os marcadores e o link para comentários e inserir as postagens relacionadas.

Botões de compartilhamento:
Como vamos usar essa base para os tutoriais da minissérie Como tornar responsivo um template nativo do Blogger vou usar botões de compartilhar já responsivos.
Esses, deste tutorial:


Acessar o tutorial


Insira os botões conforme explico no tutorial, e personalize coisas como tamanho, cor, etc.
Depois de pronto, salve.
Eu já deixei um código personalizado nas cores e tamanho que vou usar em meu blog de testes.
Faça isso também, edite para ficar como deseja.
Se quiser usar a mesma personalização de cores e tamanho que usei deixarei na página com os códigos de hoje, ok?
Use-a no lugar do CÓDIGO CSS do meu tutorial que ensina como inserir os botões.

Personalizar marcadores e link de comentários:
Vamos posicionar melhor o link para comentários e os marcadores que aparecem ao final dos posts.
Localize, usando a barra de busca, essa linha:



Apague até </span>
Salve.

Agora localize essa linha (ela aparecerá 2 vezes, apague ambas):



E apague até </span>
Salve.

Agora cole o código MARCADORES E LINK DOS COMENTÁRIOS imediatamente abaixo de <div class='post-footer-line post-footer-line-2'>.
Salve.

A seguir cole o código CÓDIGO DE PERSONALIZAÇÃO DOS MARCADORES acima de ]]></b:skin> e salve.


Agora vamos deletar o autor do post que está duplicado.
Veja a imagem:


Selecione tudo como explico na página de códigos e apague.
Salve.


Postagens relacionadas:
Você pode usar as postagens relacionadas que preferir, veja algumas opções que há aqui no blog:


Para esta minissérie eu escolhi usar este:


Acessar o tutorial


Configure cores, tamanho das miniaturas, etc... e assim que estiver como deseja, salve.
No caso do nosso tema-base eu defini as miniaturas em
width:225px;  /*LARGURA DA MINIATURA*/
height:200px; /*ALTURA DA MINIATURA*/

Se desejar usar a mesma personalização de cores e tamanhos que usei utilize o código que deixei pronto na página com os demais códigos ao invés de usar a personalização original do tutorial dos botões de compartilhar.

Nesse momento nosso template está assim(reduzi para mostrar 1 post):



E por hoje terminamos.
No próximo passo vamos personalizar a sidebar (coluna lateral), o footer e o rodapé do template, ali onde inserimos os créditos.
Também vamos ajustar algumas coisas feias e desnecessárias. E inserir um monte de coisas legais!

Antes de ir, me diz: está tendo alguma dificuldade? Tem alguma pergunta ou sugestão que queira fazer?
Diz aí, mig@s!




28 comentários via Blogger
comentários via Facebook

28 comentários:

  1. Olá! Tudo numa nice?!
    Gostaria de agradecê-la pela disponibilidade em ajudar quem está tentando fazer um lay próprio. Obrigada. Estou acompanhando a série e todas as explicações de personalização.
    Beijin...

    ResponderExcluir
    Respostas
    1. Alana, muito obrigada pelo feedback!
      Espero que goste e que te ajude!
      beijossss

      Excluir
  2. Bom dia, sei que não tem muito à ver com o post, mas quando coloco o blog no modo privado os gadjets de slide show das notícias não funcionam no template customizado. Por acaso, sabe porque e qual o "remédio"?

    ResponderExcluir
    Respostas
    1. O motivo é que slides assim rodam com base no feed. E blogs privados não possuem feed. Não tem remédio, tem que deixar o blog público...

      Excluir
  3. Oi Elaine,

    Veja se você pode me ajudar. Eu troquei recentemente o layout do meu blog que eu usava há um tempão, por um layout pronto. E notei que agora na hora de compartilhar um post no Facebook, puxa o nome do meu blog junto com o título. Por exemplo, antes ao compartilhar o post no Facebook aparecia "Como ter uma vida mais produtiva e equilibrada" e agora aparece "Quero Ir - Tati Bertucci: Como ter uma vida mais produtiva e equilibrada".
    Acredito que deve ter um jeito de arrumar isso direto no código do blog, já que o Facebook não me permite editar o título da postagem, mas não sei como fazer.
    Se você souber, poderia me explicar ou me indicar algum post do seu blog onde tenha feito o tutorial?

    Muito obrigada!
    Tati Bertucci | Quero Ir

    ResponderExcluir
    Respostas
    1. Tati, experimente esse post:
      http://www.elainegaspareto.com/2017/12/metatags-seo-para-blogs-2018.html

      A solução pode estar lá, mas por ser um template baixado da net não garanto...

      Excluir
    2. Eu o li mais cedo, mas não fiz as alterações porque os códigos que devem ser apagados não são exatamente iguais ao HTML do meu blog, aí não sabia o que apagar. Meu tema é do Themexpose.

      Excluir
    3. Tati, infelizmente não tem como dizer o que acrescentar ou excluir pois cada template tem suas peculiaridades. Por isso é que nunca usei e nem recomendo templates baixados da net...
      Mas uma dica seria tentar apagar os códigos que estão no template, acrescentar esses e ver no que dá. Faça em um blog de testes e espere alguns dias até o Facebook assimilar a alteração...

      Excluir
  4. elaine e si eu quiser deixar a data para fora da area do post mais centralizada como eu faço ?

    ResponderExcluir
    Respostas
    1. Faz assim: não personalize a área da data.
      E localize isso no template:

      .main-inner h2.date-header {

      Abaixo dele coloque

      text-align: center;

      E salve.

      Excluir
  5. Elaine na alteração do código da data para retirar a duplicada, a data que saiu aqui pra mim foi a que fica embaixo do titulo da postagem.

    ResponderExcluir
    Respostas
    1. Jorciane, você deve ter apagado o trecho errado.
      Faz assim: localize o que precisa apagar, de acordo com o tutorial e apague.
      A seguir copie de novo o código de personalização da data e recoloque, e salve.
      Veja se dá certo :)

      Excluir
    2. Muito obrigado minha linda, deu certo, fique com Deus♥

      Excluir
  6. Elaine help...rsrs meu não ficou com marcadores...porquê?

    ResponderExcluir
    Respostas
    1. Keila, se algo deu errado é porque ou vc esqueceu algo, ou colocou os códigos no lugar errado.
      Nesse caso refaça, até achar o erro.
      Um exemplo: os botões de compartilhar você colou no lugar errado.
      Recomece, vai dar certo, com certeza.
      Sim, demanda paciência rsrsrsr
      beijossss

      Excluir
    2. Oiee...Elaine voltei ao passo a passo refiz tudo... mais reparei que no segundo vídeo, na área /*Posts o seu é linha 291, o meu aparece 293...tem algum problema? Já refiz duas vezes e aparece isso, não quero dar sequência para não errar de novo,acho que o problema esta ai...tem algum outro vídeo depois deste que não vi??Aguardo a resposta!!!Obrigada!!

      Excluir
    3. Keila, não tem problema nenhum.
      Todos os vídeos da série está na página que vc acha clicando no menu aqui do blog, aba Série de tutoriais, sub aba Série Como personalizar o blog passo a passo.
      bjssss

      Excluir
    4. Muito grata pelo tutorial amei!!!Só fiquei chateada que não consegui organizar o Leia Também...ficou aparecendo só um...Se puder ajudar agradeço.Desculpa por tanta pergunta,rsrs,bjus!!

      Excluir
    5. Keila, quando o blog tiver mais posts reais e marcadores reais eles devem aparecer.
      Marcadores sem sinais como #, em todos os posts, e os relacionados aparecerão.
      bjssss

      Excluir
  7. Já tentei tudo quanto é tutorial e não consigo separar os posts em caixa. Sinto que esse seu daria certo, mas meu tema está modificado e esse código nativo que você mostra não está mais assim. Você poderia me ajudar?

    ResponderExcluir
    Respostas
    1. Maria, se seu template é personalizado provavelmente a base usada não é o modelo Viagem, ao qual esse tutorial de destina.
      Mas você pode tentar colar o código que começa com .post-outer {
      e trocar o background por background: #ffffff; /* Fundo da postagem */
      Daí veja se dá certo, mas é um teste pois não sei qual base foi usada na personalização de seu template, imagino que seja a Simples...
      Testa e me diz...

      Excluir
  8. Olá Elaine, Antes de mais, muitos parabéns pelos tutoriais!! Estou a amar!! :D Criei um blog de testes como sugere mas, tenho uma dúvida e gostava de saber se me consegue ajudar: há forma de alterar o texto dos botões de partilha personalizados ? Em vez que aparecer "Compartilhe este post" queria que aparecesse apenas "Partilhar" mas, não estou a perceber como se faz. Já tentei mudar o código onde diz /*-- TEXTO COMPARTILHE ESTE POST--*/ para /*-- TEXTO PARTILHAR*/ mas, fica igual.... Pode me ajudar por favor?

    Muito obrigado Elaine!

    ResponderExcluir
    Respostas
    1. Cátia, pra trocar a expressão que está pela expressão que deseja precisa ser no CÓDIGO HTML dos botões
      Localize
      < center>Compartilhe este post

      E aí troque.
      beijosss

      Excluir
  9. Olá Elaine acompanho seu trabalho e estou usando sua serie para fazer o meu layout , mais tem uma coisa que esta me atrapalhando, eu estou tentando tirar o nome do autor que esta duplicado mais esta dando erro, bom eu queria saber qual , tenho que remover se é o primeiro logo abaixo de autor data ou se o segundo que aparece

    ResponderExcluir
    Respostas
    1. Núbia, se não me engano no v[ídeo isso aconteceu comigo e eu mostro como tirar.
      Mas a dica é: encontre o trecho, apague e teste.
      Deu certo? Beleza.
      Não deu? Apague o outro que achar.
      Tem que testar até conseguir achar o certo.
      beijossss

      Excluir
  10. Olá....Tudo bem Elaine...
    Fiquei com uma duvida em relação como vc mudou a letra de Compartilhe este, não vi nos vídeos essa explicação ,se puder ajudar agradeço...amei!!(o seu está com a letra do instragram)

    ResponderExcluir
    Respostas
    1. Keila, no código css dos botões coloque font-family: nomedafonte;
      e font-size: tamanhodafonte;
      No caso dessa é a Great Vibes se não me engano.

      beijosss

      Excluir

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…