Personalizando um Blog:: Personalizando o Sidebar+Modelos

Bom,estamos no Tempo de Personalizar um blog,e hoje vamos personalizar um Sidebar,o que é Sidebar?

Sidebar são aquelas barrinhas que ficam do lado das postagens,aqui uma imagem:

Bom,hoje vou ensinar como colocar no blog e vou mostrar uns modelos para vocês ^^
Para aprender continue Lendo

1° Passo::

                         Vá em Modelo>Editar HTML> e procure por: /*Widgets>Depois de -----------------

Apague até chegar em: /*Mobile. Não apague o /*Mobile!!!

Depois é só copiar o código dos modelos abaixo e colar entre /*Widgets e /*Mobile

1° Sidebar

EU CRIEI ESTE MODELO!

.sidebar .widget {

background: #fff;font-family: calibri; /*FONTE*/

color: #fff;

padding: 10px; /*Não modifique aqui*/

border-top: 7px solid #c863c0;

border-bottom : 7px solid #cb7de2;

box-shadow: inset 0 0 2px #E3E3E6, 0 0 3px #ccc;

-webkit-transition-duration: 1.50s; /*duração da transição*/ }

border-bottom: 2px solid $(widget.border.bevel.color);

padding-bottom: 10px;

margin: 10px 0;

}

.footer-inner .widget,

.sidebar .widget {

  font: $(widget.font);

  color: $(widget.text.color);

}

.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;

} 

      

...........................................................................................................................................

 2°Sidebar

Este Modelo peguei no Blog: Louca Por HTML

@font-face { font-family: "claire hand light"; src: url('http://static.tumblr.com/6dk6hb7/ijsmqihce/clairehandlight.otf');}

.sidebar h2 {

  font-family: 'claire hand light';

font-size: 13px;

  color: #fff;

text-align: center;

letter-spacing: 2px;

}

 .sidebar .widget {

  border-bottom: 3px solid #ffb4c4;

border-top: 3px solid #ffb4c4;

padding-bottom: 10px;

padding-left: 10px;

padding-right: 10px;

padding-top: 10px;

margin: 30px 0;

background: #fff;

box-shadow: inset 0 0 15px #eee, 0 0 4px #ccc;

}

.sidebar .widget h2 {

margin:.25em 0 0;

font-size:19px;

padding-top: 2px;

background-color: #ffbec4;

font-family:'claire hand light';

text-align: center;

text-shadow:1px 1px 1px #ff9aa4;

box-shadow: inset 0 0 4px #ff9aa4,1px 1px 1px #f6f6f6;

font-style: normal;

text-transform: lowercase;

letter-spacing:-1px;

color:#fff;

}

margin-top: -6px;

margin-left:-43px;

margin-bottom:0px;

padding:15px;

width:140%;

overflow:hidden;

}

Postado por: Pandy