12/05/2015

Sidebar fixa (colunas,barras laterais)


Ohayoooo!!!! Hoje mim veio trazer mais um tutorial da listinha de pedidos, vou mostra como deixar a sidebar fixa. Não entendeu? Deixar a sidebar fixa é fazer com que ela não role(mover) com o blog, o leitor vai descer e subir o blog mas a sidebar continuará parada. Podem ver um pequeno exemplo aqui : www: esse tutorial encontrei lá no Dicas Para Blogger (amo esse blog). O tutorial é bem simples e fácil de executar mas se tiver alguma duvida é só perguntar, está bem? Bom agora vamos lá!
 Primeiramente abra o blog qual deseja adicionar o efeito, agora vá em Editar HTML no modelo, ative o atalho usando Ctrl+F. Se sua coluna for a direita (right) procure por:

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

Procure pela parte destacada em vermelho para melhor busca. Encontrando apague tudo e no lugar cole:

Códigos
.main-inner .column-right-outer {
margin-top:-10px;
margin-left: 550px;
position:fixed;
}

Se sua coluna fora a esquerda (left) procure por:

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

Procure pela parte destacada em vermelho para melhor busca. Apague tudo e no lugar cole:

Códigos
.main-inner .column-left-outer {
margin-top:-10px;
margin-left: -375px;
position:fixed;
}

Obsajuste/mude os valores de acordo com o que você quer mudando em margin-top e margin-left.

É isso! Espero que gostem, beijinhos e choquinhos~

9 comentários:

  1. Brigada estou terminando de arrumar o lay do blog (o novo leyout) e estou utilizando isse tutorial eu já tinha visto em outros blogs a sidebar fixa mas nunca vi um tutorial muito obrigada Wendy!
    Já te coloquei na elite PB♥

    ResponderExcluir
    Respostas
    1. =3 eu que agradeço. Tambem ja coloquei voce

      Excluir
  2. Brigada estou terminando de arrumar o lay do blog (o novo leyout) e estou utilizando isse tutorial eu já tinha visto em outros blogs a sidebar fixa mas nunca vi um tutorial muito obrigada Wendy!
    Já te coloquei na elite PB♥

    ResponderExcluir
  3. Anônimo12/5/15

    Oii 'u' Adorei esse tutorial, vou usa-lo no proximo lay :3
    xoxo *3*
    Candy Bomb

    ResponderExcluir
  4. Anônimo12/5/15

    Tutoriais sempre muito úteis o/

    ResponderExcluir
  5. -Eu estava louca por esse tutorial <3 Obrigaduu :3.
    Fico feliz que esteja de volta rs .

    http://belovedcoffee.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Nao foi nada Hihi eu fico tao contente de poder voltar a postar e conversar com vcs

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345