TUTORIAL: Aplicando Responsividade no Blogger de Maneira Simples
Vocês também estão ansiosos pela temporada de fim de ano?
Alô, galera! Estamos de volta com nossa programação normal, mas não apenas isto, hoje eu vim prestar um serviço à galera da Blogosphera, sobretudo a quem trabalha com design de blogs!
Se você é um blogueiro, independentemente da plataforma, com certeza já ouviu falar dos temas responsivos. Eles são aqueles templates que são capazes de ajustar-se a qualquer tela sem que nada fique fora do lugar devido à diferença das dimensões dos monitores. Se você trabalha com os códigos, então sabe que é um tanto trabalhoso chegar a este resultado.
Eu estava quebrando a cabeça em alguns conteúdos que virão em pouco tempo (#suspense) e procurando mil tutoriais no assunto, mas então eu percebi que não é preciso colar tanto código no HTML no blogger, estes dois códigos que eu vou passar agora vão fazer o trabalho direitinho!
Naturalmente, ante de mais nada, você deve ter o dashboard do Blogger aberto no seu editor de HTML. Para isto, abra o menu "Tema", na barra lateral e então "Editar HTML".
Dê um CTRL+F e procure pela tag <head>. Abaixo dela você deverá encontrar o seguinte código:
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>
Seu dever agora é muito simples! Basta substituir todo este código pelo seguinte:
<meta content='width=device-width' name='viewport'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='IE=edge' https-equiv='X-UA-Compatible'/>
Para entender melhor, este é o código que vai permitir a compatibilidade do seu template em qualquer tela. Mesmo assim, as imagens do corpo do blog, se forem maiores que a largura geral, não se ajustarão. Mas isto não será problema quando você instalar o próximo código.
Ainda no editor de HTML, procure por ]]></b:skin>. Acima desta linha, você deve colar o seguinte:
.post-body img, video {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}
.sidebar .widget img, video {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}
Este código te permitirá ajustar automaticamente as imagens (e vídeos) ao corpo da postagem e da sidebar sem que elas fiquem "sobrando".
O lado bom deste tutorial é que ele é muito mais prático e até mesmo versátil, pois diferentes dos tutoriais que geralmente aparecem nas pesquisas do Google, você ainda é capaz de ajustar as larguras e escolher a disposição do blog, isto é, que a sidebar fica à direita, à esquerda ou se em ambos.
Contudo, se o seu layout não é original, ou seja, se você não fez ele, então recomendo que tome cuidado, pois a segunda parte (a das imagens) pode ser cancelada por outros códigos. Se você está começando o template novo, então recomendo que este seja o primeiro tutorial aplicado. Ah! E é recomendável sempre aplicá-lo em modelos viagem.
É claro que vocês também não podem deixar de comentar! Me contem se este tutorial funcionou para vocês ou não? O primeiro código é da Elaine Gaspareto, então não deixem de conferir o maravilhoso mundo de tutoriais que ela dispõe. Até mais, xoxo :)
0 coment�rios