Como colocar os marcadores por lista

Bom galera esse e um tutorial muito pedido aqui na dob (tem uns cara que enxe o saco),como voçês ja devem ter percebido os marcadores aqui na Design on brasil sao em forma de lista,nesse tutorial ensinarei como personaliza-los dessa forma

primeiro procure por:

<b:include data='post' name='post'/>

e substitua por:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='marcadores'><ul><a expr:href='data:post.url' title='Clique aqui para visualizar esta postagem'><li>
<data:post.title/> | Postador por:<data:post.author/>
</li></a></ul>
</div>

<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Agora procure por:

]]></b:skin>

E acima disso adicione:

/* mrc
----------------------------------------------- */
#marcadores ul{
list-style-type:none;
padding:1px 0px 0px 2px;
width:540px; /* Defina a largura da lista */
height:20px; /* Defina a altura da lista */
margin-left:10px; /* Defina a distancia da lista em relação eo objeto a esquerda */
margin-top:-6px;
background: -webkit-gradient(linear, left top, left bottom, from(#484848), to(#242424)) repeat-x bottom left;/* Defina o background da lista */
border: 1px solid #242424;
border-radius: 5px; /* Defina o radius da lista */
-moz-border-radius: 5px; /* Defina o radius da lista */
-webkit-border-radius: 5px; /* Defina o radius da lista */
-khtml-border-radius:5px; /* Defina o radius da lista */
}
#marcadores li{
text-align: left;
padding:1px 0px 0px 2px;/* Defina a Posição do texto na lista */
color:#fff;/* Defina a cor do texto na lista */
font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
text-shadow:0px 0px 3px #101010;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#marcadores li:hover{
padding:1px 0px 0px 15px;/* Defina a Posição do texto na lista com hover */
text-align: left;
color:#ccc;/* Defina a cor do texto na lista com hover*/
font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {
display: none; /* codigo para remover a frase "mostrando postagem do marcador.. */
}

Creditos

Codigo base desenvolvido por:Lord K1R4
Modificado e personalizado por:Misterrxd