Como personalizar a sidebar do blogger #1 | Quero Dicas Quero Dicas : Como personalizar a sidebar do blogger #1

Quero Dicas : Como personalizar a sidebar do blogger #1

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.


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! 

Beijinhos

Compartilhe


4 comentários:


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

Apenas peço que leia:

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 palavras de baixo calão, não serão publicados ou respondidos.

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

Beijinhos ♥

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

    estiloradiante.blogspot.com

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

    ResponderExcluir
    Respostas
    1. Verdade. Com calma e paciência conseguimos tudo.

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir