Blog Dazamigas: Tutorial: Modelo de Sidebar

Olá pessoal, então...hoje eu vim aqui falar que agora vou dar algumas dicas de tutoriais pra vocês!

Começando hoje com: Modelo de sidebar - "Faixinhas"

Para começar, vá em blogger>modelo>editar HTML

Depois aperte Ctrl+F ou F3 e procure por: " /*Widgets "

Abaixo cole isso:

.sidebar .widget { text-align: center; border-bottom: 2px solid $(widget.border.bevel.color); padding-bottom: 10px;padding-left: 10px;padding-right: 10px; margin: 30px 0;Background: #ffffff;box-shadow: inset 0 0 40px #eee, 0 0 6px #ccc;border-bottom: 10px solid #aca8e8;

}

.sidebar h2 {

font-family: Century Gothic; /*Nome da fonte*/

text-transform: uppercase;

font-size: 20px; /*Tamanho da fonte*/

color: #fff; /*Cor da fonte*/

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Qndh-QkwtsqVA4iQYOx8G7ggmrbJOomR0nJlhcxM_uX3XbjBaRCN_tuESmKdvUmjuC8h37ldWQ-kA55HugFyA65Pp_-LpmKw8vqUwinTbLiwTPZEF2CaBrT2xSSLC1ELRavQa7CZk9A/s1600/74.png) no-repeat center; /*Sua faixa e posição*/

height: 16px;/*Altura da imagem*/

line-height: 6px;text-align: center; /*Alinhamento do texto*/margin-top: 0px;margin-left:-36px ;text-shadow:0 2px 2px #e07eb6;margin-bottom:20px ;margin-right: -4px;padding:21px;width:112%;-webkit-transition-duration: .40s;}

Você pode trocar os locais que eu destacados! Mude a URL da faixinha que você quer e mude a cor da barrinha que fica embaixo da gadget da sidebar!

Trouxe algumas faixinhas de exemplo para vocês: