Sidebar Cute

Oiii, a pedido de uma leitora nossa, eu vim ensinar a vocês, como deixar a sidebar como a daqui do CDS. É muito simples e cute *-* Vamos ao tuto!

                                 Vá em Disign  Adicionar um gadget  HTML/JavaScript

                                                    Cole o seguinte código:

<style>

/**SIDEBAR BAD REPUTATION**/

.sidebar .widget {

box-shadow: inset 0 0 10px #eee, 0 0 2px #dbdbdb;

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-bottomright: 20px;

border-bottom-right-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-bottomleft: 20px; 

border-bottom-right-radius: 20px;

width:100% !important;

background:#fff;  /** COR DO FUNDO DO GADGET **/

margin:33px 0 !important;

padding:10px;

border-top:2px solid #ebebeb;

border-right: 2px solid #ebebeb; 

border-left: 2px solid #ffd6eb; 

border-bottom: 2px solid #ebebeb; 

}

.sidebar .widget h2 {

text-align: center;

box-shadow: inset 0 0 10px #eee, 0 0 2px #dbdbdb;

border-left:2px solid #ffd6eb;  /** COR DA BORDA DE CIMA **/;

border-top:2px solid #ebebeb;  /** COR DA BORDA DE CIMA **/;

border-right:2px solid #ebebeb;  /** COR DA BORDA DE CIMA **/;

background: #ebf9ff;  /** COR DO FUNDO DA ÁREA DO TITULO **/

text-shadow:0 1px #ccc/** SOMBRA DO TITULO **/;

color:#ff94c9/** COR DO TITULO **/;

font-size:15px /** TAMANHO DO TITULO **/;

margin-top:-35px /** MARGIN **/;

margin-left:-12px /** MARGIN **/;

margin-bottom:5px /** MARGIN **/;

padding:3px;

width:40%;

overflow:hidden

-webkit-border-top-right-radius: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;

-webkit-border-top-left-radius: 20px;

-moz-border-radius-topleft: 20px;

border-top-left-radius: 20px;}

.sidebar .widget:first-child {

  margin-top: 0;

}

/** FIM DA SIDEBAR BAD REPUTATION [bad-reputation-13.blogspot.com.br]**/

</style> 

  Se quiser a sidebar igual a daqui, é só ajustar as margens e salvar , mas se não quiser, modifique do seu gosto e depois salve.

 Mas lembre-se:  Vá em modelo  Personalizar  Avançado  Plano de fundo da barra lateral  coloque transparente nos dois.

 Desta maneira:

                             

 Salve e pronto!
Só isso
Créditos: Bad Reputation
Bjoks!