Como criar widget personalizado?

• Descrição:

Queria botar um widget que mostra-se isto:


OBS: Isto é uma montagem, para entender melhor o geito que quero o widget.

• Informações:

Código:

<ul class="List_data" id="stats_sidebar">
<li>
<span class="srl">Total de Mensagens</span>
<span class="srr">{FORUMCOUNTPOST}</span>
</li>
<li>
<span class="srl">Total de Membros</span>
<span class="srr">{FORUMCOUNTUSER}</span>
</li>
<li>
<span class="srl"><font><font>Membro mais novo</span>
<span class="srr">{FORUMLASTUSER}</span>
</li>
<li>
<span class="srl">Recorde de usuários online</span>
<span class="srr">{FORUMONLINEUSER}</span>
</li>
</ul>
<style>
#stats_sidebar {
margin: -10px;
}
.List_data li {
padding: 6px;
line-height: 1.3;
}
#stats_sidebar li {
border-bottom: 1px solid #E9EDEE;
}
#stats_sidebar .srl {
font-weight: bold;
}
#stats_sidebar .srr {
float: right;
}
.pun {
    color: #660;
}
</style>

Código:

<ul class="List_data" id="stats_sidebar">
<li>
<span class="srl">Total de Mensagens</span>
<span class="srr">{FORUMCOUNTPOST}</span>
</li>
<li>
<span class="srl">Total de Membros</span>
<span class="srr">{FORUMCOUNTUSER}</span>
</li>
<li>
<span class="srl"><font><font>Membro mais novo</font></font></span><font><font>
<span class="srr">{FORUMLASTUSERLINK}</span>
</font></font></li><font><font>
<li>
<span class="srl">Recorde de usuários online</span>
<span class="srr">{FORUMONLINEUSER}</span>
</li>
</font></font></ul>

Código:


#stats_sidebar {
margin: -10px;
}
.List_data li {
padding: 6px;
line-height: 1.3;
}
#stats_sidebar li {
border-bottom: 1px solid #E9EDEE;
}
#stats_sidebar .srl {
font-weight: bold;
}
#stats_sidebar .srr {
float: right;
}
    #right .main-content ol, #right .main-content ul, #left .main-content ol, #left.main-content ul {
    padding-left: 0px !important;
    }