12 de jan. de 2012

Tutorial: Dividindo a sidebar em 2 colunas

Oi meus bichinhos, hoje atendendo um pedido irei ensinar vocês como dividir a sidebar do blog em 2 colunas, que nem a do Fases de garota (veja). É uma coisa muito simples de fazer mas muitos blogueiros não sabem, eu mesma não sabia e foi um custo achar um tutorial, eu até já o perdi novamente, mas ainda bem que gravei como se faz aqui na minha cabeça, bom mas sem mais delongas e vamos para o tutorial.
Bom antes de começar já vou avisando que por mais simples que seja esse tutorial só funciona certinho no modelo Travel do Blogger, pois nos outros a imagem fica vazando pra fora, então antes de começar verifique qual é o seu modelo
Primeiro abra o seu blog em: Design > Designer do modelo > Layout  
Agora escolha um dos modelos indicados em vermelho:


Pronto a primeira parte já foi feita, agora vamos para segunda, mas para isso você precisará dessa imagem:

Segundo volte para o blog e clique em: Design > Editar HTM > Dê Ctrl + f e procure por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner { 

Agora que você já achou a coluna esquerda da sidebar é hora de substituir alguns códigos, para isso apague esse código:



(Só o que esta em vermelho)

Substitua o código apagado por esse, coloque-o logo depois de background se não não dará certo ok?

url(LINK DA IMAGEM) repeat;
Em "link da imagem" coloque a url da sua imagem 

Terceiro ache a coluna direita clique em: Ctrl + F e procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner { 

E repita o processo que foi feito na coluna esquerda, pronto sua sidebar de duas colunas esta pronta, clique em visualizar e se estiver tudo certinho salve.

Dica: Na hora de ajustar a largura da sidebar coloque 400, pois na hora de colocar a imagem irá 200 pra cada lado e se quiser trocar as cores da imagem é só ir no Photoscape e trocar que dá certo. Espero ter ajudado, beijinhos.

Tutorial feito por Fases de garota, não copie, crie o seu tutorial, com as suas palavras, com a sua maneira de explicar e as suas imagens.












26 comentários:

  1. Oii, adorei o blog! Obrigada pela visita! Seguindo... http://virgulaassassina.blogspot.com

    ResponderExcluir
  2. Adorei o tuto, muito tem feito *-*

    Beijão
    Ana
    meninasantenadas.tk

    ResponderExcluir
  3. Mei seu blog e ja to seguindo vc poderia me seguir também?
    blogdajoanamv.blogspot.com

    ResponderExcluir
  4. Oiee =)

    Adorei o seu blog, e já estou seguindo!!
    Ficarei muito feliz se puder seguir o meu também!

    Parabéns pelo blog, sucesso miiiiiiiiil!
    Beijo grande!

    ResponderExcluir
  5. é muito facinho né linda rs
    Mas é bom atender pedidos dos leitores <3
    Post novo lá no blog amore, confere?
    Beijinhos
    TDiaryofteens.blogspot.com

    ResponderExcluir
  6. Que legaal esse tutorial!!Ameeei muito fofoo eu seu blog lindo D+ já estou seguindo,retribui ? =D briigada pela visitinha lá o meu bloguinho =D

    ♥Beijinhos da Lú-->meuespacocorderosa.blogspot.com

    ResponderExcluir
  7. Olá é o fashionforteengirls.blogspot.com preciso da sua foto de afiliado para mim colocar no meu blog e fazer o post !!!

    ResponderExcluir
  8. Oi,amei seu blog e to seguindo , faz parceria com o meu ?


    http://macacor-de-rosa.blogspot.com/

    ResponderExcluir
  9. Adorei sua visita no meu blog. Ah, o tuto é bem útil mesmo! :)
    Visitei e adorei, estou seguindo aqui, haha ( seguidora número 100, uhul \õ ) Ah, ficaria muito feliz se você seguisse o meu também.

    Beijos, somente-moda.blogspot.com

    ResponderExcluir
  10. Gostei muito do tuto e do blog!Estou te seguindo...se puder me segue tbm e confere as promos do meu blog.Bjus!
    http://palomaviricio.blogspot.com

    ResponderExcluir
  11. Ooi!
    Adoreii o tutorial! Muito Legal!!

    Amei muito aqui, e olha que acabei de ver seu blog! Já virei uma fã. Amei muito o conteúdo e o design, que são muito bons.
    Já estou seguindo! Adoraria muito se você seguisse meu blog também. Ele é totalmente ligado com o mundo feminino. Se você tiver um tempo, passa lá, e comente dizendo o que achou!

    Querida, tem post novo no meu blog, você podia fazer o grande favorzinho de comentar no post? Adoro ver as opiniões das leitoras!

    Beijos!
    www.blogmodasdegarotas.blogspot.com

    ResponderExcluir
  12. tão lindo o seu blog, perfeito o designer, e o conteúdo é ótimo (:
    amei o tuto das sidebar !

    http://leideanediniz.blogspot.com :*

    ResponderExcluir
  13. sorry, tive que seguir seu blog dnovo, deu problema nos feeds hihi duas d mim te segundo kk'
    Bjocas linda
    TDiaryofteens.blogspot.com

    ResponderExcluir
  14. Adorei seu blog, já estou seguindo!
    beijos,

    http://lindaefloriida.blogspot.com/

    ResponderExcluir
  15. Antes meu blog era assim, mais resolvi mudar tem pouco tempo! rs
    visita ?
    www.paradateen1.blogspot.com
    bjs =*

    ResponderExcluir
  16. Muito legal o tuto, parabéns pelo post!!!
    Muito obrigada pela visita ao DSM, volte sempre!!!

    Mil Sweetkisses ♥
    http://www.docesonhodemenina.com.br/

    ResponderExcluir
  17. Muito interessante, devo adimitir que eu não sabia como fazer isso. Rs
    Gostei do seu blog e já estou seguindo.
    Bjs!

    http://kahprincees.blogspot.com/

    ResponderExcluir
  18. Oi é o http://fashionforteengirls.blogspot.com/ já um post do seu blog e linkei você, você vai fazer post do meu blog?

    ResponderExcluir
  19. Ficou bem legal o Tutorial! Muito útil!
    Bjs
    Obrigada pela visita.

    http://blogtrashrock.blogspot.com/

    ResponderExcluir
  20. adorei o blog !!
    seguindo (:
    wwwmundosodemeninas.blogspot.com

    ResponderExcluir
  21. muito bom o tutorial, bem util !

    tem novo lay, comenta!

    http://garotoonerd.blogspot.com

    ResponderExcluir
  22. Awwwn amei o post Sobre :

    toou Seguiindo akii !

    Beiijiinhoos com glitter !
    Adoreei muito seu bloog viiu florziinha !
    *-*
    Sucesso!

    www.Teenhere.blogspot.com

    adorei a diica

    ResponderExcluir
  23. OOi "Coisinha" hahahah, ja sigo seu blog e aprovo loogico, pode seguir o meu?BJS

    1001coisas-clara.blogspot.com

    ResponderExcluir
  24. Já viu a promoção que ta rolando solta no blog O Leitor?
    Ainda não?
    Então corre, que até o dia 05 de Fevereiro você ainda pode concorrer a um dos 6 livros que estão sendo sorteados.
    Beijos e espero você lá,

    Pamela.

    ResponderExcluir
  25. Realmente tava precisando desse tipo de tutorial :)

    sougarotaproblema.blogspot.com

    ResponderExcluir
  26. podia fazer um tutorial de como fazer o autor ficar "mais bonitnho" ein ? fica a dica

    ResponderExcluir

Olá, me deixe um recadinho, se quiser que eu siga ou veja o seu blog é só deixar o link. Beijinhos.

© 2012-2018. Todos os direitos reservados.
Criado por: ISABELY RODRIGUES.
Tecnologia do Blogger.
imagem-logo