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
Minha sugestão é que fique assim: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
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
newsidebar2-wrapper {
whidth: 150px;
main-wrapper {
whidth: 440px;
sidebar-wrapper {
whidth: 190px;
newsidebar-wrapper {
whidth: 190px;
muito bom cara ^^
ResponderExcluir