Sidebar Independente

Ae pessoal, estou trazendo um tutorial para vocês de como deixar os gadgets em uma sidebar independente.
Mais como assim?
Cada gadget terá sua própria sidebar,como se fosse uma post ,por exemplo.
Demonstração
Então vamos lá

1° Passo - Topo

Essa parte será o nome referente ao nome do gadget, exemplo: Menu Principal, Tutoriais, etc.

Acima de
]]></b:skin>

Cole o seguinte código: .sidebar h2 {
background:url(URL DA IMG DO TOPO)no-repeat;/*IMAGEM DO TOPO*/
height:51px; /*ALTURA*/
width:233px; /*LARGURA*/
font-size:15px; /*TAMANHO DA LETRA*/
padding:16px 0 0 20px; /*ESPAÇAMENTO*/
color:#0f0f0f; /*COR DA LETRA*/
font-weight:bold;/*TIPO DA FONTE*/
}

2° passo - Meio

Aqui é onde o conteúdo do gadget ficará.

.sidebar .widget-content {
background:url(URL DA IMG DO MEIO)repeat-y;/*IMAGEM*/
width:XXpx; /*LARGURA*/
padding:0 0px 0 9px;/*ESPAÇAMENTO*/
font-size:15px;/*TAMANHO DA LETRA*/
margin-top:-10px;/*MARGEM DE CIMA*/
}

3° Passo - Fim

Será o final do gadget ond não terá nada.

.sidebar .widget {
background:url(URL DA IMG DO FIM)no-repeat bottom;/*IMAGEM*/
width:XXpx; /*LARGURA*/
margin:0px 0px 0px 0px;
padding:0px 6px 19px;/*ESPAÇAMENTO*/
} OBS: no 3° Passo não poderá ser acrescentado o tamanho da imagem.
Demonstração É isso pessoal espero que tenham gostado