Sidebar Personalizada

Hoje vou fazer um tuto, de como personalizar a sidebar do seu blog!! Eu aprendir esse tuto na If I Ruled the World. É muito fofo. Olha o resultado abaixo:

Primeiro vá em >> Modelo >> Editar HTML e aperte CTRL+F.

Quando você apertar CTRL+F, vai aparecer uma caixinha de pesquisa igual essa abaixo.

Clique em Leia Mais para vê o resto da postagem

Na caixinha, você irá procurar por:  /* Widgets

Abaixo desse código, ( /* Widgets) terá no HTML, códigos parecidos com esses.

Apague todo esse código, até  /* Mobile

E no lugar desse código que você apagou, substitua por:

/* Widgets

----------------------------------------------- */

.sidebar .widget {

border-bottom: 2px solid #F31BA1;

padding-bottom: 10px;

padding-left: 10px;

padding-right: 10px;

margin: 30px 0;

Background: #ffffff;

box-shadow: inset 0 0 10px #cac9ca, 0 0 5px #cac9ca;

border-bottom: 8px solid #ffb6c1;

}

.sidebar .widget:first-child {

margin-top: 0;

}

.sidebar h2 {

font-family: Amaranth; /*Nome da fonte*/

text-transform: uppercase;

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

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

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4APRZuUYF2TzlyV5VcVd6Kq1PLxoBUjz-CLLRBVxPD8RHy9aAH3NLQUFbDNyEVF1mDsAs8f1ooSLWrC6gbRkJRU4B-SWb0-ynRk3mmi8Lc0tRqUrHJWTCoe6TAnRuJ5KOUr3cq7LUc_o/s1600/152.png) no-repeat center; /*URL da sua aribbon/Faixinha*/

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 #ca6f80;

margin-bottom:20px ;

margin-right: -4px;

padding:21px;

width:112%;

-webkit-transition-duration: .30s;

boder-bottom: solid 10px #f294a3;

}

.sidebar h2:hover {

text-shadow:0 2px 2px #F31BA1;

letter-spacing: 3px;

-webkit-transition-duration: .30s;

}

.sidebar .widget:last-child {

border-bottom: none;

margin-bottom: 0;

padding-bottom: 0;

}

.footer-inner .widget,

.footer-inner .widget,

.sidebar .widget {

  font: $(widget.font);

  color: $(widget.text.color);

}

.sidebar .widget a:link {

  color: $(widget.link.color);

  text-decoration: none;

}

.sidebar .widget a:visited {

  color: $(widget.link.visited.color);

}

.sidebar .widget a:hover {

  color: $(widget.link.color);

  text-decoration: underline;

}

.footer-inner .widget a:link {

  color: $(link.color);

  text-decoration: none;

}

.footer-inner .widget a:visited {

  color: $(link.visited.color);

}

.footer-inner .widget a:hover {

  color: $(link.color);

  text-decoration: underline;

}

.widget .zippy {

  color: $(widget.alternate.text.color);

}

.footer-inner {

  background: transparent $(footer.background.gradient) repeat scroll top center;

}

Se você quer mudar algo, mude o que está em negrito.

Aqui esta o Link da Tabela de Cores, se vc quiser mudar a cor de algo...

Espero que tenham gostado.... Comentem

Bjjs!! Leandra Thays