menu-inline

Ajustar a largura do blog - Blogger

Antes de alterarmos as dimensões do blogger vamos conhecer como ele é estruturado e quanto de espaço vamos reservar para cada parte do layout.

»Estrutura básica do blogger.

Baseado no modelo Minima teremos a seguinte estrutura:
(Clique para ampliar / Abre em outra janela)

Estrutura do blog
Legenda:

outer-wrapper: Bloco principal que engloba todo conteúdo do blog. Dentro dele estão as demais partes citadas abaixo;

header-wrapper: Aqui fica o cabeçalho(título) da página;

main-wrapper: Aqui ficam as postagens e os comentários;

sidebar-wrapper: Aqui fica a barra lateral;
Créditos: 10calco.blogspot.com
footer-wrapper: E aqui fica o rodapé da página.

»Alterando os valores.


Para começar acessamos Design > Editar HTML > e localizamos o seguinte trecho:
#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 */
}Créditos: 10calco.blogspot.com

Como já sabemos o que cada parte faz, para mudarmos sua largura basta alterarmos o valor width de cada seletor para os valores desejados.
Lembrando que o valor do main e da sidebar juntos não devem ultrapassar o valor do outer-wrapper.

»Exemplo

Vamos deixar nosso blog compatível com resoluções de 1024px de largura para cima.
#outer-wrapper {
width: 980px;
margin:0 auto;
...
}

#main-wrapper {
width: 650px;
float: left;
margin-right:10px;
...
}

#sidebar-wrapper {
width: 320px;
float: right;
...
}
Somando o valor do main-wrapper, mais a margin-right com o valor da sidebar obtemos o valor do outer-wrapper.

Podemos ainda alterar a largura do cabeçalho com a seguinte parte do código:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
} /* Créditos: 10calco.blogspot.com */

Nota: Nem todos os templates apresentam os mesmos nomes e valores.
Baseado nas dicas passadas aqui cabe a você identificar cada parte e configurá-la como desejar.



»Não esqueça de testar seu blog em várias resoluções após definir novos valores.

Comentários 7 comentários

Marina disse...

Olá.
Eu consegui fazer isso, porém as demais páginas não se alteram. Meu blog tem o resumo das postagens na página inicial e ao clicar em "leia mais" nada novo acontece, como se minhas alterações só funcionassem para a página principal.

Você sabe me dizer o que estou fazendo de errado ou o que é preciso fazer para que essa alteração alcance todas as páginas ao mesmo tempo?

Obrigada pela atenção!

Luiz H. disse...

Olá Mariana! Seria interessante você postar o link através de contato para uma análise do código.
Mas a princípio, pode ser problema até com o "leia mais".

Abraço.

Marina Menezes disse...

Deu certinho!! Meu blog era meio "fino", e como eu baixei o template, não dava pra mudar. Agora funcionou direitinho.

Marcelo disse...

Muito bom, me ajudou bastante...

Maria Eduarda disse...

Ficou bom! Meu blog ultrapassava a tela agora tá melhor! Obrigada! :)

Paula Santana disse...

ajudou muito obrigado tudo muito bem explicado :)
http://paulasanthana.blogspot.com

Suellen Moreira disse...

Consegui ajeitar. Obrigada pela ajuda!!!