Tornar o Template Travel do Blogger Responsivo

Atualmente, os leitores acessam blogs e sites através de todo tipo de dispositivo, como computadores desktop, notebooks e dispositivos móveis, como os celulares e tablets. Ou seja, existem diversos tamanhos de telas e quando os usuários acessarem seu blog, eles não o verão com a mesma resolução que você. Por isso, é crucial ter um layout que seja responsivo para que seus leitores não tenham dificuldade para ler seus conteúdos.

O que é um site responsivo?

Um site responsivo é aquele que se ajusta automaticamente para uma melhor experiência quando vistos de telas menores, como celulares e tablets.

Aprenda a como aplicar esta técnica em seu blog continuando a ler a postagem!

Como tornar um blog responsivo?

É importante destacar que este tutorial está sendo feito tendo como base o template Travel do blogger e que ele está sendo feito após a realização do tutorial Editando o Modelo Travel do Blogger. Tomaremos como base a imagem abaixo de um blog exemplo. Nele, há colunas (sidebar) na esquerda e direita. No meio, há a área de postagens. Este tutorial também funciona para blogs que possuem sidebar em apenas um dos lados ou que não possuem sidebar.


O nosso objetivo é que, quando o usuário esteja em uma tela que a resolução seja menor que a largura total do corpo do blog (distância da coluna esquerda até a coluna direita), as postagens e as colunas tenham seu tamanho reajustado. O comportamento esperado pode ser visualizado aqui.

