Como personalizar um template do Blogger para exibir os posts no estilo grid | Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Como personalizar um template do Blogger para exibir os posts no estilo grid

Publicado em 13/02/2019

Tempo de leitura:

Como personalizar um template do Blogger para exibir os posts no estilo grid
Não é de hoje que me pedem para ensinar como personalizar um template para blog no estilo grade, ou grid se você preferir. Trata-se de um modelo semelhante ao que eu uso aqui no blog atualmente: postagens sem resumo, apenas o título e a primeira imagem do post, alinhados lado a lado, bem limpo e bonito.

Do modo como desenvolvi o meu modelo não é uma alteração simples pois trata-se de um template todo modificado, mas adaptei o básico do processo de modo que eu conseguisse ensinar aqui sem precisar de grandes malabarismos, usando apenas um código simples, limpo e leve, que todo mundo conseguisse aplicar.
Cheguei nesse resultado:

Demonstração do tutorial

E é isso que vou te ensinar hoje.
Vamos trabalhar?


Como personalizar um template do Blogger para exibir os posts no estilo grid


Para começar, os alertas:

1- Antes de mais nada a recomendação de sempre: faça antes em um blog de testes. Sempre, sem exceção. Quando aprender de fato e ganhar segurança você aplica ao seu blog real.

2- Os códigos que vou disponibilizar são responsivos, então ficarão mais adequados se o template for responsivo.
Dá pra usar em um tema que não seja responsivo? Dá, mas não recomendo.
Até porque é muito simples tornar responsivo um template nativo do Blogger.

3- Caso opte por usar meus códigos em um tema não responsivo sugiro que use o código não responsivo que está nessa página. É o código que está no Tema Andréa.
Mas repito: fica melhor se o tema for responsivo, tá?

4- Eu testei em vários modelos nativos do Blogger e os melhores resultados foram nos modelos Simples e Viagem, qualquer um deles.
Nos demais, que possuem a área dos posts separadas, não dá certo.
E nos modelos de Visualizações dinâmicas e os novos modelos responsivos tipo Soho, Notável, etc... nem precisa tentar pois eles não aceitam alterações.

Alertas feitos, vamos ao tutorial propriamente dito!
Comece acessando a página com os códigos que vamos usar:


Copiar o código


A seguir vá até o painel administrativo de seu blog (o blog onde estiver realizando o tutorial, claro) e acesse a aba Tema.
Aí clique em Editar HTML e dentro da caixa de código tecle Ctrl+F.
Na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Abaixo dessa tag de fechamento cole os meus códigos, disponibilizados na página de códigos linkada acima.
Salve.
E está feito! Parece mágica, de tão fácil, né? #sqn

Obviamente não é mágica alguma, foram horas de trabalho até conseguir fazer funcionar tudo num código só, simples e que você aplica em um único passo.
E, caso futuramente queira retirar, é só excluir o código todo e o seu template volta ao que era antes.
Não é demais?


Leia isso antes de ir embora...


Algumas observações importantes:

1- Como não foram feitas mudanças estruturais no template não consegui inserir botão Leia mais, mas nem precisa. Basta clicar no título do post ou na imagem e o post abre.

2- O código que disponibilizei é responsivo, mas evidentemente só vai ser responsivo de fato se o template onde ele for instalado for ele próprio responsivo e configurado para não mostrar a versão mobile no celular.
Para configurar certo em caso de template responsivo vá até a aba Tema/Celular e marcar a caixinha Não. Mostrar tema para computadores em dispositivos móveis.

3- No código inseri a fonte Montserrat, que é a que usei no Tema Amora e no Tema Andréa foi a fonte Roboto. Caso queira usar outra fonte do Google Fonts altere a primeira linha do código com o nome da fonte que desejar usar.

4- Como eu alertei acima templates com a área dos posts divididas em caixas não funcionam.
Se o tema possui o hack que resume os posts automaticamente já instalados também não aceitará.
Templates já personalizados, com muitas alterações, podem não aceitar, tem que testar pois cada caso é um caso.


