Colocando a área da sidebar com a mesma extenção dos posts no novo Blogger

 

DEMO

Para deixar o fundo da área da sidebar com a mesma extenção da área dos posts, faça como o modelo.

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. 

Procure por:

  .main-inner .columns {
        padding-left: $(main.column.left.width);
        padding-right: $(main.column.right.width);
      }

E substitua por este:

  .main-inner .columns {
         background: #85862C;
        padding-left: $(main.column.left.width);
        padding-right: $(main.column.right.width);
      }

Troque a cor, destacada em vermelho, pela cor que desejar.


Se preferir colocfar imagem, troque por essa abaixo:

.main-inner .columns {
         background:  url(ENDEREÇO DE SUA IMAGEM) no-repeat;
        padding-left: $(main.column.left.width);
        padding-right: $(main.column.right.width);
      }

Se quiser que a imagem repita, retire o código na cor azul

»»Leia mais...

Mudando a cor de fundo da área do blog

 DEMO

No novo Blogger a área de fundo do blog vem na cor branca (no modelo Simple, que é o que uso para fazer as dicas para vocês) e não tem a opção para trocar. Troque então como mostro no modelo abaixo.


Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. 

Procure por:

<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#dd8766"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
   </Group>

E troque o código na cor vermelha pela cor desejada.

Mas, e se eu quiser uma imagem ?


Então procure por:

.content-outer, .content-fauxcolumn-outer, .region-inner {

        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }

E troque por este:

.content-outer, .content-fauxcolumn-outer, .region-inner {
background: url(AQUI O ENDEREÇO DE SUA IMAGEM) no-repeat;
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }


Se quiser que a imagem repita, retire o código na cor azul

Mas e se eu quiser que suma esse fundo ?


Então troque:

  <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>

Por:

<Variable name="content.background.color" description="Main Background" type="color" default="transparent" value="transparent"/>

»»Leia mais...