19 de jun. de 2012

Barra lateral mais pra cima (modelo Travel)

Tumblr_m5vk9yjabe1r9wct0o1_500_large
OOOOOI gente (: Bom, um exemplo de como fica com esse tutorial é o meu próprio blog ^^ é quando as barras laterais (~le sidebar) sobe e os posts ficam no mesmo lugar.  Go? Clique em leia mais


1. Vá no HTML do seu blog e procure por:

Se sua coluna for do lado esquerdo:
.main-inner .column-left-outer {
Se sua coluna for do lado direito:
.main-inner .column-right-outer {
Se ela estiver no lado esquerdo, vai estar mais ou menos assim:
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
E se ela estiver no lado direito, vai estar mais ou menos assim:
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width)
Depois adicione o código abaixo: margin-top: -150px;

ATENÇÃO: Pra quem tem a barra lateral separada, dividida em caixas, não precisa fazer a próxima parte, é só visualizar e salvar (pelo menos eu não precisei). Mas quem tiver ela em uma coluna só, precisa para que a cor suba junto.

-----x-----
Se a sua coluna for do lado esquerdo, procure por:
.main-inner .fauxcolumn-left-outer
E se ela for do lado direito, procure por:
.main-inner .fauxcolumn-right-outer {
Depois de achado, é só acrescentar margin-top: -150px;

Agora ajuste (ou não) o / os "150" , visualize, se estiver tudo certinho salve. Ah, e recomendo que você primeiro coloque o cabeçalho, porque se não depois fica difícil de apertar pra mudar ele...

Beeeeeijos <3

17 comentários:

  1. amei o tuto! amei seu blog é lindo! seguindo! retribui?

    senhoritasimperfeitas.blogspot.com

    ResponderExcluir
  2. Ah, adorei o tuto, vou salvar *-*

    Seu blog táa divão de mais, amr <3

    Big Beijo =* farryteen.blogspot.com

    ResponderExcluir
  3. Adorei o tutorial floor ^^ Adorei ..

    http://souzadiinha.blogspot.com.br
    Beijos ♥

    ResponderExcluir
  4. Hi, Nice post thanks for sharing. Would you please consider adding a link to my website on your page. Please email me back.

    Thanks!

    Madison
    maddie0147@gmail.com

    ResponderExcluir
  5. Adorei o tuto e o blog que você fez da "garota ambulante" esta lindo ^.^
    e adorei aqui \(*-*)/ Seguindo e sempre venho visitar!!
    Bjinhos
    http://conversando-com-a-lua.blogspot.com.br/

    ResponderExcluir
  6. Participa do blog da semana no meu blog! o ganhador vai ficar uma semana em divulgação basta:

    Seguir o blog publicamente.

    Regras da inscrição:

    * Ter banner
    * E responder as perguntas a seguir perguntas nesta postagem :

    http://cherryepop.blogspot.com.br/2012/06/se-inscreva-para-o-proximo-blog-da.html

    Nome do blog:
    Quantidade de seguidores:
    Link do seu blog:
    Nome do seguidor:

    Viu como é fácil? ah! e quem apenas participar mesmo sem ser escolhido vai ganha um selinho e eu seguirei um por um.

    xoxo
    http://cherryepop.blogspot.com.br/

    ResponderExcluir
  7. Já conhecia o tutorial! Fica mt show a sidebar mais para cima!

    Beeeijos
    #Nhaaac >>>http://the-lovers-official.blogspot.com/

    ResponderExcluir
  8. Báh, ficou muito show o lay do blog Garota Ambulante', se eu te pedir, tu faz um lay pra mim ?

    ( responde no meu blog se der... )

    bjs, Lu

    curiosidadeseideiasdalu.blogspot.com

    ResponderExcluir
  9. fica lindo, mais diferente. adoro esse tuto .

    http://blog-garotadescolada.blogspot.com/

    ResponderExcluir
  10. Gostei muito do novo lay, e o tutorial é otimo! Bjs, http://luan-crazyinhtml.blogspot.com.br/

    ResponderExcluir
  11. gosti do tutorial ;)
    www.Bikoti.blogspot.com

    ResponderExcluir
  12. Já sabia desse tutorial.

    Foi bom conhecer seu blog, champ

    ResponderExcluir
  13. ushsauhsu *-*
    que vergonha kkkk
    em fim... prometo que o proximo vou caprichar.

    ResponderExcluir
  14. Legal o tuto *--*

    http://blog-imperfeita.blogspot.com (visita?)

    ResponderExcluir
  15. Dani eu quero um layout! Podes fazer?
    Beijooo!
    trashmonsterss2.blogspot.com

    ResponderExcluir
  16. Oii minha linda! você se inscreveu no blog da semana no meu blog e olha lá já saiu o resultado!

    http://cherryepop.blogspot.com.br/

    ResponderExcluir
  17. Eu usei esse tuto lá no meu blog, o resultado é super fofo né! ;]

    http://blogthewonderland.blogspot.com.br/

    ResponderExcluir