05 setembro 2012

Subir Sidebar

Olá minhas extremamente Fiéis tudo bem? 
Tenho um notícia ruim, é a Kaah nossa maravilhosa, linda , postadora do MFF esta com pneumonia é nossas leitores a Kaah tem que se cuidar, é por isso ela não esta postando, Kaah quando você ficar 100% você volta para o MFF! Não nós Deixe! Por favore! 
Então, quero fazer um tutorial super legal para aqueles que querem subir o sidebar para cima, por isso vou vós explicar passo a passo, assim seu blog fica muito cat.
Então, mãos a obra blogueira e vós blogueiras.

É só clicar em Leia Mais... Não custa NADA!
Passo a Passo para deixar a sua Sidebar para cima:

1º Passo: Vai em Design>Editar HTML>Aperte Ctrl + F e pesquise por:

width: $(main.column.left.width); (caso esta for no lado esquerdo)
.main-inner .column-right-outer { - Caso ela seja no lado direito  

 Se a sua Sidebar for esquerda vai ter alguma coisa semelhante a isso:

  .main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
      }
Se a sua Sidebar for Direita vai ter alguma coisa semelhante a isso:

      .main-inner .column-right-outer {

        width: $(main.column.right.width);

        margin-right: -$(main.column.right.width);
      .


Então, você se achou se for Direita ou Esquerda, sim né? Então de baixo de um desse códigos você vai colocar esse código a seguir:

margin-top: -150px;
Exemplo de como tem que ficar se for a Direita:

.main-inner .column-right-outer {

        width: $(main.column.right.width);

        margin-right: -$(main.column.right.width);
margin-top: -150px;

Para o fundo subir também pressione Ctrl + F  e procure por :

.main-inner .fauxcolumn-left-outer { - caso a coluna seja no lado esquerdo
.main-inner .fauxcolumn-right-outer { - caso a coluna seja no lado direito

E logo abaixo de uma das opção coloque esse outro código:
width: $(main.column.right.width); ( caso tenha a coluna no lado direito)

ou
width: $(main.column.left.width); (caso esta for no lado esquerdo)
E Novamente em um do seus escolhidos acrescente isso: 

 margin-top: -150px;

Agora vizualize e se estiver tudo correto salve. Pronto! Seu lay ficará um gatão (hahaha) 

Atenciosamente Nath 




12 comentários:

  1. Ótimo tutorial! eu já usei em algum layout, e gostei muito do resultado. O tutorial ficou super bem explicado *-*

    Beijos, momamoraes.blogspot.com s2

    ResponderExcluir
  2. ah que legal :DD

    madamehype.blogspot.com

    ResponderExcluir
  3. Oi , que lindo seu blog !!! adorei o post , tô seguindo , se quiser conhecer meu cantinho ficarei felizzzzz
    Sendo ♡ Eu

    ResponderExcluir
  4. Esse tutorial é ótimo. O resultado fica muito bonito :D

    Beijos,
    http://mundofantasticofeminino.blogspot.com

    ResponderExcluir
  5. Muito bom esse tuto, fica bem legal. Bjbj , visita lá.: http://blog-foreverpretty.blogspot.com/

    ResponderExcluir
  6. Amei seu blog,e o cabeçalho!!
    Adorei o tuto,súper útil...Seu blog é lindo hein?Vou voltar aqui concerteza<3
    Seguindo,segue de voltsa?
    ilovecantores.blogspot.com

    ResponderExcluir
  7. Que legal o tuto,súper útil!
    Amei seu blog,já to seguindo flor!
    Segue de volta?
    ilovecantores*blogspot*com

    ResponderExcluir
  8. Otimo tutorial : )

    http://www.paaradateen.com/

    ResponderExcluir
  9. Amei as dicas estou com vontade mesmo ne renovar o estilo do meu blog e essa dica servira haha guardei!!
    bjks

    mahmachado.blogspot.com

    ResponderExcluir
  10. Oi Lindona!
    Belo tutorial adorei, super legal suas dicas.
    Aguardo sua visitinha viu.
    Meu Blog: http://www.plantaodabeleza.com.br/
    Minha Lojinha: http://lojinha-blogchic.blogspot.com/
    BeijosssssssssssSimara

    ResponderExcluir
  11. Já conehcia também! Muito legal, sempre uso! Oiii, aqui é a dona do Fluffy World (que agora é celebrities eating toast) e queria que você fizesse uma visitinha no meu novo blog e fazer um comentáriozinho =3

    Esse é o link:
    http://trolladaporumnerd. blogspot.com.br/
    <<tire o espaço e visite!

    ResponderExcluir
  12. Ótimo tutorial, bem explicadinho, parabéns!! Beijos!!
    Fique com Deus!!

    http://mdemaquiagemblog.blogspot.com.br/

    ResponderExcluir