Como personalizar a sidebar do blogger #1 | Quero Dicas | Tutoriais para seu blogs


Como personalizar a sidebar do blogger #1


É muito comum quando fazemos um blog, não gostarmos da sidebar básica do template do blogger. A maioria das vezes, ela não combina com o nosso tema ou por que simplesmente queremos dar um look diferente.
Hoje eu vou compartilhar com vocês um tutorial diferente de como personalizar a sidebar e o trocar o fundo, tudo separadamente. Veja como poderá ficar no botão demostração.

Clique

     Personalizando o fundo


Eu sempre recomendo fazer um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a um blog de teste! Não sabe fazer Backup? Não tem problema, clique aqui e aprenda.
1 - No painel do seu blog, acesse o html do se template. Tecle Ctrl + F  e procure por:

 /* Widgets  

Quando achar, você verá um código + ou - assim:

/* Widgets
----------------------------------------------- */
.widget .zippy {
  color: $(widget.alternate.text.color);
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
.widget .popular-posts ul {
  list-style: none;
}

2 - Abaixo da última chave " } ", cole o código abaixo.

.sidebar .widget {  /*  www.querodicasde.blogspot.com */

margin: 5px 5px 5px 5px;   /* Margem entre uma caixa e outra */

background: #FFE1FF;   /* Cor de fundo das caixas */
border-radius: 6px; /* Arredondamento dos cantos das caixas */
padding:10px;    /* Espaço entre o texto e as margens */
text-align: center;  /* Alinhamento do texto */
-webkit-box-shadow: 0 0 1em #c9c9c9;  /* Sombra nas caixas. Se não quizer, apague este trecho */
}



 

Ficando assim: 

.widget .popular-posts ul {
  list-style: none;
}
.sidebar .widget {  
  margin: 5px 5px 5px 5px; 
  background: #FFE1FF;
  padding:10px;  
  border-radius: 6px;
  text-align: center; 
  -webkit-box-shadow: 0 0 1em #c9c9c9; 
}

3 - Pronto.
Agora é só fazer as modificações do fundo e trocar a cores.
Clique - Tabela de cores em html.


     Personalizando o título


1 - Procure por 
/* Headings 


 


2 - Da mesma forma que a anterior. Abaixo de " } ", cole o seguinte código ↓

.sidebar h2  /*  www.querodicasde.blogspot.com */
margin: -11px -11px 2em -11px; /* margem */
font-family: ARIAL; /* tipo de fonte do titulo */
line-height: 2em; /* altura da linha */
text-transform: capitalize; /* transformação do texto */
color: #000000; /* cor do título */
background: #FFBBFF; /* cor de fundo dos títulos */
font-size: 14px; /*tamanho da fonte */
text-align: center; /* alinhamento centralizado do texto */
text-shadow: 0px 0px 1px #fff; /*cor e inclinação da sombra, SE QUIZER RETIRE*/
border-radius: 10px 10px 10px 10px; /* deixa as bordas arredondadas */
word-spacing:.1em; /* espaço entre palavras do título */
}
 
 
Ficando assim:

  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
.sidebar h2 
margin: -11px -11px 2em -11px;
font-family: ARIAL;
line-height: 2em;
text-transform: capitalize; 
color: #000000;
background: #FFBBFF;
font-size: 14px;
text-align: center; 
text-shadow: 0px 0px 1px #fff; 
border-radius: 10px 10px 10px 10px;
word-spacing:.1em; 
}

3 - Novamente personalize onde deixei escrito ao lado e Pronto! 

Não deixe de deixar seus comentários. Beijinhos
Me Contrate!

4 comentários

Clique e deixe seu comentários
segunda-feira, 18 janeiro, 2016 ×

OI bia to reformando meu blog e to adorando por causas das suas dicas ele está mara!

estiloradiante.blogspot.com

Resposta
avatar
admin
terça-feira, 19 janeiro, 2016 ×

Fico muito Feliz Laysa =D
Sucesso!

Resposta
avatar
admin
sábado, 12 novembro, 2016 ×

Que legal! Obrigada por compartilhar irei ver se consigo pois ainda sou leiga kkk devagar chego lá rsrs

Resposta
avatar
admin
sábado, 12 novembro, 2016 ×

Verdade. Com calma e paciência conseguimos tudo.

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.