1 Vá para Tema > Editar HTML > Clique na caixa de código e aperte Ctrl + F ou F3 > Procure por html body .region-inner {, você irá encontrar algo semelhante ao trecho a seguir. Apague tudo.
html body .region-inner { min-width: 0; max-width: 100%; width: auto; } 2 Agora, procure por <b:template-skin>. Você irá encontrar algo semelhante ao trecho de código abaixo: <b:template-skin> <b:variable default='960px' name='content.width' type='length' value='1000px' /> <b:variable default='0' name='main.column.left.width' type='length' value='200px' /> <b:variable default='310px' name='main.column.right.width' type='length' value='200px' /> <![CDATA[ body { min-width: $(content.width); } .content-outer, .content-fauxcolumn-outer, .region-inner { min-width: $(content.width); max-width: $(content.width); _width: $(content.width); } .main-inner .columns { padding-left: $(main.column.left.width); padding-right: $(main.column.right.width); } .main-inner .fauxcolumn-center-outer { left: $(main.column.left.width); right: $(main.column.right.width); /* IE6 does not respect left and right together */ _width: expression(this.parentNode.offsetWidth - parseInt("$(main.column.left.width)") - parseInt("$(main.column.right.width)") + 'px'); } .main-inner .fauxcolumn-left-outer { width: $(main.column.left.width); } .main-inner .fauxcolumn-right-outer { width: $(main.column.right.width); } .main-inner .column-left-outer { width: $(main.column.left.width); right: 100%; margin-left: -$(main.column.left.width); } .main-inner .column-right-outer { width: $(main.column.right.width); margin-right: -$(main.column.right.width); } #layout { min-width: 0; } #layout .content-outer { min-width: 0; width: 800px; } #layout .region-inner { min-width: 0; width: auto; } body#layout div.add_widget { padding: 8px; } body#layout div.add_widget a { margin-left: 32px; } ]]> </b:template-skin> 3 Substitua todo o trecho de código acima pelo trecho abaixo: <b:template-skin> <b:variable default='960px' name='content.width' type='length' value='1000px'/> <b:variable default='0' name='main.column.left.width' type='length' value='200px'/> <b:variable default='310px' name='main.column.right.width' type='length' value='200px'/> <![CDATA[ .content-inner, .main-inner { max-width: $(content.width); width: 100%; margin: 0 auto; } .main-inner .columns { padding-left: $(main.column.left.width); padding-right: $(main.column.right.width); } .main-inner .column-left-outer, .main-inner .fauxcolumn-left-outer { width: $(main.column.left.width); } .main-inner .column-left-outer { right: 100%; margin-left: -$(main.column.left.width); } .main-inner .column-right-outer, .main-inner .fauxcolumn-right-outer { width: $(main.column.right.width); } .main-inner .column-right-outer { margin-right: -$(main.column.right.width); } /* Layout Editor ----------------------------------------------- */ body#layout { min-width: $(content.width); } #layout { min-width: 0; } #layout .content-outer { min-width: 0; width: 800px; } #layout .region-inner { min-width: 0; width: auto; } body#layout .main-inner .fauxcolumn-center-outer { left: $(main.column.left.width); right: $(main.column.right.width); /* IE6 does not respect left and right together */ _width: expression(this.parentNode.offsetWidth - parseInt("$(main.column.left.width)") - parseInt("$(main.column.right.width)") + 'px'); } body#layout div.add_widget { padding: 8px; } body#layout div.add_widget a { margin-left: 32px; } ]]> </b:template-skin>

warning Atenção!
Nas primeiras linhas estão as variáveis de largura das sidebars e da área de postagens, você pode editar os valores manualmente (propriedade value) ou ir na personalização do modelo através do menu de configuração do Blogger.

4 Salve. Agora, se você redimensionar o tamanho do seu navegador ou acessar seu blog em um outro dispositivo, com uma resolução menor que o tamanho total do blog (Configurado em Tema > Personalizar), seu site irá se ajustar ao tamanho total da tela, conforme exemplo abaixo.


Entretanto, em determinadas resoluções, ainda pode ser difícil visualizar todo o conteúdo ou ter uma boa experiência durante a utilização do seu blog, pois as sidebars ou a postagem podem ficar muito pequenas. Para corrigir isto, utilizaremos a propriedade @media do CSS.

É recomendado seguir com o tutorial apenas se o seu blog possui alguma sidebar, caso contrário, não haverá nenhuma alteração de comportamento, pois a única coluna presente no seu blog é a área de postagens.

5 Ainda dentro do trecho de código do Passo 3, antes de #layout {, adicione o seguinte trecho de código: @media only screen and (max-width: calc($(content.width) - ($(main.column.left.width) + $(main.column.right.width)) / 2) ) { .main-inner .columns-inner { display: flex; flex-direction: column; } .main-inner .columns { padding-left: 0px !important; padding-right: 0px !important; } .main-inner .column-left-outer, .main-inner .fauxcolumn-left-outer { order: 2; margin-left: 0px !important; right: 0px !important; } .main-inner .column-center-outer, .main-inner .fauxcolumn-center-outer { order: 1; } .main-inner .column-right-outer, .main-inner .fauxcolumn-right-outer { order: 3; } .main-inner, .main-inner .column-left-outer, .main-inner .fauxcolumn-left-outer, .main-inner .column-center-outer, .main-inner .fauxcolumn-center-outer, .main-inner .column-right-outer, .main-inner .fauxcolumn-right-outer { max-width: 100%; width: 100%; } } A solução proposta faz com que todas as colunas (sidebar esquerda, postagens e sidebar direita) tenham a largura total da tela, e para que as postagens fiquem no topo, é alterada a ordem dos elementos. Assim, as postagens (foco principal do blog) ficam no começo, enquanto as sidebar são jogadas para o final do blog, após elas. Caso não queira este comportamento, apague as alterações nas classes .main-inner .column-left-outer e .main-inner .column-center-outer do trecho acima onde a propriedade order é alterada.

A linha calc($(content.width) - ($(main.column.left.width) + $(main.column.right.width)) / 2) calcula automaticamente qual a melhor resolução para aplicar a regra explicada anteriormente, caso queira fixar outro valor, substitua esta linha inteira pelo valor desejado.

No fim, o trecho deste passo faz com que o resultado seja semelhante ao da imagem abaixo:

6 É possível que, ao diminuir o tamanho da tela, uma barra de rolagem horizontal apareça, dando a impressão que seu blog está "transbordando". Para corrigir isso, procure por ]]></b:skin> e cole a seguinte parte de código acima:
.content-inner { padding: 10px 0 !important; } 7 Salve.

A partir de agora você pode editá-lo como quiser!