Como fazer sidebar personalizadas

Oi pessoal, mais uma vez, eu estou fazendo um tutorial, enfim, eu estava vendo a ASK do Sugoi, e achei uma pergunta de como fazer sidebares igual do FansBr. A nova versão deles, estão com sidebares personalizadas, cada um digamos de um tamanho, e hoje, irei passar um código que eu criei para vocês, vamos lá.

Coloque isso na sua css (style.css ou abaixo do ]]>) o seguinte código:

.side1{width:150px; height:180px; background:#000;}
.side2{margin-left:162px; margin-top:-180px; width:150px; height:180px; background:#000;}
.side3{margin-left:-px; margin-top:10px; width:313px; height:310px; background:#000;}
.side4{margin-left:-px; margin-top:10px; width:313px; height:110px; background:#000;}

Agora coloque isso onde você quer que apareça:

<div class="side1"> 

<h3><font color="#FFFFFF">Titulo</font><font color="#E09EBC">Sidebar </font><br>

<b>O quê você quer aquiney?</b> Conteúdo 1.<br>

<b>O quê quer aquiney?</b> Conteúdo 2.<br> 

</div> 

 <div class="side2">
<h3><font color="#FFFFFF">Titulo</font><font color="#E09EBC">Sidebar </font><br>

<b>O quê você quer aquiney?</b> Conteúdo 1.<br>

<b>O quê quer aquiney?</b> Conteúdo 2.<br> 

</div> 

<div class="side3"> 

<h3><font color="#FFFFFF">Titulo</font><font color="#E09EBC">Sidebar </font><br>

<b>O quê você quer aquiney?</b> Conteúdo 1.<br>

<b>O quê quer aquiney?</b> Conteúdo 2.<br> 

</div> 

<div class="side4"> 

<h3><font color="#FFFFFF">Titulo</font><font color="#E09EBC">Sidebar </font><br>

<b>O quê você quer aquiney?</b> Conteúdo 1.<br>

<b>O quê quer aquiney?</b> Conteúdo 2.<br> 

</div> 

A partir disso, você edita do jeito que deseja, personaliza como quiser, isso é apenas uma base, caso queira que eu ajude ou faça um tutorial como personalizar, manda na ASK que eu to sempre vendo lá.

Se for repostar em seu blog, credite, qualquer conteúdo retirado deste blog deverá ser creditado.

É isso, até o próximo tutorial, pessoal.