sábado, 9 de abril de 2011

Como aumentar ou diminuir o tamanho da área de postagem do blog

Aumentando área de postagem no blogger

Deixe o espaço de seu conteúdo do tamanho desejado com este pequeno tutorial. Mas além de mostrar como aumentar o tamanho da área de postagem, você aprenderá também a aumentar e diminuir outras áreas, como a sidebar (coluna) e a folha da página (coluna principal). Tudo em 1 só tutorial =]

Primeiramente, já logado no blogger, vá em “Design” – “Editar HTML” e procure pelo trecho mais abaixo. Caso o código CSS não esteja na seguência como você vê, procure por pedaços, primeiro #outer-wrapper {…} , segundo #main-wrapper {…} e por útimo o trecho #sidebar-wrapper {…}.
Obs – os 3 pontinhos nas chaves significa os códigos CSS contido dentro do mesmo conforme os trechos abaixo.

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}


#main-wrapper {
margin-left: 5px;
width: 550px;
float: left;
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 {
margin-right: 0px;
width: 250px;
float: right;
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 */
}

Como você pode perceber, todos os trechos possuem o código WIDTH, que está destacado, e cuja função é determinar a lagura em px.

O trecho de #outer-wrapper {…} é a ID da folha da página.

O trecho  #main-wrapper {…} é a ID da coluna principal do blog, onde localiza-se a área do post.

O trecho #sidebar-wrapper {…} é a ID da coluna lateral do blog.

Tome muito cuidado ao alterar os tamanhos, recomendo que aumente os mesmo tamanho para cada um deles. Por exemplo, se você colocar mais 50px no valor de WIDTH do tamanho da folha da página (#outer-wrapper) coloque mais 50px nos demais trechos também.

Ou se preferir, não altere o tamanho da folha da página, apenas altere o tamanho da coluna principal (#main-wrapper) para um tamanho maior e diminua o tamanho da coluna lateral (#sidebar-wrapper) com as mesma quantidade de pixels da coluna principal.

Por exemplo.

#main-wrapper {
margin-left: 5px;
width: 600px;           /* AQUI EU ACRESCENTEI 50px*/
float: left;
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 {
margin-right: 0px;
width: 200px;         /* AQUI EU RETIREI 50px*/
float: right;
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 */
}

Depois de fazer as alterações, salve o modelo.

Espero que tenha intendido, mas se tiver dúvidas, deixe um comentário.

Marcadores: , , ,