Templates grátis para Blogger estilo grade (grid)



Como sou fofa vou disponibilizar 2 temas para você se divertir!
Quer baixar o Temas Amora ou o Tema Andréa de graça?
O Tema Amora é responsivo e já personalizado com recursos básicos.
E o Tema Andréa é bem clean e sem grandes personalizações, uma base limpa para você personalizar ao seu gosto, inserir os recursos que desejar, já com o formato grid, ou grade, instalado.


Termos de uso dos meus temas


1- Todos os templates que eu disponibilizar devem ser baixados apenas daqui do blog. 
Não compartilhe o link de download em seu blog. Indique o post onde eles estiverem caso queira divulgar.

2- A principal exigência que faço: em nenhuma circunstância, de jeito nenhum, jamais, altere os meus créditos presentes no template. Mesmo que você mude o plano de fundo, as cores, o logo e o cabeçalho, ainda assim os créditos devem ser mantidos. Sem exceção. Ok?

3- Para finalizar: jamais use meus temas para vender. Não use como base, não venda o template e nem partes dele.
Acredite, eu saberei, então por favor não faça.
Combinado?


Agora, caso esteja de acordo com os termos de uso, clique no botão abaixo de cada modelo, baixe e aproveite.
Foram feitos com amor para você!




Baixar Tema Amora





Baixar Tema Andréa



Se tiver qualquer pergunta diga nos comentários e eu ajudo se for possível!
Aproveite, divirta-se e deixe seu blog lindão!





9 comentários

  1. Adoooooorei!!
    O que seria de mim sem ocê?
    Como seria meu blog sem o teu?

    ResponderExcluir
    Respostas
    1. rsrsrsr eita moça exagerada!
      Mas fico feliz que seja de alguma ajuda :)
      beijossss

      Excluir
  2. Parabéns Elaine pelo belíssimo conteúdo. Tenho acompanhado seu trabalho e posso te dizer claramente: todos excelentes e de grande ajuda. Principalmente no me caso que sou principiante. Deus abençoe por compartilhar seu conhecimento. Gratidão e sucesso em todos seus projetos.

    ResponderExcluir
  3. aaaa sua linda! Muito obrigada pelo tutorial, adorei e consegui deixar o "ler mais"
    Beijos!

    ResponderExcluir
    Respostas
    1. Jaque, que bom!
      Deu certo deixar o Leia mais porque você usa o jumplink nativo do Blogger.
      Nesse caso dá sim pra deixar, mas tem que inserir o resumo post a post. Se fosse Leia mais automático não daria.
      Mas fica a dica extra, se usar o jumplink nativo dá pra ter o botão sim, basta personaliza-lo. Valeu pelo lembrete!
      beijossss

      Excluir
  4. Olá Elaine, que trabalho lindo e certamente há muito estudo! Certamente sei que estou entre as que pediam há tempos e já respeitava o fato de não ensinar, pois você tem todo o direito de determinar o que transmitir ou não, diante de tudo que já ensinou a todos em tanto tempo. Só posso agradecer e desejar mais e mais sucesso a você. Beijos

    ResponderExcluir
  5. Adorei seu post, Elaine! Você sempre arrasa! :-) Eu só queria tirar uma dúvida: onde conseguiu a imagem do header do tema Amora? Amei! Queria um assim pra mim. Pode indicar onde posso conseguir um semelhante? Obrigada! Beijos!!!

    ResponderExcluir
    Respostas
    1. Luh, o header fui eu que fiz. Basicamente é uma montagem com vários elementos, vetores na verdade.
      Tem post aqui no blog ensinando, procure por Como criar um cabeçalho personalizado e exclusivo para o blog.
      Caso queira usar o header do Tema Amora ele está aqui:
      https://2.bp.blogspot.com/-urPp_perTK0/XGb-NmsGzKI/AAAAAAABkTk/GHr3Z59Mtj83jlVPHDvv3fOu_1IXpwZQQCLcBGAs/s1600/header.png
      bjsss

      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…