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

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.


Antes de baixar, algumas informações:

1- Meus temas só servem para usar na plataforma Blogger/Blogspot.

2- Todos os temas disponibilizados nessa série em 2019 são responsivos, se adaptam à qualquer resolução de tela.
Mas você precisa ativar a responsividade do tema.
Vá em Tema/Celular e marque a caixinha Não.Mostrar tema para computadores em dispositivos móveis.
Só assim a responsividade vai aparecer em smartphones.

3- Todos os meus tutoriais podem ser usados em meus temas.
Mas claro que precisa testar antes se não haverá algum conflito de scripts.

4- Todas as coisas como cores, fontes, etc... são alteradas via painel do Blogger. Criei variáveis que permitem isso. Ou seja: você terá um template personalizado e editável, com possibilidade total de trocar cores e fontes em alguns cliques, do jeito mais fácil do mundo.

5- As imagens do cabeçalho, os planos de fundo e, logicamente, o logo/nome do blog podem ser trocados. Mexa à vontade, altere cores, crie seu próprio cabeçalho e logo. Divirta-se!
Aprenda como fazer isso:


6- Os temas que possuem slide, menu e outros elementos personalizados terão, no próprio template-modelo, as informações de como editar ou excluir tanto slide quanto menu.
Quando houver tutorial que eu tenha usado na personalização do template deixarei linkado na faq do template.

7- Leia a faq de cada template. Tentarei sempre deixa-la o mais completa possível, com links para os tutoriais que usei, etc...

8- Como se tratam de templates gratuitos eu não forneço nenhum tipo de ajuda ou suporte extra para configurar e instalar. Baixar, configurar menu, etc... é contigo, ok?
De novo: leia a documentação de cada tema, que estará no próprio modelo de cada template. As informações estarão sempre lá.


Termos de uso dos  templates gratuitos by Elaine Gaspareto


Calma que não tem regra demais não, são apenas 3, porém extremamente importantes:

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!


UPDATE IMPORTANTE

Escrevi um código que gera o botão Leia mais.
As explicações gerais e o modo de fazer estão neste post:


Acesse para conseguir inserir o botão caso tenha realizado este tutorial.
Se tiver baixado o Tema Amora antes de 05/06/2019 também precisa fazer o update.
Se baixar após 05/06/2019 o Tema Amora já virá com o update feito.






