Etiquetas al estilo taringa

En una entrada anterior, publique un psd de etiquetas en forma de nuve con contador, varios usuarios me dicen si es posible al estilo taringa en las entradas publicadas.


La etiquetas se muestran con un código similar a este:

<span class='post-labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Eliminamos este código:

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

Colocamos el CSS antes de </b:skin>:

.post-labels {
margin: 0;
padding: 0;
}
.post-labels a {
float: left;
position: relative;
background: url("http://2.bp.blogspot.com/-h-Je11ViQSE/UFH9ymAQyuI/AAAAAAAAFe4/K0khxLAA4vE/s400/tag-taringa-ajmrdesign.com.png") no-repeat bottom right;
height: 24px;
line-height: 24px;
padding:0 10px 0 8px;
margin: 0 0 0 25px;
color: #333;
font-size:13px;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
text-decoration: none;
}
.post-labels a:before {
background: url("http://2.bp.blogspot.com/-h-Je11ViQSE/UFH9ymAQyuI/AAAAAAAAFe4/K0khxLAA4vE/s400/tag-taringa-ajmrdesign.com.png") no-repeat;
content: "";
width:15px;
height: 24px;
float: left;
position: absolute;
top: 0;
left: -15px;
}
.post-labels a:hover {
text-decoration: underline;
}

Demo

Blogger CSS3 Templates JavaScript Gadget