uoshi: Como deixar o blogger responsivo

Eu sempre amei brincar com códigos HTML, CSS e JS no Blogger, isso desde que me conheço na blogsfera – podemos voltar em 2008, talvez. Porém, foi triste ver como o Blogger se manteve simples e não acompanhou todas as necessidades que a usabilidade exige hoje em dia, como a responsividade. Mas, encontrei um tutorial super interessante e vou deixar compartilhado aqui para quem está tentando deixar o Blogger responsivo e ainda não conseguiu encontrar boas respostas!

A versão /m (mobile) da plataforma não é de toda ruim, se propõe de maneira muito simples a ser uma lista das postagens, nada mais. Mas manter uma leitora engajada hoje exige mais do que o conteúdo, mas também um bom trabalho estético. Existem, claro, diversos temas por aí, vendidos até mesmo no Etsy, mas também há muita gente que, como eu, ainda gosta dos temas clássicos e de trabalhar sobre eles.

Pensando na praticidade do Blogger e também na nostalgia de estar em um espaço mais comunitário, mesmo que em uma dimensão bem menor do que antes, eu acabei desativando meus sites e migrando novamente para cá, mas precisava resolver algo muito importante: como deixar o tema básico do Blogger responsivo, mesmo que ainda o preservando simples. E nessa busca encontrei um tutorial que me ajudou e pode te ajudar também.

Basicamente você terá que fazer algumas alterações dentro do editor do seu tema, é bem simples, mas aconselho você usar esse tutorial somente se estiver utilizando o "tema clássico" ou o "simples", pois eu não cheguei a testar como ele se comporta com os demais. Dito isso, vamos lá.

Tema com barra lateral do lado direito

1. Acesse tema > personalizar e escolha o tema com a barra lateral do lado direito.

2. Acesse tema > fazer backup (dentro do botão personalizar) para baixar o seu tema caso algo dê errado e você precise restaurar.

3. Acesse tema > editar html (dentro do botão personalizar) e faça as alterações abaixo:

Encontre esse código abaixo da tag <head>

Encontre e selecione o código ]]></b:skin> até ]]></b:template-skin> e substitua pelo código abaixo

/*CSS for responsive theme*/ .post-body iframe {width: 100%; display: block;} .post-body img {width: 100%; display: block; margin: -5px;} .separator a {margin-left: 0px!important; margin-right: 0px!important;} .post img {max-width: 100%; height: auto;} @media screen and (max-width: 1024px) {body {width: 100%!important; padding: 0;}.content-inner {overflow: hidden;}} @media screen and (max-width: 768px){.main-inner .column-center-outer, .main-inner .column-right-outer {float: none; width: 100%!important;} .Header h1{font-size: 35px; text-align: center;} .Header .description {font-size: 13px; text-align: center;} .footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner {padding: 0;}} @media screen and (max-width:414px){.footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner.section {margin:10px;}} @media screen and (max-width:320px){fauxcolumn-right-outer .fauxcolumn-inner{border-left: none;}.fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;} footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin: 0;} ]]></b:skin> <b:template-skin> <![CDATA[ body {width: 1133px; margin: 0 auto; min-width:$(content.width);} .main-inner .column-right-outer {width: 30%; float: right; margin-right:-$(main.column.right.width);} .main-inner .column-center-outer {float: left; width: 70%;} #layout {min-width: 0;} #layout .content-outer {min-width:0; width: 800px; margin-left: 1px;} #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>

***

Tema com barra lateral do lado esquerdo

Siga os passos 1, 2 e 3 escolhendo a barra lateral esquerda e então:

Encontre esse código abaixo da tag <head>.

Encontre e selecione o código ]]></b:skin> até ]]></b:template-skin> e substitua pelo código abaixo

/*CSS for responsive theme*/ .post-body iframe{width:100%; display:block;}.post-body img{width:100%; display:block; margin:-5px;} .separator a{margin-left:0px!important;margin-right:0px!important;}.post img{max-width:100%;height:auto;} @media screen and (max-width:1024px){body{width:100%!important;padding:0;}.content-inner{overflow: hidden;}} @media screen and (max-width:768px){.main-inner .column-left-outer{position:relative!important;left:0;margin:auto;width:100%!important} .main-inner .column-center-outer{left:0!important;width:100%!important} .footer-inner, .main-inner .column-left-inner, .main-inner .column-center-inner{padding:0;} .Header h1{font-size:30px;text-align:center;} .Header .description{font-size:14px;text-align:center;}} @media screen and (max-width:414px){.footer-inner .section, .main-inner .column-left-inner .section, .main-inner .column-center-inner .section {margin:10px;}} @media screen and (max-width:320px){.fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;} .fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;} .footer-inner .section, .main-inner .column-left-inner .section, .main-inner .column-center-inner .section {margin:0;}} ]]></b:skin> <b:template-skin> <![CDATA[ body {width:1133px;margin:0 auto; min-width:$(content.width);} .main-inner .column-left-outer {width:30%;right:70%; position:absolute; margin-left:-$(main.column.left.width);} .main-inner .column-center-outer{left:30%; width:70%;} #layout {min-width: 0;} #layout .content-outer{min-width:0; width:800px; margin-left:1px;} #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>

***

Tema com barra lateral do lado direito e esquerdo

Siga os passos 1, 2 e 3 escolhendo a barra lateral em ambos os lados e então:

Encontre esse código abaixo da tag <head>

/*CSS for responsive theme*/ .post-body iframe{width:100%; display:block;}.post-body img{width:100%; display:block; margin:-5px;} .separator a{margin-left:0px!important;margin-right:0px!important;}.post img{max-width:100%;height:auto;} @media screen and (max-width:1024px){body{width:100%!important;padding:0;}} @media screen and (max-width:768px){.main-inner .column-left-outer{position:relative!important;left:0;margin:auto;width:100%!important} .main-inner .column-center-outer{left:0!important;width:100%!important} .main-inner .column-right-outer{float:none;width:100%!important;} .Header h1{font-size:30px;text-align:center;} .Header .description{font-size:14px;text-align:center;} footer-inner, .main-inner .column-left-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}} @media screen and (max-width:414px){.footer-inner .section, .main-inner .column-left-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section {margin:10px;}} @media screen and (max-width:320px){.fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;} .fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;} .footer-inner .section, .main-inner .column-left-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}} ]]></b:skin> <b:template-skin> <![CDATA[ body {width:1133px; margin:0 auto; min-width:$(content.width);} .main-inner .column-left-outer {width:20%; right:80%; position:absolute; margin-left:-$(main.column.left.width);} .main-inner .column-right-outer {width: 20%; float:right; margin-right:-$(main.column.right.width);} .main-inner .column-center-outer{left:20%; width:60%;} #layout {min-width: 0;} #layout .content-outer {min-width:0; width:800px; margin-left:2px;} #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>

***

O processo é simples e espero que ajude. Caso algo dê errado ou você precise de ajuda – como eu já precisei, deixe um comentário e eu tento ajudar.

Até logo.

uoshi

29.11.24

Como deixar o blogger responsivo

Tema com barra lateral do lado direito

Tema com barra lateral do lado esquerdo

Tema com barra lateral do lado direito e esquerdo

Nenhum comentário:

Postar um comentário

Favoritos

Seguidores