Posicionando Sidebar e Área de Postagens


Olá!!! Respondendo a uma dúvida feita lá no UserVoice do Reino Kawaii, hoje vou mostrar como posicionar as barras laterais ou sidebars e a área de postagem de um blog, isso é, deixá-las mais para cima, mais para baixo, perto do cabeçalho ou longe; mais para a esquerda ou direita você pode deixar de forma básica no Designer de Modelo (Modelo-Personalizar), modificando as larguras do blog (Modelo-Personalizar-Ajustar Larguras). Façam em um blog de testes primeiro para não danificar nada na estrutura de seu layout, apesar de ser super fácil sempre é bom testar neh. Vamos lá!
1. Sidebar Esquerda
Em Modelo - Editar HTML procure por uma área semelhante ou igual a essa:

.main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
      }

Acrescente margin-top, que faz com que possamos posicionar elementos em um layout com relação ao topo, ficando assim:

.main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
        margin-top: -200px;
      }

Troque o -200px por outro número de acordo com o que desejar fazer, lembrando que o número negativo fará com que a sidebar suba, o positivo fará com que ela desça.

2. Sidebar Direita
Em Modelo - Editar HTML procure por uma área semelhante ou igual a essa:

.main-inner .column-right-outer {
        width: $(main.column.right.width);
        margin-right: -$(main.column.right.width);
}

Acrescente margin-top, que faz com que possamos posicionar elementos em um layout com relação ao topo, ficando assim:

.main-inner .column-right-outer {
        width: $(main.column.right.width);
        margin-right: -$(main.column.right.width);
        margin-top: -200px;
}

Troque o -200px por outro número de acordo com o que desejar fazer, lembrando que o número negativo fará com que a sidebar suba, o positivo fará com que ela desça.

3. Área de Postagens
Em Modelo - Editar HTML procure por uma área semelhante ou igual a essa, que fica geralmente dentro de /* Posts:

.main-inner .column-center-inner {
  padding: 0 $(main.padding);
}

Acrescente margin-top, que faz com que possamos posicionar elementos em um layout com relação ao topo, ficando assim:

.main-inner .column-center-inner {
  padding: 0 $(main.padding);
  margin-top: -100px;
}

Troque o -100px por outro número de acordo com o que desejar fazer, lembrando que o número negativo fará com que a área de postagem suba, o positivo fará com que ela desça.
Só isso. Simples não é? Beijus ;3






Postar um comentário

6 Comentários

  1. Que bom que você postou sobre isso!!
    Sempre me perguntei e procurei sobre como posicionar a sidebar e área das postagens,seu tutorial vai me ajudar muito!
    Muito Obrigada!!

    http://sarang-cute.blogspot.com.br/

    ResponderExcluir
  2. muito bom tuto, gostei :)
    -kissus-

    ResponderExcluir
  3. Amei <3
    esse post salvou meu layout

    ResponderExcluir
  4. Anônimo10 dezembro

    Amei, ótimo tutorial!

    ResponderExcluir
  5. Oe, amei o tuto e me ajudou tipo super, kiss...
    ~> Mini Realeza<~

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up