Tutorial: Deixando o Layout Responsivo (Tema Travel)

24/08/2023 ✤

Olá~ São 16:11h enquanto digito isso aqui, e estive pensando em fazer algum tutorial sobre algo que eu sei fazer (ou pelo menos aprendi ao longo dessa situação). Recentemente eu tentei acessar o blog da Elaine Gaspareto e ele já estava fora do ar (contexto: Elaine era um blogueira muito influente no blogspot que ensinava muito sobre blogar, eu usava o blog dela para aprender sobre HTML e outros truques. Infelizmente na pandemia ela veio a falecer. Sua amiga fez um post em seu blog explicando a situação e como não tinha acesso administrativo do blog, ele provavelmente iria sair do ar quando o domínio expirasse.

Hoje em dia a responsividade do blog parece valorizar muito o site em si. Mas para quem é da velha guarda do blogspot, não chegou a passar muito pela cabeça o avanço do uso do celular: hoje em dia todo mundo prefere fazer quase tudo pelo celular. Então vou tentar ensinar a deixar o layout tão agradável no celular quanto no PC.


Lembrando que: Eu estarei fazendo no template do Travel da nova geração. Se vocês quiserem, poderei fazer com o layout da versão clássica em outro post.


Vou usar esse layout simples que fiz para este tutorial, ele não tem nada muito complicado. Eu usei o tema Travel como base. 


1. Configurar para ser visualizado como no Desktop

No painel do Tema, clique na Seta ao lado de Personalizar para expandir o menu suspenso. Em seguida, clique em Configurações do Celular. Ative a opção Computador e Salve. Isso fará com que o tema do desktop seja mesmo visto no celular, visto que por padrão, o blogspot oferece temas prontos para mobile.



2. Adicionando a Meta Tag de Viewport

Agora partindo para parte legal do babado, vamos entrar no código do layout, indo no mesmo caminho dito anteriormente, clique na opção Editar HTML. Vamos adicionar o Meta tag no código, ela ajuda a definir a largura do dispositivo como a largura inicial da viewport e escala o conteúdo conforme necessário. 


O blogspot já tem um Meta padrão, no entanto ela lida com o condicional <b:if> relacionado a dispositivos móveis que o blogger inventa pra encher nosso saco. Como estamos trabalhando com o mesmo visual Desktop>celular, a gente vai adicionar nosso próprio. 


Dentro do código, localize <head>. Abaixo dela, substitua a meta tag existente:


Pelo nosso:




<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Essa meta tag do viewport definirá a largura do dispositivo como a largura inicial da viewport e evitará que o usuário faça zoom, resultando em um layout responsivo que se ajusta a diferentes tamanhos de tela, incluindo dispositivos móveis e desktops.

3. Corrigindo erros padrões

Primeiro vamos definir uma configuração inicial para o elemento * (que significa todos os elementos) e seus pseudo-elementos. Ele é usado como um "reset" ou "normalize" de estilos, buscando padronizar o comportamento de elementos. Como se estivéssemos forçando os códigos ficarem 'normais' mesmo estando errados.


Dentro de algum elemento <style> (no caso do blogspot pode ser onde você edita seu css, ou seja, antes da famigerada ]]></b:skin>) cole o seguinte código e salve:



* {margin:0;
 padding:0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }
 *, *:before, *:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }

Agora, vamos fazer com que elementos de mídia se ajustem automaticamente à largura do contêiner em que inserimos. Cole o código abaixo:




  
img, embed, iframe, object, video, #player { 
max-width: 100%; border:0; 
}

4. Ajustando as áreas com media queries

Para deixar a área do post do tamanho total da tela no celular, vamos usar media queries CSS para aplicar estilos diferentes com base no tamanho da tela. Isso permite que você ajuste o layout, tamanhos de fonte e outros elementos em diferentes tamanhos de tela. No nosso caso, vamos adaptar nosso layout para o celular que costumam ter o tamanho abaixo de 767px. Dentro do Media, nós adicionamos QUALQUER edição de estilo que queiramos editar nas telas menores que 767px. 


Ainda no <style> (ou antes do ]]></b:skin>) cole o seguinte código:






    /* abrindo o babado para Estilizar em telas menores */
@media (max-width: 767px) { 


/* ---------------------------------------------------------- */
/* ----------alinha as colunas principais do layout:--------- */
/* ---------------------------------------------------------- */
body, .content-outer, .region-inner { 
	display: flex; /* deixa o babado flexivo como o nome já diz */
	flex-direction: column;
	width: 100%!important;
	min-width:100%!important;
	padding:0!important;
}


/* ---------------------------------------------------------- */
/* ajusta o conteiner central: */
/* ---------------------------------------------------------- */

.main-inner .columns {
	padding-right: 0!important;
}


/* ---------------------------------------------------------- */
/* deixa a sidebar DIREITA (se tiver) 
na largura total, jogando-a para baixo: */
/* ---------------------------------------------------------- */
.main-inner .column-right-outer { 
	width: 100%!important;
	margin-right: 0!important;
}


/* ---------------------------------------------------------- */
/* deixa a sidebar ESQUERDA (se tiver) 
na largura total, jogando-a para baixo: */
/* ---------------------------------------------------------- */

.main-inner .column-left-outer { 
	width: 100%!important;
	margin-right: 0!important;
}




/* ---------------------------------------------------------- */
/* ajusta a header padrão do layout (caso tiver): */
/* ---------------------------------------------------------- */
div#header-inner{ 
	width: 100%!important;
	min-width:100%!important;
	padding:0!important;
}




} 
/* fechando o babado para Estilizar para telas menores */

  • Você pode remover os elementos que não o favorecem, como por exemplo a do cabeçalho se o seu layout não tiver. Salve as informações e visualize como ficou o seu layout no celular.

  • Todos os elementos, estilos, etc que quiser personalizar na versão do celular, você deve adicionar dentro do @media (max-width: 767px) { 


Então, meus bons, é esse o tutorial. Espero que tenha sido claro e  que ajude vocês nesse quesito. Caso queiram tutoriais de html diferenciados ou adaptados para o blogger, só deixar um comentário que eu estarei anotando para futuros post :3


Até logo~

Um comentário:

  1. Camila 18 de setembro de 2023 às 17:37

    Nossa, eu também conhecia o blog dela e já aprendi muita coisa por lá. Não sabia que ela tinha falecido :( que pena
    Preciso ajeitar meu tema mesmo, deixei isso pra depois e só percebi agora que já tem 9 meses que tá na lista de a fazer kkkk :x
    Obrigada pela visita no meu blog e por colocá-lo no seu blogroll e me julgar uma boa pessoa pq gosto do Felca HAHAHAHHAH ri demais ♥ obrigada
    1bj
    https://aavefantasma.blogspot.com

    ResponderExcluir

❀Seu comentário será muito apreciado, se quiser pode colocar o link da sua página, site ou blog para eu visitar sem problema.

❀Qualquer forma de expressão é valida (pode usar palavrões) contanto que não ofenda ou pratique algum crime de ódio;

❀Evite Spam e seja feliz