Sidebar Personalizada

|| ||

Olá pessoal hoje vim mostrar um tutorial que eu achei bem legal. Na verdade quando fiz meu primeiro layout eu coloquei ele que de Sidebar personalizada vocês podem ver como ele é nessa imagem abaixo:

No Painel do seu blog>> Modelo>> Personalizar>> Avançado>> Plano de fundo da barra lateral e deixe com o fundo e borda transparente, como na imagem:
Para ver maior é só clicar na imagem

Depois, clique em Aplicar ao blog>> Voltar para o Blogger>> Editar HTML>> Aperte Ctrl+F e procure por:
/* Widgets

Abaixo dele terá um código parecido com esse:

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

Apague esse código e cole esse:
.sidebar .widget {
  margin: 0px 0px 15px 0px; /* margem entre uma caixa e outra */
  background: #FFFFFF; /* cor de fundo das caixas */
  padding:10px; /* espaço entre o texto e as margens */
  border-radius: 10px; /* arredondamento dos cantos das caixas */
  text-align: justify; /* alinhamento justificado do texto */
  -webkit-box-shadow: 0 0 1em #c9c9c9; /* sombra nas caixas, apague esse trecho se não quiser sombra */
}
Aperte novamente Ctrl+F e procure por:
/* Headings
Logo abaixo dessa tag que pesquisamos, cole o seguinte código:
.sidebar h2 {
margin: -11px -11px .65em -11px; /* margem */
font-family: Verdana; /* tipo de fonte do titulo */
line-height: 1.8em; /* altura da linha */
text-transform: capitalize; /* transformação do texto */
color: #FFFFFF; /* cor do título */
background: #22222; /* cor de fundo dos títulos */
font-size: 12px; /*tamanho da fonte */
text-align: center; /* alinhamento centralizado do texto */
font-weight: bold; /* deixa o título em negrito */
border-radius: 10px 10px 0 0; /* deixa apenas as bordas acima arredondadas */
word-spacing:.2em; /* espaço entre palavras do título */
}
Mude onde estiver em negrito, visualize e se estiver tudo certo salve. Pronto!
Espero que tenham gostado!
Créditos: Mania de Garota