Barras laterais mais para cima no modelo Travel

5 de out de 2011


Se você usa o modelo Travel e já tentou por a coluna (sidebar) mais para cima e não conseguiu, este tutorial é pra você. Geralmente, no modelo Travel, quando se tenta subir a sidebar, acaba subindo somente os gadgets e a parte colorida nem se move. Procurando por uma solução, encontrei no Material-Extra um tutorial ensinando como subir a coluna também. O resultado será semelhante a coluna do blog Tudo Pra Mim | Maratona de tutoriais. Vejam:


Então go! 

Vá em Design > Editar HTML > pressione Ctrl + F e procure por:                                                                                                                               
.main-inner .column-left-outer { - Caso sua coluna seja no lado esquerdo
.main-inner .column-right-outer { - Caso ela seja no lado direito 
Caso ela seja a esquerda estará mais ou menos assim:                                                                                                                  
        .main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
      }

E caso seja à direita acredito que estará mais ou menos assim: (pelo menos a minha está rs)

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

Então adicione o seguinte código logo abaixo:

margin-top: -150px;

Então as letras e etc. (os gadgets) devem subir, para fazer o fundo subir junto pesquise 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  
width: $(main.column.right.width); ( caso tenha a coluna no lado direito) ou  
width: $(main.column.left.width); (caso esta for no lado esquerdo)

acrescente novamente  margin-top: -150px; 

Agora visualize e veja se está tudo certo, caso queira você pode ajustar os valores de margin-top para ficar na altura que desejar.

Espero que tenham gostado, e quero me desculpar por não estar tão ativa aqui, estou com a semana lotada, ontem tive médico, daqui a pouco vou pro curso e ainda tem as provas e trabalhos. E me desculpem também se estou demorando pra responder os comentários lindos de vocês, mas assim que der responderei sz

32 comentários:

  1. Flor, participa do concurso que estou fazendo com outra pessoa?
    Nos meus já está cheio, falta no dela... Ajuda?
    http://diarioteen-s2.blogspot.com/2011/10/concurso-divulga-meu-blog_03.html

    beijão <3

    ResponderExcluir
  2. Oiie adorei o blog. Seguindo, retribui? Beijoos http://icecream32.blogspot.com/

    ResponderExcluir
  3. Oi linda, desculpa estar postando com anônimo é que deu problema no meu blogger. Então, queria saber se você podia me mandar o seu html do link-me do seu blog, por causa da parceria. Mande neste email aqui: linkmyfashion@hotmail.com

    Beijos,
    Sabrina
    http://linkmyfashion.blogspot.com

    ResponderExcluir
  4. Seus tutoriais sempre arrasando!

    Beijos,
    placefame.blogspot.com

    ResponderExcluir
  5. Conheci seu blog pelo Place Fame , é ameeeei ! Tutorial que eu estava procurando ! Seu blog é super in Parabéns!
    Rafa (obs: meu blog tá desativado)

    ResponderExcluir
  6. por favor acesse em:
    www.music-musicaedemais.blogspot.com

    participe em musicas

    ResponderExcluir
  7. Oi linda, gostaria primeiramente de te parabenizar pelo blog, que é realmente lindo e com um conteúdo incrível. Depois, gostaria de pedir a sua ajuda para divulgar meu blog (http://prefirorosachiclete.blogspot.com). Se puder fazer isso por mim, pode me mandar um e-mail (lu_machadoc@hotmail.com)e poderíamos até criar uma parceria.Eu ficaria eternamente grata. Muito obrigada, espero contato em breve. beijos!

    ResponderExcluir
  8. Adorei o tutorial, vou ver se no meu proximo layont eu uso.

    www.garotascomplicada.com

    ResponderExcluir
  9. Olá, poderia adicionar o chat das blogueiras & blogueiros no seu msn : mgroup105144@hotmail.com
    é uma forma de todos os blogueiros se reunirem e conversarem entre si, sobre o dia dia de ter um blog.


    Obrigada, não se esqueça de entrar!

    ResponderExcluir
  10. Já coloquei seu banner lá no blog!

    Beijos,
    Sabrina
    http://linkmyfashion.blogspot.com

    ResponderExcluir
  11. Oiii
    Nossa eu amei o seu blog, além de lindo
    tem várias coisas legais.
    Eu comecei o meu a pouco tempo e to procurando parcerias pra divulgar
    aceita parceria?
    Já to seguindo o seu.

    http://naty-todasaspequenascoisas.blogspot.com/

    ResponderExcluir
  12. Oi! Criei um novo blog, já sigo aqui. Poderia seguir lá?!
    Obrigada!

    http://blog-candland.blogspot.com

    ResponderExcluir
  13. ossa, esse tutorial é interessante porque já vi em muitos blogs, mas nenhum ensina de verdade como fazê-lo.

    Bom, vi seu blog no Place Fame - Extras, vim conferir e amei, já estou seguindo, parabéns pelo blog!

    http://estilooque.blogspot.com/

    ResponderExcluir
  14. Adorei o tutorial, e funcionou direitinho ^^
    Bjs.

    Segue? http://sapatosdeveludo.blogspot.com

    ResponderExcluir
  15. Consegui fazer o tutorial...muito bom mesmo...

    http://123make.blogspot.com/

    ResponderExcluir
  16. Adorei o post ! Mas não sei porque está dando errado ? Bjss vou usar com certeza!

    ResponderExcluir
  17. Ain, tutorial perfeito *---*
    procurava há tempos!!!
    Beijuuuus ^^
    Sweet Goodies

    ResponderExcluir
  18. Uauh! O tutorial veio em boa hora, tava díficio aqui!
    Muito bom!!

    ResponderExcluir
  19. Olá,
    esse tuto me ajudou bastante,procurei tanto e nenhum dava certo

    Beijos

    www.livrosegostos.blogspot.com

    ResponderExcluir
  20. Oi flor, estou usando o tutorial e ja botei os créditos na minha página de créditos. Beijos.

    http://sonhosmodificados.blogspot.com.br/

    ResponderExcluir
  21. Gostaria de saber , como DESCER a barra lateral. Obrigada.

    ResponderExcluir
    Respostas
    1. É só colocar um valor POSITIVO em margin-top, por exemplo em vez de colocar margin-top: -150px; coloque margin-top: 150px;

      Excluir
  22. Oláaaa, nossa seu blog é maravilhoso, adoreei tudoo, estou usando varias coisinhas e suas dicas,tudo maravilhosoooooooo . parabéens.
    beeeeijinhos

    ResponderExcluir
  23. muito legal esse tuto, me ajudou mesmo. Queria saber como você consegue fazer a barra ali do lado com alguns gadgets em branco, outros transparentes...

    ResponderExcluir
  24. Oi Gatinha, coloquei pra subir no right e não quer subir o que eu faço ?

    ResponderExcluir
  25. Ajudou mesmo este tutorial é o melhor!

    ResponderExcluir
  26. Muito lindo o seu blog parabéns vc me ajudou muito

    ResponderExcluir
  27. Poxa ajudou bastante, obrigada ♥

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.