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
