Anuncio layout

Anuncio layout
Encomende já o seu layout!
- 28.3.17

Separar os gadgets da barra lateral - Blogger

Oi geeeente, tudo bem? Esse tutorial é bem rápido ensinando você que usa o tema SIMPLES do blogger, a separar cada gadget da barra lateral em caixa. Como no exemplo a baixo: 



Lembrando que eu usei o tema Simples/Simple, o modelo todo branquinho, pra fazer o tutorial, beleza? 

→ Ainda essa semana vai sair outro post ensinando a personalizar várias outras coisas no blog ♥ 

Vamos ao tutorial 


Leia o tutorial inteiro antes de fazer, isso é importante ta?

Passo 1 - Ajustando larguras: A primeira coisa que acho legal fazer no tema simples, é aumentar a largura da área da postagem e da barra lateral. Isso é opcional, mas se quiser fazer: vá em Tema, e depois em Personalizar. 



Você vai ver uma barra cinza em cima, lá tem a opção Ajustar Larguras. Na parte "todo o blog" eu coloquei 1200px; e em "barra lateral direita" coloquei 350px

Passo 2 - Trocar a cor de fundo do blog: 

Para separar os gadgets da barra lateral em caixas, é preciso que a cor de fundo do seu blog seja diferente da cor dos gadgets (caso contrário, não faz sentido fazer tudo isso). 

• 1. Vá em Tema, depois clique em Editar Html. 



Vai aparecer a caixa de códigos, e você precisa clicar no meio dos códigos para apertar ctrl+f no seu teclado. Depois procure por body { 

Deve aparecer algo assim: 

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Você vai trocar o background: $(body.background) por background: #e8e8e8

Deve ficar assim: 

body {
  font: $(body.font);
  color: $(body.text.color);
  background: #e8e8e8;
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Veja o exemplo: 



* No lugar de #e8e8e8 pode ser o código da cor que você quiser :) 


• 2. Aperte ctrl+f novamente, e procure por .content-inner {

Você vai substituir as 5 linhas que estão lá, por essas: 

.content-inner {
background-color: #e8e8e8;
}

Veja o exemplo: 



Passo 3 - A parte mais importante, a cor dos gadgets:

Agora, para separar os gadgets da sidebar em caixas é só trocar o fundo da cor de cada quadradinho :D

Aperte ctrl+f novamente, e procure por: ]]></b:skin>

Acima de ]]></b:skin> você vai colar: 

/* --------------------  Barra lateral lindona ------------------- */

.sidebar .widget {
    background-color: #fff; /*-- cor de fundo  --*/
    padding: 10px; /*-- espaço bonitinho  --*/
}

Ficará assim: 



* Falarei mais sobre o "espaço bonitinho" no próximo tutorial 

Bônus: 

Para deixar os posts separados em caixas também, é só acrescentar o seguinte código, antes de  ]]></b:skin>

.date-outer {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
}

O seu blog ficará assim: 



Se tiver dado certo, seu blog vai ficar com o fundo cinza, ou da cor que você escolheu, e sua barra lateral ficará separada em caixas brancas! 

Espero que tenham gostado do tutorial, e que vocês consigam fazer, é só ter calma e paciência. Caso não dê certo, deixa aqui nos comentários o link do seu blog + o problema, pra eu tentar te ajudar! 

Não esqueçam de comentar o que acharam, e caso tenham alguma sugestão de tutorial, vou amar saber. Obrigada Lukas Reis, por ter dado essa sugestão incrível ♥

Veja outras dicas e tutoriais  para o  seu blog ♥

Com amor,
Lariz

Comente com o Facebook:

2 comentários:

  1. Isso que é tutorial, olha como faz falta na internet um desse tão bem feito. Faz um de como se coloca menu e submenu no blogger pelo amor de Deus, fui tentar fazer isso e quase que apago todas as minhas postagens.rsrs
    bjs
    Simplesmente Ciana

    ResponderExcluir
  2. Você é demais, Lari!
    To adorando tudo e tentando colocar o teu tema base junto com suas dicas.
    Mas esse por exemplo não consegui encontrar os códigos pra mudar o fundo :( ta tuuuudo branco

    www.bybruni.com.br

    ResponderExcluir

• 2015 - 2017 Feito com ♥ por Lariz Santana