Image Map

15/02/2012

Tutorial: Duas colunas com fundo colorido e uma coluna com fundo estampado

Tão fofinho >_<
 Bom dia minhas garrafinhas de veneno 
 Tudo bem com vocês? Vamos desencalhar a label dos goodies! Eu não tinha postado antes porque ainda estava na primeira semana aqui, ou seja, tudo agitado, sem tempo pra nada.
 E o tuto de hoje é bem bacana, com um truque que eu aprendi sozinha. Mas os créditos dos códigos vão para o blog Cherry Bomb!.
 Vamos lá?

No seu blog, clique em Design e clique em Personalizar/no Designer de modelo. Escolha algum desses layouts:
 Escolheu? Agora vá em Ajustar Larguras e ajuste/veja qual a largura da(s) sua(s) barra(s):
 Agora vá em Editar Html, marque a caixinha Expandir Modelos de Widget, tecle Ctrl+ F e procure por .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { se a sua barra lateral for a direita ou por .main-inner .fauxcolumn-left-outer .fauxcolumn-inner { se ela for a esquerda.
 Aí abaixo do que você procurou vai estar mais ou menos assim:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner { 
margin-right: $(content.padding); 
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left; 
}

 Apague a parte que está em cor-de-rosa e no lugar dela coloque background: url(link da sua imagem); Agora é a hora de escolher o backgroud da barra lateral. Se você for usar 2 colunas, pegue o tamanho que as suas duas barras laterais tem e divida por dois, depois faça uma imagem assim, pegando por exemplo uma barra lateral que meça 420px, ou seja, 210px por cada uma.
 Entenderam como é? É só pegar uma imagem/fundo com 420 px e depois pintar cada metade com a cor escolhida, ou com a estampa escolhida. Se for com só uma coluna, escolha um background que te agrade (de qualquer tamanho) e espere. Troque onde está escrito "link da sua imagem" pelo link da que você criou/escolheu. Pronto! E aí, gostaram? Se usarem creditem!
Participem do sorteio! Beijinhos :*

16 comentários:

  1. fica lindo assim colorido neh *-*
    bjos e boa quarta

    ResponderExcluir
    Respostas
    1. aff se não tem o que postar em um blogger ão lindo como esse e PERFEITO kk não posta esse blogger é MUITO LINDO

      Excluir
  2. Fica lindo, o meu layout tem isso. :D
    ótimo post .

    Partipa do meu concurso ? : http://ingridsakamotodossantos.blogspot.com/2012/02/concurso-meu-blog-e-10.html?showComment=1329249897789#c3711758964343183839

    http://ingridsakamotodossantos.blogspot.com/

    Beijos ♥

    ResponderExcluir
  3. Eu adoro esse tuto, pq ele é muito útil para a beleza e organização de um blog! Beijos flor, tem post novo no Lee Rosy, esperamos vc lá!

    www.leerosy.blogspot.com

    ResponderExcluir
  4. @Aline Cuerci é, eu acho super fofo!
    Beijos :*

    ResponderExcluir
  5. @Ingrid Sakamoto dos Santos bom que gostou!
    Claro, claro, já vou dar uma olhadinha lá!

    ResponderExcluir
  6. @camila também acho, isso conta muito no visual! Estou até preparando um igual para o novo lay do blog!
    Já estou indo ver!
    Beijos :*

    ResponderExcluir
  7. Amei o tutu muito útil http://brunomeuemeu.blogspot.com/

    ResponderExcluir
  8. Oi flor amei o tutu, bom estou fazendo um concurso no blog e é o primeiro, quero muito que de certo me ajuda? Participa Por favor seria uma honra pra mim o design do seu blog é lindo e o conteudo ótimo me ajudaa? http://brunomeuemeu.blogspot.com/2012/02/concurso-de-fevereiro.html#more obrigada flor Beijo

    ResponderExcluir
  9. Amei o tutorial, bjs

    http://dreamsofagirl-blog.blogspot.com/
    http://bubblemagic-blog.blogspot.com/

    ResponderExcluir
  10. @Oi :3 oi flor! Bom que gostou, vou tentar participar sim, ok?
    Beijinhos :*

    ResponderExcluir
  11. Ameii super lindo *-*
    bjkas
    mundofun-gabi.blogspot.com

    ResponderExcluir
  12. Eu sou uma nova leitora , enfim eu vou começar agora em um blog sobre o mudo feminino e eu estou procurando alguns blogs com desings legais e eu adorei o seu!
    Foi você que fez? Se não foi pode me passar o contato de quem foi?
    Se puder fazer o desing , add no msn : garotadesegredos@hotmail.com
    Kisses : **

    ResponderExcluir
  13. @Garota de Segredos: Oi flor! Muito obrigada, é sempre bom saber que o design está agradando ^^
    Fui eu que fiz, e é claro que eu posso fazer um pra você! Já te enviei um convite para o msn ^^
    Beijinhos :*

    ResponderExcluir