Ajustando larguras do template do blogger
1 gostou2,184 visualizações
Este documento fornece instruções para ajustar as larguras do template do Blogger em 3 etapas: (1) explica a estrutura básica de um blog com cabeçalho, barra lateral e rodapé; (2) mostra como encontrar cada seção do código HTML para editar; (3) demonstra como alterar o valor "width" para ajustar o tamanho de cada seção.
Ajustando larguras do template do blogger
- 1. Ajustando Larguras do Template (Blogger). Não é preciso ser um “mestre” em HTML Para ajustar as larguras do blogger, se tivermos as informações corretas com certeza vamos conseguir configurar da maneira correta, neste artigo vou procurar mostrar da forma mais clara possível, afim de que você, acima de tudo, entenda o que está fazendo... Como exemplo, Vou usar um modelo comum de blog, com uma estrutura básica, veja na imagem abaixo, clique para ampliar... Todo Conteúdo do Blog Cabeçalho Barra Lateral Postagens Rodapé Para esta estrutura teremos a seguinte legenda: outer-wrapper: Bloco principal que envolve todo conteúdo do blog. Dentro dele estão as outras partes citadas abaixo; header-wrapper: cabeçalho (título) da página; main-wrapper: Postagens e os comentários; sidebar-wrapper: Barra lateral; footer-wrapper: Rodapé da página. Agora que você já conhece a estrutura ficará mais fácil editar os valores de cada um...
- 2. Antes de fazer qualquer alteração no modelo do blogger faça um backup do template, assim, caso aconteça algum erro você poderá restaurar o modelo anterior... Vamos lá, no painel inicial do blogger clique na guia “Modelo”, clique em “Editar HTML”, uma mensagem de alerta irá aparecer, clique em “Prosseguir”, você verá todo código HTML do modelo do seu blog, para encontrar cada valor a ser editado faça o atalho “ctrl + f” e digite a legenda que deseja editar... Veja na imagem abaixo, clique para ampliar... CTRF Já sabemos como encontrar cada legenda, agora vamos editar os valores, para isso basta alterar o valor de “width” de cada parte do modelo, veja um exemplo abaixo... # outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } # main-wrapper { width: 410px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } # sidebar-wrapper { width: 220px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } Lembre-se que o valor do “main” e da “sidebar” juntos não pode ser maior que o valor do “outer-wrapper”.
- 3. Os nomes e valores variam de acordo com o template, você pode não encontrar valores iguais a este postado aqui, mas com este conhecimento, com certeza você terá outra visão, e conseguirá editar as larguras do seu template. Para aprender mais visite - http://vpdicas.blogspot.com.br/