31 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
  6. Elaine, meu comentário não está muito relacionado com o POST mas estou desesperada! Não consigo instalar um template no meu blog de jeito nenhum! Só caregac e carrega e nada do reusktado com o template instalado...

    ResponderExcluir
    Respostas
    1. Jheniffer, não tem como eu saber o motivo, mas a dica que posso dar é: tente colocar primeiro um tema nativo do Blogger, direto pelo painel, sem personalização alguma.
      Se o blog aceitar aí você tenta instalar algum baixado.
      E, claro, certifique-se de que esteja carregando o arquivo certo ao tentar instalar...
      Se nada disso funcionar tente limpar o cache e excluir os cookies de seu navegador, ou tentar de outro navegador.
      beijossss

      Excluir
  7. Elaine, são lindos vou baixar se eu não conseguir fazer coloco o seu.
    Obrigada,bjs

    ResponderExcluir
  8. Elaine, fui em êxtase fazer as alterações no meu blog de testes para o grid (https://criandoporaija.blogspot.com/) e infelizmente não deu certo. A primeira dupla de imagens ficou desalinhada e ao clicar na imagem não abre para ler o post. Será algum conflito? Grata se puder dar uma ajuda. Apaixonada pelo template Andréa (baixei como plano b - Vc está ficando ousada no design, a-d-o-r-e-i o header!). Gratidão.

    ResponderExcluir
    Respostas
    1. Regina, não dá certo pelo motivo que expliquei acima: o seu tema tem o hack de posts resumidos instalado e a área do post é dividida em caixas.
      No tutorial explico isso :)
      bjssss

      Excluir
  9. Amada, era isso que eu procurava, mas aparecem os posts na tela principal só. Eu precisava que puxasse postagens especificas com marcadores, para colocar em cada página destinada a um assunto. Por exemplo, se tenho um botão de receitas, naquela pagina aparecer todas as minha postagens de receitas, mas só com a foto e título. Tem alguma aula aqui no seu site? Vasculhei um monte... kkkkk

    ResponderExcluir
  10. Olá Elaine, sempre acompanho suas dicas, parabéns!!! Quero perguntar o seguinte, eu coloquei o código e deu certo, a única coisa que gostaria de arrumar é a distância, tipo as duas postagens de cima ficaram mto distantes com as debaixo, não ficou como na demonstração, só gostaria de saber onde mexo pra alterar essa distÂncia, mas o resto ficou perfeito, e outra coisa q num achei no foi dica de como colocar os botões de compartilhamento igualzinho esses q vc usa no seus posts, se tiver poderia me passar o link por favor de como faz? Obrigado! abraços!!!

    ResponderExcluir
    Respostas
    1. Dioney, qual o endereço do blog?
      Se o tema-base não for responsivo o resultado será diferente do meu modelo, e aí não tem jeito.
      Os botões que eu uso são os mesmos do modelo do blog de testes, na faq dele tem o tutorial linkado:
      https://www.elainegaspareto.com/2018/10/botoes-de-compartilhar-personalizados.html

      Excluir
    2. Bom dia Elanine, o endereço é esse: tudosobresaudeparatodos.blogspot.com

      Excluir
    3. Eu mandei o endereço como blog, mas tenho ele no domínio tb www.natular.com ou www.natular.com.br

      Excluir
    4. Dioney, o problema é mesmo o fato de o template não ser responsivo.
      Na resolução de tela 1366px as miniaturas ficam mais distantes, mas em resoluções mais baixas ficam bem próximas.
      A solução é torna-lo responsivo assim nenhuma resolução de tela fica prejudicada.
      Mas se preferir alterar mesmo o espaço dos títulos localize no código que eu forneci a área
      padding-bottom: 3em !important;
      e troque o valor 3em por um vlor menor.
      Mas cuidado para não reduzir demais e aí os títulos não caberem.

      Excluir
    5. Eline eu fiz diferente, resolvi usar um desses templates q vc disponibiliza, até pq tb já fica responsivo, dê uma olhada lá novamente como ficou. Desde já obrigado pela sua atenção. Acho q ficou bem mais legal agora, dá uma conferida www.natular.com

      Excluir
    6. Sim, eu vi.
      Ficou bom, responsivo sempre é melhor!
      Atenciosamente

      Excluir
  11. Bom dia Elaine, não tem como colocar as postagens resumidas no tema Amora?
    Vc ainda esta personalizando blog (pago)?

    Att, liene

    ResponderExcluir
    Respostas
    1. Liene, até pode mas precisa retirar os códigos que colocam os posts em formato grid.
      Não, não trabalho mais com personalização de blogs por encomenda :)
      bjssss

      Excluir
  12. Olá Elaine! Boa tarde!
    Estou usando o template amora completo no meu blog www.selecaodedomesticas.com.br
    Muito obrigada de coração. Eu acho que ficou lindo!

    ResponderExcluir
    Respostas
    1. Maria, eu vi, ficou lindo e combinou totalmente!
      Obrigada por usar!
      beijossss

      Excluir
  13. Oi Elaine. Usei os seus tutoriais para deixar o blog responsivo e adorei o resultado! O único problema é que as imagens cobrem os títulos e alguns posts não estão aparecendo. Por isso, peço ajuda para modificar o código.
    Dê uma olhada: https://winxclubfadas.blogspot.com/

    ResponderExcluir
    Respostas
    1. Patricia, nesse caso a melhor dica que posso dar é vc baixar o Tema Amora e ir personalizando do seu jeito pois não tenho como olhar o código e ajusta-lo caso a caso, entende?
      Ou vc mesma pode mexer até ficar como deseja, todo o trecho que começa com .post { é onde a aparência pode ser alterada.
      Vá mexendo, ajustando, até ficar como deseja.
      Mas a melhor dica é baixar o tema para treinar :)
      bjssss

      Excluir
    2. Obrigada pela dica! Consegui consertar refazendo todo o template rsrs
      Queria saber se há um jeito de colocar o sumário do post (um texto de prévia)

      Excluir
  14. Meu blog, assim como o seu, possui outras páginas além da homepage.
    Eu gostaria de saber se tem como fazer essa personalização da template em apenas uma ou duas páginas específicas do blog?

    ResponderExcluir
    Respostas
    1. Tem sim, a Elaine já ensinou em um tutorial:

      https://www.elainegaspareto.com/2015/06/conhecendo-condicionais-blogger.html

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