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;
}
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_QOlP-TB4XNu55XboVGTADZ6rBIU8EpALtQrRBc3jcsj6ea2BXvEHg8vVH790Jwx8WzJCF3VFB1E3w4IgPRrGVESGNAMDDD8X-aRpo_4OayyXjtnLkEI9LkFh6-iKF78NxgGsZLof6Y/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_QOlP-TB4XNu55XboVGTADZ6rBIU8EpALtQrRBc3jcsj6ea2BXvEHg8vVH790Jwx8WzJCF3VFB1E3w4IgPRrGVESGNAMDDD8X-aRpo_4OayyXjtnLkEI9LkFh6-iKF78NxgGsZLof6Y/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.
olá flor...
ResponderExcluirvaleu pela dica
mil beijinhos... e te desejo um ótimo final de semana
Obrigada!! Que seu final de semana seja lindo também :3
ExcluirBeijus...
tenho uma duvida. no seu layout free chibi kawaii tentei mudar o fundo da sidebar mas em cima ficou com a mm imagem.
ResponderExcluirveja: http://lucy-mundokawaii.blogspot.pt/
bjs
É que na imagem do cabeçalho tem as sidebars também, só editar o cabeçalho mudando as cores no lugar da sidebar.
Excluirha, obrigada^^
Excluirbjs
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.
ResponderExcluirO 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.
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!
ExcluirMas vou guardar sua sugestão para compartilhar os Htmls.