AjMrDeSiGn

Templates Blogger, exquisitez para usuarios curiosos.

Etiquetas al estilo taringa

13 sept. 2012

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





2 comentarios:

Normas comentarios › Leer antes de comentar...

« »

Suscríbete a nuestro feed...