Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1502877524
Vida do cache: 1502920724
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Sidebar

Adicionando Coluna (Sidebar) ao Template

Você já deve ter visto alguns templates que possuem 3 colunas (1 coluna na parte direita, a coluna da area do post centralizada , e 1 coluna na parte esquerda)
Eu vou ensinar aqui como você pode adicionar uma outra coluna sidebar ao seu template.

Adicionar nova coluna sidebar no blog:

O 1º passo é fazer um backup do seu Template para evitar transtornos. Vá em “design” >>”editar html” e clique em “salvar modelo completo”.

Agora você precisa se familiarizar um pouco com o seguinte trecho do codigo em seu Template para poder entender a funcionabilidade dele. Aconselho que leia este artigo:
Elementos Básicos do Blogger.

Agora vejamos como adicionar uma nova coluna sidebar ao template:

Procure por esta parte do codigo HTML (use ctrl+f se preferir):


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

#main-wrapper {
margin-left: 3px;
width: 468px;
float: left; (ou $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 {
margin-right: 0px;
width: 210px;
float: right; (ou $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 Outer-Wrapper é onde contém tudo o que está no template, main-wrapper é a coluna do post e sidebar-wrapper é a coluna lateral (coluna do perfil).
O que vamos fazer é adicionar outra coluna colando logo abaixo de sidebar-wrapper, este código:


#newsidebar-wrapper {
margin-left: 0px;
width: 210px;
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 */
}

Se você quiser aplicar estilos a essa nova coluna, como cor de fundo, por exemplo, você deverá incluir a linha de código nesta parte.
Por exemplo: aplicar cor de fundo, inclua:
background: #000;
na linha #newsidebar-wrapper

Atenção: Não esqueça de somar bordas e o espaçamento que talvez você deseje que tenha entre as colunas.
Agora procure esta parte do código HTML:


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>

e cole ANTES dela:


<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'></b:section> </div>

Lembre-se que os elementos precisam estar dispostos na ordem estabelecida no HTML.
Se a 'Newsidebar' tem float: left; (flutuação à esquerda) o elemento 'div' deve ser colocado no HTML ANTES da 'div' Main-Wrapper, ficando assim:


<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

Neste exemplo, newsidebar-wrapper (nova coluna) flutua à esquerda, Main-Wrapper flutua à direita e Sidebar-Wrapper flutua à direita.

Editando a largura das colunas:

Procure no código:


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:0px;
text-align:left;
font: #000000;
background-color: #ffffff;
}

#main-wrapper {
margin-left: 5px;
width: 450px;
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 */
}

#newsidebar-wrapper {
margin-left: 0px;
width: 250px;
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 */
}

Lembre-se que:
#main-wrapper se refere à coluna do post, se você quiser aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em WIDTH.

#sidebar-wrapper se refere a coluna do perfil, os valores de WIDTH devem ser alterados. Lembre-se de configurar a largura que está estipulada em #outer-wrapper , sem ultrapassá-la.

#newsidebar-wrapper se refere a nova coluna. Os valores de WIDTH devem ser alterados de acordo com o mesmo que você estabeleceu na coluna #sidebar-wrapper.

Se você aumentar a largura das colunas sidebar, deve observar qual a largura que está estipulada em outer-wrapper e em main-wrapper, e deve ajustá-las. Caso contrário seu template pode ficar com uma aparência desconfigurada.

Dica: O ideal é estabelecer uma largura width:1000px para outer-wrapper,
width:450px para main-wrapper e width:250px para sidebar.

Confira também:
Personalizando a sidebar



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

4 Comentários

  1. Nathalia Lima disse:

    Isso só serve para o blogger antigo , tem pro blogger novo?

  2. enyta disse:

    Eba, consegui! Só que queria a nova coluna à direta do texto (deixando o texto entre duas colunas menores), ela ficou à esquerda da coluna pequena! HAHA

  3. .:: Clau ::. disse:

    @?·?•?þ?uL??ho??•???- ADM:
    Se você quiser aprender mais como personalizar a sidebar, leia este post e veja como aplicar estilos.
    Obrigada pela visita e pelo comentário.

  4. ?·?•?þ?uL??ho??•???- Adm disse:

    Olá G.Darkness, consegui colocar a coluna corretamente, so que tem um problema, não tou conseguindo editar os valores da nova sidebar, tipo colocar uma imagem atras do titulo, como faço nessa ocasião? Me ajuda, please! aguardo sua resposta!
    E outra não sou de comentar muito, mas queria dizer q seu site tem me ajudado muito, parabéns pelo ótimo conteúdo que possui!

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.