testando: Sidebar personalizada

No Painel do seu blog>> Modelo>> Personalizar>> Avançado>> Plano de fundo da barra lateral e deixe com o fundo e borda transparente

Depois, clique em Aplicar ao blog>> Voltar para o Blogger>> Editar HTML>> Aperte Ctrl+Fe 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 */

}