fevereiro 14, 2011

Tutorial - Como colocar imagem na barra lateral

Respondendo ao pedido de uma visitante aqui do blog, eu resolvi postar 
como você coloca uma imagem na barra lateral do seu blog. Não é difícil,
mas primeiro precisamos saber se sua barra é a esquerda ou a direita sabendo que:
Esquerda - Left  | Direita - Right
 

Acho que tem outra forma de se fazer isso, mas essa foi a que eu consegui.
Se a sua barra for a esquerda (left): vá em > Design > Editar HTML > Ctrl + F >
procure por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
  
deve aparecer assim:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

altere assim:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
 background-image: url(URL DA SUA IMAGEM) $(widget.outer.background.gradient) repeat scroll top left;

}

ok, esse foi o primeiro passo, ainda não vai aparecer nada agora 
procure por:
.main-inner .fauxcolumn-left-outer {

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

acrescente o background assim:
.main-inner .fauxcolumn-left-outer {
        width: $(main.column.left.width);
        background-image: url(URL DA SUA IMAGEM);
     }

Veja se esta tudo certo, se apareceu a imagem, e pronto! salve
Caso sua barra seja a direita (right) apenas quando for procurar troque Left por Right.
espero ter ajudado beijoos
Obs: Tutorial apenas testado no modelo Travel do blogger.

19 comentários:

  1. Esse tutorial é para por imagem ao lado dos titulos dos gadgets? beijos
    blogloucamistura.blogspot.com

    ResponderExcluir
  2. AUHSUHSAUHSA - me matei tanto pra colocar a imagem na barra lateral, e dps voce posta ¬¬ [quem manda ser apressada UHSAHUASUHAS , vou fazer uns ajustes na minha *--*

    ResponderExcluir
  3. Eu não encontrei este código: .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

    ResponderExcluir
    Respostas
    1. Provavelmente sua barra lateral é direita , ou seja , você teria que colocar: .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { . E ai vai dar certo !

      Excluir
  4. #AnaCarool: não flor, é todo o fundo da sua barra lateral, exemplo a minha barra é um azul mystic, em vez de cor, você pode colocar uma imagem, de preferência um background que se repita, porque é meio difícil você fazer uma imagem do tamanho exato. ok? ^^

    #MaryJauqe: aah, desculpe, kkk resolvi colocar depois que você me perguntou, porque até então nem tinha pensado nisso, KKK :pp

    #Sirlane: Eu não sei porque não encontrou, flor, de repente é porque seu modelo é diferente,os tutoriais daqui são apenas testados no modelo Travel (viagem) do blogger, funcionam em outros modelos claro, mas de repente o script do seu blog é diferente, vou pesquisar para você e te respondo, ook? beijoos

    ResponderExcluir
  5. respondi na sua cbox Sirlane, espero que consigo agora.

    ResponderExcluir
  6. Oie, está linkda e eu ja estou seguindo?!

    Bjos! :)

    ResponderExcluir
  7. ai n consegui :/ eu fiz tudo direitinho e não apareceu imagem nenhuma..
    se tiver outra dica, pode ir la me responder no meu blog *-*
    www.donamoda-carolldebora.blogspot.com
    bjssssssssssss ;*

    ResponderExcluir
  8. Flor, já teve outra pessoa que não conseguiu, tem duas opções,
    ou você esta errando em algo, ou seu modelo é diferente,
    alguns tutoriais, nem sempre servem para todos os modelos, vou olhar o seu modelo e já te digo.

    ResponderExcluir
  9. o meu modelo é o simples,branco sabe e eu não achei o código,tem como me ajudar?

    ResponderExcluir
  10. tEM COMO FAZER ISSO NUM TEMPLATE do artisteer?

    ResponderExcluir
  11. não sei flor, eu conheço o artisteer, mas nunca usei

    ResponderExcluir
  12. Fiiiquei 2 anos mais consegui rsrsrsrs brigada !!!

    lookbarbie.blogspot.com

    ResponderExcluir
  13. Ah,não consegui porque me blog tem duas colunas *-*

    ResponderExcluir