Série Fazendo meu layout- personalizar o template e torna-lo responsivo - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Série Fazendo meu layout- personalizar o template e torna-lo responsivo

Publicado em 20/05/2019

Série Fazendo meu layout- personalizar o template e torna-lo responsivo
Segura que o tutorial de hoje vai ser grande, produtivo, e espero eu, de grande valia para quem deseja fazer seu próprio layout para blog.
Hoje vamos dar seguimento ao que começamos fazer na apresentação da Série Fazendo meu layout e botar de fato a mão na massa!

Vamos corrigir algumas áreas do tema nativo Espetacular que estamos usando, torna-lo responsivo e deixa-lo no ponto para ser personalizado lindamente.
Vem que a aula vai começar!
Para esse capítulo da Série Fazendo meu layout vamos usar muitos códigos. Então comece acessando a página onde eles estão:


Copiar os códigos


Para não deixar pedra sobre pedra dúvidas eu gravei toda a execução do tutorial de hoje.
Aperta o play!


Agora vá ao painel administrativo de seu blog de testes e clique em Editar HTML.
Logo no começo do código-fonte você verá essa linha:

<?xml version="1.0" encoding="UTF-8" ?>

Selecione até achar <b:skin><![CDATA[/*
e no lugar cole o CÓDIGO DE CORREÇÃO DO VIEWPORT, CORREÇÃO DO POSICIONAMENTO DO TÍTULO DO POST E OPENGRAPH DO FACEBOOK.
Assim:
Salve.

O que fizemos?
Corrigimos o viewport do template e o deixamos pronto para ser responsivo.
Este é o primeiro passo para deixar qualquer tema nativo do Blogger responsivo: corrigir o viewport.

Também aproveitei para corrigir a exibição dos títulos dos posts.
Por padrão, no Blogger, o título do blog vem antes do título dos posts, mas para SEO isso é ruim.
Agora com essa correção o título do post aparece antes do nome do blog.

Fiz também uma otimização bem simples, que substitui o nome do blog por Página não encontrada quando aparecer algum erro 400 no blog.
Coisas simples mas que fazem diferença!

Para finalizar acrescentei ao código o OpenGraph que favorece quando compartilhamos posts do blog no Facebook. Esse código ajuda a mostrar a imagem do post nos compartilhamentos, conforme tutorial que você confere aqui:



Correção da área de renderização/exibição do template:


Vamos seguir?
Descendo um pouquinho no código-fonte você verá isso:
/* Columns

Abaixo dessa linha tem esse trecho:
.content-inner {
  padding: 0;
}

Selecione-o e no lugar cole isso: (está tudo disponível para ser copiado no blog de códigos, ok? não se desespere!)

.content-inner {
width: 100%;
max-width: 1440px;
margin: 0 auto
}

O que fizemos?
Ajustamos a área de exibição do template.
Eu defini que a área a ser renderizada seria 1440px e sugiro que você mantenha assim.
Mas pode ser mais, pode ser menos.
Esse valor é para facilitar termos um ponto de partida quando formos personalizar áreas como menu, postagens relacionadas, etc...
No fim não faz muita diferença mas facilitará nossa vida.

Ajustar e corrigir  a área do header:


Agora localize isso:
/* Header

Abaixo cole o CÓDIGO DE AJUSTE DO HEADER.
Ajuste o valor em max-width: 628px; para o valor exato de seu logo.
Salve.

Localize:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

E coloque o comando para centralizar o cabeçalho, ficando assim:

<center><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></center>

Salve.

O que fizemos?
Ajustamos a posição do cabeçalho, centralizando-o, e já o deixamos pronto para ser responsivo quando chegarmos lá.
Sigamos.

Ajuste do layout


Localize isso:
/* Widgets

Selecione até achar  .sidebar .widget {

Apague e cole o CÓDIGO LAYOUT GERAL no lugar.
Salve.
Visualize.

O que fizemos?
Uma bagunça, você deve ter pensado ao visualizar.
Mas calma, daqui há pouco se ajeita.
Esse passo prepara o template para ser responsivo. Já já você verá a mágica!

Correção da área dos posts:

Localize:

/* Posts
----------------------------------------------- */

E selecione até achar

/* Comments
----------------------------------------------- */

Troque todo o código selecionado pelo CÓDIGO /* ÁREA DA DATA E POSTS
Salve.

O que fizemos:
Ajustamos a área dos posts para ser responsiva e também corrigimos alguns erros do tema.
Nada muito profundo, ainda.
Também centralizei a data (text-align: center;) e preparei a área dos títulos do post e dos marcadores para quando formos personalizar a área do post em formato lista.
Ajustamos também o posicionamento das imagens, para evitar erros de exibição.
Sigamos para finalizar essa parte e deixar de fato o layout responsivo.


Ajustes e códigos de correção:


Antes disso vamos incluir os códigos de correção, para levarmos menos sustos quando fizermos o passo seguinte!

Localize ]]></b:skin> e acima dele cole o CÓDIGOS DE CORREÇÃO E AJUSTES
Salve.

O que fizemos?
Incluímos códigos que escrevi para corrigir erros na exibição em celulares.
Também adicionei os comandos para excluir a navbar, retirar aquela mensagem Assinar: postagens atom e retirei a atribuição. Segui parte desse tutorial: 6 truques fáceis para blog que você precisa testar hoje mesmo


Aplicar media queries ao layout


Agora vamos fazer a mágica de ajeitar tudo!
Localize
<b:template-skin>
e selecione até
</b:template-skin>
Apague tudo.

No lugar cole o CÓDIGO QUE DEFINE A RESPONSIVIDADE.
Salve.
Visualize.

A dica de ouro:
Visualize seu blog de testes no navegador Chrome.
Aí, no menu de opções do navegador (os 3 pontinhos que aparecem na direita da tela, no alto) clique em Mais ferramentas/Ferramentas do desenvolvedor.
Vai aparecer seu blog totalmente responsivo!
Vá olhando as resoluções, veja que legal!

O que fizemos?
Adicionamos as media queries que de fato permitem ao blog ser responsivo.
Nesse momento seu template já é responsivo e está pronto para ganhar cores, fontes, recursos e ficar lindo!

Agora vamos inserir o cabeçalho no blog.
Para fazer isso você deve seguir esse caminho: clique na aba Layout de seu blog de testes e a seguir clique em Editar na área Cabeçalho.
Vai abrir uma janelinha.
Clique em Escolher arquivo e selecione a imagem do seu logo ou cabeçalho que pedi para criar lá no primeiro post dessa Série Fazendo meu layout.
Espere a imagem carregar, marque a caixinha Em vez de título e descrição e salve.
Salve a organização do layout.

Ajustar cores, plano de fundo e fontes do template:
Caso queira deixar seu tema exatamente como está o meu, com as mesmas cores e fontes, mesmo plano de fundo, etc... faça da seguinte maneira:
Volte ao código-fonte de seu blog de testes e clique em Editar HTML.
Aí, dentro da caixa do código-fonte, tecle Ctrl+F e na barra de busca que aparecer pesquise por
/* Variable definitions

Selecione todo o código, até chegar em
/* Content

No lugar de todo o trecho selecionado cole meu CÓDIGO DAS VARIÁVEIS DO BLOGGER.

Copiar os códigos das Variáveis


Salve.
Seu tema, nesse momento, estará exatamente assim:

Nada bom, né?
Mas chegaremos lá, pode apostar!


Importante:
Caso queira escolher suas próprias cores e fontes, e plano de fundo, etc... faça assim:
Clique na aba Tema, e a seguir clique em Personalizar.
Vai abrir o editor para modificar cores, fontes, plano de fundo, etc...
Escolha as cores que desejar, coloque plano de fundo se desejar, selecione as fontes, etc...
Depois de pronto clique em Aplicar ao blog.
Mas atenção!
Só clique em Aplicar ao blog se tiver certeza.
Depois de clicar não tem volta ao que era antes, ok?


Agora vamos seguir na personalização, incluir coisas, fazer ajustes, modificar ainda mais até chegarmos no Tema Fernanda.
Mas por hoje paramos por aqui.
Rendemos bastante, né?

Releia o tutorial por escrito, veja o vídeo que gravei, faça e refaça os passos que ensinei hoje até dar certo.
Vai dar, não tenho dúvida, eu acredito em você!
Eu fiz e refiz cada passo dessa fase da Série Fazendo meu layout ao menos umas 10 vezes, até conseguir fazer de cabeça.
Então, vai por mim, se der algo errado na primeira vez, tente de novo. E de novo. E de novo...
A gente se vê em breve.
Mispera?








11 comentários

  1. Mais pra frente estarei seguindo esses tutorias para personalizar meu blog, mas por enquanto vou aproveitar um pouco do template Rebecca que amei.

    www.andreiapaula.com.br

    ResponderExcluir
  2. Dicas interessantes. Beijinho. Tudo de bom.

    ResponderExcluir
  3. Boa tarde, parabéns pelo ótimo trabalho, quando o texto 3 dessa série está disponível? Obrigado.

    ResponderExcluir
  4. (Fiz esse comentário no vídeo do YouTube mas vi no segundo vídeo que você fala que vê mais os comentários aqui então cá estou eu kkkk)

    Elaine me ajudaaaaa! Eu amei o tema Amanda e coloquei ele no blog de teste né, daí queria mudar o fundo e deixar igual esse do tema Fernanda e fiz essa substituição que você disse no finalzinho, mas tá dando erro por causa do $ onde seria pra colocar cores né, não sei o que faço kkk. Eu queria muito usar o tema Amanda com o fundo de tijolinhos do tema Fernanda

    ResponderExcluir
    Respostas
    1. Stéphanie, para usar o fundo de tijolinho tem que tirar o fundo que está no Tema amanda.
      Até dá pra usar ambos mas aí seria outro código, mais complicadinho.
      Para trocar um pelo outro vá em Tema/Personalizado/Plano de fundo
      A[i delete o fundo nativo e coloque o outro que deseja.
      Aplique ao tema e tá feito.
      Para usar ambos, como eu disse, até dá mas o fundo do Tema Amanda não é transparente, aí não rola...
      bjssss e obrigada por ver o vídeo!

      Excluir
  5. Oi, não consigo colocar esse fundo de tijolo em nenhum tema, nem nos seus e tentei também no simples do blog sem mexer em nada apenas fazendo a alteração que você fala pra fazer e ficar o fundo de tijolo e sempre da erro, dizendo que foi usado mas não definido. Não sei mais o que fazer kk

    ResponderExcluir
    Respostas
    1. Stéphanie, é só seguir o que expliquei acima, não tem erro.
      Tem um vídeo meu de 2012, talvez ajude:
      https://www.youtube.com/watch?v=5rYANpQMe0U&feature=player_embedded

      Excluir
  6. Boa tarde, Elaine, blog espetacular estou aprendendo muito com vc, porém ainda falta muito pra que meu layout fique como eu quero, só por curiosidade, o tema empório da pra ter postagens relacionadas nele? e também caso não seja possível colocar no empório, vc tem um tutorial de como colocar as postagens agrupadas de forma similar a ele (pode ser um slider com 2 colunas de posts, porém só com imagens sem os snippets) Grato. https://revertherio.blogspot.com/

    ResponderExcluir
    Respostas
    1. Dark, os temas Emporio, Soho, Contempo e Notávrel quase não permitem personalização.
      Eu nunca tentei adicionar os relacionados em nenhum deles, então não sei dizer.
      Mas experimenta, de repente dá certo... eu nunca tentei porque não gostei dos modelos e suas limitações...

      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…