Série Fazendo meu layout- personalizar a área dos posts - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Série Fazendo meu layout- personalizar a área dos posts

Publicado em 27/05/2019

Série Fazendo meu layout- personalizar a área dos posts
E cheguei para o 2º tutorial prático da Série Fazendo meu layout!
Hoje vamos começar a dar forma ao template: vamos personalizar a área do post e deixa-la em formato lista, como no Tema Fernanda, que é nosso objetivo com essa série de tutoriais.

Nessa fase você pode escolher se deseja colocar os posts do blog em formato lista, se prefere deixa-los inteiros ou se prefere inserir o recurso que resume os posts automaticamente na página inicial.
Vamos lá?

Área dos posts- lista, inteiros ou resumidos?


Vamos começar com uma escolha: como você quer deixar os posts na página inicial do blog?
Temos 3 opções (existem outras, mas para essa série e usando esse tema-base vou trabalhar com 3 opções e um bônus, ok?):
  1. Posts inteiros, sem resumo automático mas com opção de resumir manualmente caso queira
  2. Posts resumidos automaticamente na página inicial
  3. Posts em formato lista

Posts inteiros, sem resumo automático mas com opção de resumir manualmente caso queira


Vamos começar com a opção 1, os posts em estado normal, inteiros e com opção de resumir manualmente caso desejar.
Um exemplo dessa forma de personalizar a área dos posts é o Tema Make up: ele não tem resumo automático mas caso você queira resumir algum post pode fazer isso clicando no ícone Expansão da postagem.

Sua opção é deixar os posts inteiros e inserir manualmente o resumo apenas nos posts que desejar?
Podemos fazer isso, claro!
Você precisa apenas personalizar o botão Leia mais (ou Continue lendo, etc...)
Acesse a página com alguns modelos de jumpbreack personalizado:

Escolha o modelo que desejar, copie o código dele e cole acima de.
Salve.
Aí, toda vez que quiser inserir o resumo em algum post basta parar o mouse onde deseja inserir a quebra de texto (aí mesmo onde você escreve seus posts), clicar no ícone Expansão de postagem (que é o 7º da direita para a esquerda no editor de posts) e pronto.
Simples, né?


Posts resumidos automaticamente na página inicial


Caso você queira usar o resumo automático para todos os posts o tutorial a seguir é este:

Como colocar os posts do blog resumidos automaticamente na página inicial

O resultado será como no Tema Amanda: todos os posts resumidos automaticamente, com botão Leia mais, imagem grande.
Assim:
https://tema-amanda.blogspot.com/
Basta seguir o tutorial e seus posts aparecerão todos resumidos, automaticamente.


Posts em formato lista


E finalmente chegamos ao ponto mais importante do tutorial de hoje na Série Fazendo meu layout, que eu tenho certeza é o que você estava esperando!
Vamos personalizar a área do post em formato lista.
Exatamente como em meu tema Fernanda, que é o modelo que estamos seguindo nessa série.
Vamos lá?
Gravei a execução dessa parte do tutorial em vídeo, aperta o play!



Agora abra a página com os códigos que vamos usar:


Copiar os códigos


A seguir vá ao painel de seu blog, onde estamos trabalhando, e clique em Tema.
Aí clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Na barra de busca digite ]]></b:skin> e abaixo dele cole o CÓDIGO CSS DAS MINIATURAS.
Salve.

O que fizemos?
Demos estilo para as miniaturas dos posts, definimos as propriedades de cada elemento dessa área.
É exatamente nesse código que você vai definir tipo, cor e tamanho da fonte dos títulos dos posts na home, cor, fonte, tamanho da fonte e cor de fundo do botão Leia mais, e também a cor, tamanho e tipo da fonte do resumo do post.
Está tudo marcado no próprio código, leia-o e ele te dirá o que mudar.

Também nesse código estão os comandos que definem a responsividade da área do post na home do blog.
Isso é importante, recomendo não alterar a menos que saiba o que está fazendo.
Tentei cobrir as resoluções de tela mais comuns, tá?

Uma recomendação:
Eu levei muito tempo para ajustar as proporções da área do post. Sugiro não mexer no trecho que define isso (o trecho em .blogger-post) mas é claro que você pode fazer experiências.
Apenas sugiro que experimente alterações quando tiver dominado completamente o modo de fazer.
Seguindo meus códigos o resultado será exatamente como o meu.
Se mudar algo não tenho como garantir, ok?
Sigamos!

Localize, dentro do seu código-fonte, a seguinte linha:
(de novo, está tudo na página de códigos, copie de lá, não se desespere!)

<b:includable id='post' var='post'>

E selecione todo o trecho até

</b:includable>

No lugar desse código cole o CÓDIGO DE PERSONALIZAÇÃO DA ÁREA DO POST.
Salve.

O que fizemos?
Colocamos a área dos posts em formato lista, adicionamos o botão Continuar lendo e também já deixei pronto os códigos que vamos usar no próximo tutorial: das postagens relacionadas, dos botões de compartilhar os posts e a correção da data.

Falando em data:
Localize, no seu código-fonte, esse trecho:

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

E apague-o.
Salve.

Estamos finalizando.
Localize a tag de fechamento </body> e, acima dela, cole o CÓDIGO DE CORREÇÃO DAS MINIATURAS.
Salve.

O que fizemos?
Inserimos um script que vai dar nitidez às miniaturas.
Sem ele as imagens na home do blog ficam embaçadas.

Nota importante:
Os códigos que colocam a área dos posts em formato lista podem ser aplicados em qualquer template nativo do Blogger, exceto os modelos de Visualizações dinâmicas e os modelos responsivos tipo Soho, Comtempo, Notável e Empório.
Os demais (Viagem, Simples, Espetacular, Marca d'água) aceitam os códigos, sem problemas.


E terminamos a personalização da área dos posts.
A seguir vamos inserir os posts relacionados, os botões de compartilhar e também escolher o menu e o slide que o tema terá.
Mas isso é assunto para o próximo encontro que teremos.
Mispera?





9 comentários

  1. Estou adorando essa série, parabéns, quando teremos o quarto post? Obrigado.

    ResponderExcluir
  2. Elaine procurei sua lojinha de templates mais está dando erro, voc~e não faria um template pra mim? aguardo sua resposta, pode ser por email colorfestdesing@yahoo.com

    ResponderExcluir
    Respostas
    1. Oi!
      Eu desativei a loja faz tempo.
      Infelizmente fico devendo, eu não trabalho mais com personalização de blogs... desculpe, fico devendo...
      beijossss

      Excluir
  3. Bom dia, meu blog tema Olivia Clean & Responsive Blogger Template, não consigo configurar pelo personalizar do blogger para trocar fontes e cores. Tem como resolver isso? só consigo editar no html. Se puder ajudar agradeço.

    ResponderExcluir
    Respostas
    1. Janilson, temas baixados da internet são assim mesmo, só pelo código-fonte. Teria que reescrever os códigos e adicionar variáveis para personalizar pelo painel.

      Excluir
  4. Os posts não estão ficando separados como no modelo Fernanda. E agora?? Fiz algo errado ou é algo que vc vai ensinar nos próximos posts da série?

    ResponderExcluir
    Respostas
    1. Larissa, para que os posts fiquei separados as postagens não podem ser feitas no mesmo dia. Isso é característica desse modelo. Tem que ser um post por dia. Mude as datas dos posts de teste e vc verá.
      bjssss

      Excluir
  5. Elaine, gostaria de saber como eu faço para editar as miniaturas das minhas postagens.Eu não sei colocar aquelas imagens que resumem a postagem. Poderia ensinar por favor?

    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.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
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…