Follow Us @soratemplates

sábado, 5 de julho de 2014

Sidebars Coloridas

Olá! No layout free do post anterior, coloquei 2 sidebars com cores diferentes, truque que aprendi no Menina Nerd. Isso é bem fácil de ser feito; testei nos modelos Travel e Simple do Blogger. Vamos ver como nesse post.
1. Primeiro é preciso deixar o layout assim (Modelo - Personalizar - Layout):
Vocês escolhem o lado, no caso escolhi a direita, mas abaixo há opção para esquerda também.
Agora vá em Ajustar Larguras e deixe o tamanho da Barra Lateral com 400 pixels. Clique em Aplicar ao Blog.

Faça em um editor de imagens um background com duas cores e largura total de 400px, que nem esse:
2. Acesse Modelo - Editar HTML e procure (CTRL+F) por:
No Modelo Travel:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner { (se escolheu lado direito)
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner { (se escolheu lado esquerdo)

No Modelo Simple:
.main-inner .fauxcolumn-left-outer { (lado esquerdo)
.main-inner .fauxcolumn-right-outer { (lado direito)

Terá encontrado algo mais ou menos assim, dependendo do lado que escolher:

No Modelo Travel:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

Mude o background:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background: url("http://1.bp.blogspot.com/-9Z8hcgIykPc/U7X7fwsYFqI/AAAAAAAANUQ/-BQxhvxqxSg/s1600/sidebar2.png") repeat;
}

No Modelo Simple você encontra:
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}

Acrescente um background:
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
background: url("http://1.bp.blogspot.com/-9Z8hcgIykPc/U7X7fwsYFqI/AAAAAAAANUQ/-BQxhvxqxSg/s1600/sidebar2.png") repeat;
}

Visualize e salve; talvez seja necessário definir uma largura para os gadgets/widgets, para ficarem "dentro" de cada cor; para isso, pode usar este código, que deve ser adicionado antes de /b:skin:
.sidebar .widget {
width: 150px;
}

Pronto! Espero que lhes seja útil! Beijus.

7 comentários:

  1. olá flor...
    valeu pela dica
    mil beijinhos... e te desejo um ótimo final de semana

    ResponderExcluir
    Respostas
    1. Obrigada!! Que seu final de semana seja lindo também :3
      Beijus...

      Excluir
  2. tenho uma duvida. no seu layout free chibi kawaii tentei mudar o fundo da sidebar mas em cima ficou com a mm imagem.
    veja: http://lucy-mundokawaii.blogspot.pt/

    bjs

    ResponderExcluir
    Respostas
    1. É que na imagem do cabeçalho tem as sidebars também, só editar o cabeçalho mudando as cores no lugar da sidebar.

      Excluir
  3. os layouts free, são lindos, bem que você podia disponibilizar layouts free, com o código do htlm, eu ia amar, já que eu não consigo instalar nada, sempre dá esse erro: Não foi possível salvar seu modelo.
    O modelo não pode ser analisado em função de um problema em sua formatação. Verifique se todos os elementos XML estão fechados corretamente. Mensagem de erro XML:
    Content is not allowed in prolog.

    ResponderExcluir
    Respostas
    1. Aqui eles estão dando certinho...talvez esse post resolva; você pode abrir arquivos XML no wordpad ou Notepad, um editor de HTML bem legal!
      Mas vou guardar sua sugestão para compartilhar os Htmls.

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart