Barras laterais ao lado do cabeçalho


Com esse novo layout lindo não tem como eu esquecer de postar.Hoje eu trouxe mais um tutorial, que cada vez mais blogs estão usando, é deixar a barra lateral ao lado do cabeçalho, eu acho bem legal, e nem é muito difícil, só precisa mesmo de um pouquinho de atenção.Bem, antes de mexer no HTML do seu blog salve o seu layout e não salve as alterações antes de visualizar e ver se ficou do seu gosto.

1.Vá em design, depois em editar HTML e procure por:
.main-inner .column-left-outer {
(Obs: Se a sua coluna for a direita mude o que esta em negrito para right)

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

 2. Acrescente antes da chaves: margin-top: -150px;

As letras vão subir, para fazer com que a coluna também suba, e procure por:
.main-inner .fauxcolumn-left-outer {

(Obs: Se a sua barra for a Direita mude o que esta em negrito por right)

Devera ficar assim:
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}

3. Acrescente novamente antes da chaves: margin-top: -150px;

Ajuste o tamanho para ficar do seu gosto, visualize e se estiver do seu gosto, salve.
Beijos da Amanda !

76 comentários:

  1. Super adorei o tuto!
    Seu blog,é mt fofoo
    Adoreii
    s2dreamsofana.blogspot.com

    ResponderExcluir
  2. Ai que legal esse tuto ^^ vou salvar para quando precisar :)
    bjs,

    http://vitrine-maria.blogspot.com.br/

    ResponderExcluir
  3. Adorei esse tutorial, vou testá-lo no meu blog!

    ~Glaucia

    www.leitorait.com

    ResponderExcluir
  4. amei a tutorial,já acrescentei no meu layout novo :)
    beijos
    lolamantoani.tk

    ResponderExcluir
  5. amei a tutorial,já acrescentei no meu novo layout :)
    beijos
    lolamantovani.tk

    ResponderExcluir
  6. *o* ameei o tutorial, qualquer dia vou fazer. Olha ameei o novo layout do blog, tá lindo, Beijos, Giih.
    http://girlsabout.blogspot.com.br/

    ResponderExcluir
  7. Juro que já fiz esse tutorial umas 20 vezes, e não consegui nenhuma delas!!!1 mimimimi

    http://acessopermitidoblog.blogspot.com.br/

    ResponderExcluir
  8. tutorial super util.
    vou testar e se der erto coloco no pink.
    http://pinkrock-official.blogspot.com/

    ResponderExcluir
  9. Fico lindo o layout! Parabéns.
    E ótimo tutorial :)

    Beijos, hannets.blogspot.com

    ResponderExcluir
  10. Oooi david, eu to fazendo uma matéria lá no blog e queria que você participasse, estou convocando algumas pessoinhas, é um papo sobre blogueiro fantasma, o que você acha sobre? Tipo tem gente que escreve e nunca fala seus gostos, quem é e tals, pergunta aos leitores opiniões das pessoas,o jeito de ser, o que gosta no blog... você pode participar? *-* É só comentar lá com sua opinião. bjs
    Garota do olhar sincero
    Desculpa o incomodo :*

    ResponderExcluir
  11. Interessante, vou testar em um blog teste para ver como fica *-*, quem sabe eu não use no próximo lay =D

    Bjs

    daimaginacaoaescrita.com

    ResponderExcluir
  12. Muito bom o tutorial, deixa o blog bem mas diferente.. *-*

    www.ecleticus.com

    ResponderExcluir
  13. eu tenho esse tuto no meu lay (:
    fica lindin *-*
    ótimo tuto,ficou bem explicado e deu pra entender tudo (:

    http://blogportalteen.blogspot.com

    ResponderExcluir
  14. Maneiro o tutorial. Salvei aqui caso um dia eu queira usar.

    Beijos, Romma.
    http://romariomarquess.blogspot.com.br

    ResponderExcluir
  15. muuuito legal o tutu =))
    bem explicado


    http://sweetdremss.blogspot.com.br/

    ResponderExcluir
  16. Adoro blogs que ajudam as pessoas com tutoriais necessários para o blogger, ajuda bastante os inciantes! Parabéns!

    ResponderExcluir
  17. Adorei seu blog parabéns ><
    Da uma passadinha lá no meu?
    http://flmundoteen.blogspot.com.br/

    ResponderExcluir
  18. Adorei o tuto, super útil, quem sabe no próximo layout eu faça uma cabeçalho e uma coluna assim. XOXO :3 charmenaveia.blogspot.com

    ResponderExcluir
  19. OPa...tutorial massa! Adorei.
    Beijos!
    http://palomaviricio.blogspot.com

    ResponderExcluir
  20. Amei seu blog,e o tutorial é ótimo...
    Se vc tiver um tempinho livre,passa lá no meu cantinho
    Vou adorar
    www.biaalini.blogspot.com
    Beijos da Bea

    ResponderExcluir
  21. Amei o tutu tava precisando no proximo lay vou usa-lo :D onlyjhuly.blogspot.com.br

    ResponderExcluir
  22. David,desculpa fazer você fazer inscrição tudo de novo (Se quiser é claro) Se não quizer tudo bém e que mudamos de Concurso para sorteio basta preencher o formulário aqui: http://blog-allthelovers.blogspot.com.br/2012/03/concurso-dreamshappy_24.html , E se não for incomodo ,e se for participar , bote o banner em alguma página ou na barra lateral.

    ResponderExcluir
  23. amiga me perdoa, por favor e que eu fiquei dois dias de viajem haha e ai não tive tempo de, entrar !
    #Bezos Rawr -----> Bikoti.blogspot.com.br

    ResponderExcluir
  24. Hey David! Adorei seu blog :)

    Estou seguindo!


    Um abraço, Léo.

    http://fashiondecente.blogspot.com.br/

    ResponderExcluir
  25. Parabéns pelo tutorial, Amanda!

    Olá, equipe *-*

    Tem post novinho no meu blog! Bora ir lá ler?

    Bjonas e fique com Deus ♥

    Camilla Martins - http://sugar-dance.org

    ResponderExcluir
  26. Adorei o tuto e é bem simples eu vi um que é a mesma coisa rsrs e nossa da ate medo de fazer kkkK

    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  27. vim te agradecer por me seguir e também já estou te seguindo.
    xero

    http://utilidadedeleocatia.blogspot.com.br/

    ResponderExcluir
  28. o meu lindo te agradeço pela visita e já estou te seguindo um xero.
    http://utilidadedeleocatia.blogspot.com.br/

    ResponderExcluir
  29. Barra lateral ao lado do cabeçalho que você fala é aquela barra mais grande? Não entendi. Mas seu blog é muito perfeito *-* Parabéns!

    www.worldfemale.blogspot.com

    ResponderExcluir
  30. blog perfeito amei !!! tô seguindo http://www.derrepenteteen.com/

    ResponderExcluir
  31. Nossa já vi esse efeito em vários blogs, beijinhos.
    http://fasesdegarota.blogspot.com.br/

    ResponderExcluir
  32. Hum, gostei da maneira como você explica o tutorial. Parabéns pelo post'

    Beijos

    ResponderExcluir
  33. Parece facil
    bj
    http://www.alfinetesdemorango.com

    ResponderExcluir
  34. UHmmm boa dica David.

    Beijos obrigada pela visita querido.
    volte sempre

    ResponderExcluir
  35. Olá David, vim visitar seu blog e aproveitei para seguir seu blog e curtir sua página no face, se puder retribuir fico feliz, beijos.

    BLOG:
    http://www.asvaidosas.com/

    CURTA NO FACE:
    http://www.facebook.com/asvaidosasblog

    ResponderExcluir
  36. Eu acho esse tutorial muito legal já pensei em usar no blog e talvez vou usar.

    Primeiro capítulo de "O INFERNO DE LIZZIE HORN" esta publicado!
    http://caarmo.blogspot.com.br/2012/03/o-inferno-de-lizzie-horn-capitulo-01.html

    ResponderExcluir
  37. Hey, David.
    Tudo bom? (retribuindo a visita) Adorei o blog e já estou seguindo!

    Então nunca pensei em uma web novela, mas gostei da ideia HEHE'

    Beijos e volte sempre! *-*

    http://quaseinvisivel.blogspot.com.br/

    ResponderExcluir
  38. adoro seus tutorias que pena sou meia cabeçuda
    uma otima semana grande bju geh
    http://coresdebutterfly.blogspot.com.br/

    ResponderExcluir
  39. Adorei o tutu, era o que tava procurando pro proximo lay. Amei tudo bem explicado, era assim que tava querendo!

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com.br

    ResponderExcluir
  40. Oii nindoo!

    Então,em breve farei um novo layout e tô pensando em fazer algo do tipo,por a sidebar mais pra cima,ao lado do cabeçalho.Adorei o tuto!! ;3

    Beijokas :*

    http://www.meianoitebr.com/

    ResponderExcluir
  41. adorei o tutu, apezar de eu conhece-ló :D

    beijos
    meninamuitobonita.blogspot.com

    ResponderExcluir
  42. adoro seus tutorias, pena que não tenho a minima noção eheh

    Beeeijooos

    http://re-becah.blogspot.com

    ResponderExcluir
  43. Ótimo tutorial!
    É resenha sim, estou falando sobre o livro é resenha. Independente se foi alguma editora que mandou ou não, eu li e fiz a minha resenha ;)

    theplugados.blogspot.com

    ResponderExcluir
  44. O novo layout do blog tá lindo! My Wonderland: www.damadevestidoazul.com

    ResponderExcluir
  45. tbm adorei o tutorial! acho bem legal desse jeitoo
    bjs
    http://avidademalu.blogspot.com/ http://ohmygood-omg.blogspot.com/

    ResponderExcluir
  46. Muuito legal esse tuto, acho que dá um tham no lay,kkkk
    Beijos,

    http://girlsrepublic-s2.blogspot.com.br/

    ResponderExcluir
  47. particulamente eu não gosto muito das barras no cabeçalho, mas....

    Já participou da promo Jogos Vorazes? Não? Passa la e participa:abostaquadrada.blogspot.com

    ResponderExcluir
  48. Ótimo tuto, David :D
    http://www.delirios-degarota.blogspot.com.br/

    ResponderExcluir
  49. Oii, haaa adorei o tutorial !, o resultado deve ficar lindo !

    www.i--love--y.blogspot.com

    Tchau !

    ResponderExcluir
  50. Adorei o tutu, acho que usarei no próximo lay, mais não tenho certeza...

    Beijinhos
    Fer>> garotasrosachock.blogspot.com

    ResponderExcluir
  51. gostei da dica **
    beijo
    http://mysimplelife10.blogspot.pt/

    ResponderExcluir
  52. HAHA² se vc tomar um monte vai sumir isso sim!

    Super legal o tuto (:

    Bjinhos ;*

    Pâm
    http://chiqueatodaprova.blogspot.com.br/

    ResponderExcluir
  53. AAhh,eu uso esse recurso lá no meu blog! É beem bom mesmo...\Õ/

    Ficou ótimo seu tutorial,muito bom mesmo!
    Beeijos amore

    http://blogmymemories.tk

    ResponderExcluir
  54. Gostei do tutorial, já tá no meus favoritos caso um dia eu precisar!

    Beijos

    http://omgitsluh.blogspot.com.br

    ResponderExcluir
  55. Muito legal o tutorial :)

    Tem tutorial novo no meu blog!

    http://colorful-mushrooms.blogspot.com.br/

    Beijoos ;*

    ResponderExcluir
  56. Gostei do tutorial, vou deixar nos favoritos pra quando for mudar meu layout :)

    Beijo
    http://semquerermeintrometer.blogspot.com.br

    ResponderExcluir
  57. Se não me engano eu uso a barra lateral assim rs c: Beijos duda.

    coisas-de-diva.tk

    ResponderExcluir
  58. Muito legal o tutorial, adorei vou testar se usar dou os créditos.
    Beijos
    neversaynever-believe.blogspot.com

    ResponderExcluir
  59. Obrigada pela visita e desculpinha por demorar em responder.

    http://embalaco.blogspot.com.br/2012/03/frase_25.html

    ResponderExcluir
  60. Olá :)
    Excelente dica ein?
    Adorei *--*

    Desejo a ti uma excelente semana
    Abração

    www.rimasdopreto.com

    ResponderExcluir
  61. Online a essa hora? kkkk
    Acabei de receber seu comentário (mentira, faz uns 10 minutos)
    http://pinkpimenta.blogspot.com.br/

    ResponderExcluir
  62. Amei o tutorial! Fica muito legal o resultado...
    http://pinkpimenta.blogspot.com.br/

    ResponderExcluir
  63. Ótimas dicas!
    Também vou deixar nos favoritos e quando a Raíssa tiver tempo, peço pra ela dar uma olhadinha :)

    beijos

    Keila - http://noostillo.blogspot.com.br

    ResponderExcluir
  64. Esse layout novo tá lindo mesmo!
    Adorei o tutorial
    Bjos
    www.deliriofashionista.blogspot.com

    ResponderExcluir
  65. Adorei o tutorial,
    É sempre bom guardá-los para a qualquer momento
    que precisarmos ter-los em mãos.
    Um Grande Beijo, duda ♥
    blogapenasmenina.blogspot.com

    ResponderExcluir
  66. Amei o tutorial Amanda, eu ia usar a barra do layout assim, mas desisti porque achei um modo melhor de fazer.
    Fernanda Zucolotto.
    http://www.meianoiteequinze.tk

    ResponderExcluir
  67. Adoguei <3 ahsuashau
    Amei seu blog,super divo ^^
    E claro,já estou seguindo :p

    ResponderExcluir
  68. Oi flor, adorei seu blog. Seguindo aqui, retribui? Beijos.

    http://blogparisvie.blogspot.com.br/
    @ParisVie

    ResponderExcluir
  69. esse tutu é mto bom mesmo. tenha uma ótima terça-feira! te espero lá no meu blog hein? beijos.


    http://garota-fashiion.tk

    ResponderExcluir
  70. Muito legal o tutorial Amanda...Curti bastante, depois vou tentar fazer ele lá no manias.

    http://maniasgirls.blogspot.com.br/

    ResponderExcluir
  71. Gostei vou tentar fazeer(bom vo ver se consigo!!!!)
    queria qe vc participasse de um concurso no meu blog por favor
    http://noisconectados.blogspot.com.br/2012/03/concurso.html
    é so ate hoje!!!

    ResponderExcluir
  72. Legal o tutorial! Quem sabe no próximo layout do meu blog eu uso :)

    www.teenlist.blogspot.com

    ResponderExcluir
  73. Este tuto é msm muito boom, mas do jeito q taah a barra lateral aqui do GN, taah mtmt fofuu .-.

    >>Kisses-My-Boy-Friend<<


    http://laara-teen.blogspot.com.br/

    ResponderExcluir
  74. Ain obrigada pelo tuto!
    Me ajudou muitoo beijos
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir