11 de set de 2009

Colocando 4 colunas no Blogger



Você já aprendeu a colocar a terceira coluna, coluna abaixo, no footer, coluna abaixo da header, coluna mais larga acima de duas colunas, agora, aprenda a deixar seu blog com 4 colunas.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.



Para ter a quarta coluna do Blogger, é claro que precisamos já ter 3, néam ...

A primeira coisa a fazer é salvar uma cópia de seu template, NÃO me responsabilizo por blog estragado, nem darei uma mãozinha, uma ajudinha, uma olhadinha, uma benzidinha... (Não é ruindade, é tempo zero mesmo)

Vá até o HTML de seu blog e procure pelo trecho:

/* Headings ----------------------------------------------- */

Acima, cole o próximo código:


#newsidebar2-wrapper {
background:#F7F3F3;
width: 130px;
margin-right: 1px;
margin-left: 1px;
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 */
}

*Cor vermelha é a cor de fundo do blog
*Cor verde é a largura da coluna

Agora procure pelo código

<div id='main-wrapper'>

E acima dele cole o seguinte código :


<div id='newsidebar2-wrapper'>
<b:section class='sidebar' id='newsidebar2' preferred='yes'>
<b:widget id='Poll3' locked='false' title='Qual o seu blog favorito ?' type='Poll'/>
</b:section>
</div>


Salve e veja em seu blog como ficou. Provavelmente as colunas devem estar desalinhadas, o que vc tem que fazer agora é redimencionar as outras colunas existente. Volte no HTML de seu blog e procure pelos seguintes códigos:


#outer-wrapper {
width: 980px;

outer-wrapper é a largura da folha de estilo do blog. Onde estiver "width" é a largura de cada coluna, esta primeira é o tamanho do template, aumente e vá verificando.

#main-wrapper {
width: 500px;

main-wrapper é a largura da folha de estilo onde ficam as postagens, diminua em "width" e verifique

#sidebar-wrapper {
width: 220px;

sidebar-wrapper é a largura de uma das colunas, diminua a largura em "width"


#newsidebar-wrapper {
width: 220px;

newsidebar-wrapper é a largura de uma das colunas, diminua a largura em "width"





Veja o esquema

A cor preta representa o fundo do blog, o primeiro "background" que você verá em seu blog, logo depois de <body>

A cor vermelha representa o "outer-wrapper"

A cor azul clara representa o cabeçalho do blog, a header

A rosa é a coluna que vc vai inserir, "newsidebar2-wrapper"

O verde representa o "main-wrapper" que é onde ficam as postagens

O amarelo é a "sidebar-wrapper" uma de suas colunas

O azul escuro é o "newsidbar-wrapper" que é uma de suas colunas

O cinza representa o "footer" do blog, a parte de baixo do blog

O que quero dizer com isso ?

Bom, para que as colunas fiquem alinhadas você terá que calcular quanto cada elemento terá de largura. Geralmente outer-wrapper, header e footer tem a mesma largura, portanto, width terá o mesmo número.

ex:

width: 980px;

O calculo terá que ser em cima de newsidebar2-wrapper, main-wrapper, sidebar-wrapper e newsidebar-wrapper

Minha sugestão é que fique assim:

newsidebar2-wrapper {
whidth: 150px;

main-wrapper {
whidth: 440px;

sidebar-wrapper {
whidth: 190px;

newsidebar-wrapper {
whidth: 190px;

Um comentário:

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube