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:
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