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 :)
Nenhum comentário:
Postar um comentário