12/05/2015

15. Maratona CSS: 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:
.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:
.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. Oii 'u' Adorei esse tutorial, vou usa-lo no proximo lay :3
    xoxo *3*
    Candy Bomb

    ResponderExcluir
  4. 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

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram