março 17, 2011

Tutorial - Barras laterais para cima (coluna ao lado do cabeçalho)

Como nesse meu primeiro template eu coloquei a barra lateral 
(coluna) para cima ao lado do cabeçalho, vou fazer um tutorial de 
como se faz isso. Design > Editar HTML > Ctrl + F > procure por

.main-inner .column-left-outer {
se o seu blog for com a barra lateral a esquerda, deve estar assim:

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

acrescente isso: margin-top: -150px; abaixo, assim:

.main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
        margin-top: -150px;
      }

E então as letras devem subir, para fazer o fundo subir junto procure por:
.main-inner .fauxcolumn-left-outer { deve estar assim:

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


acrescente novamente margin-top: -150px; abaixo assim:

.main-inner .fauxcolumn-left-outer {
        width: $(main.column.left.width);
        margin-top: -150px;
      }

Você deve ajustar o tamanho para que fique ao seu gosto ok? 
Se a sua barra for a Direita mude os esta em verde por right. 
E se você tiver as duas barras lateriais, altere nos dois left e right.
Lembrando que esse tutorial é apenas testado no modelo Travel (viagem) do blogger.

17 comentários:

  1. Oi querida ! Eu deixei um meme para você responder em meu blog, aí está o link

    http://hamanduxas.blogspot.com/2011/03/meu-1-meme.html

    Beijos!

    ResponderExcluir
  2. Flor *-* sabe a Campanha?Então eu coloquei no meu blog,lá na pagina de campanhas õ/
    Ja mudei o desing da uma olhada e deixe a SUA opinião?Beijos
    http://justdreams-ana.blogspot.com/

    ResponderExcluir
  3. i flor..✿
    Nháá vim te deixar um xerinho grandão assim oh \Õ/ ihihihiii

    www.lojazart.blogspot.com

    ResponderExcluir
  4. Adorei! Vou usar no meu blog agoora hehe!*
    Beijão!

    ResponderExcluir
  5. Eu uso esse modelo, salvou tudo certinho mas não deu certo, e olha que eu uso o modelo Viagem - Travel! Que chato :(
    Não se esqueçam de participar do sorteio que está tendo no meu blog :D

    O blog tá lindo :)
    Um beijo, Fernanda M.
    http://garotascupcake.blogspot.com

    ResponderExcluir
  6. Obrigada !! Esse Tutorial ajudou muito. :)
    Já coloquei o seu Blog na página de Créditos do BLOG DA MAARIIH. :D

    http://maariihsouza.blogspot.com/

    ResponderExcluir
  7. Eu estava a procura desse tutô para um lay que eu estou fazendo e me ajudou muito! :3

    http://cutieteens.blogspot.com/

    ResponderExcluir
  8. adorei Esse Tutorial me ajudou muito.
    obg flor!!

    Meu Cantinho Especial

    ResponderExcluir
  9. Não deu certo no meu :( O que eu faço?

    ResponderExcluir