Como es de costumbre, nos agrada mejorar día tras día, el aspecto de nuestro blog. Entonces también con la nuve de etiquetas, al verlas sin atractividad o sin gran diseño que nos agrade, entonces intentamos mejorarla. No te preocupes te traigo un diseño muy conocido, que quizás te haya pasado por la mente colocarlo, al verlo en el sitio de Taringa.
Debes de buscar en tu blog, un código parecido a:
Código HTML:
<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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
Cuando hayas encontrado el código, te tocará eliminar la siguiente línea:
Código HTML:
<b:if cond='data:label.isLast != "true"'>,</b:if>
Y luego en la plantilla buscas:
Y antes de el código mencionado, pegas el siguiente estilo, para que funcione la Nuve de Etiquetas al estilo de Taringa:
Código HTML:
.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;
}
Cualquier pregunta estamos a tus ordenes. Saludos y espero que te haya sido de gran utilidad la Nuve de Etiquetas con la forma de Taringa
LinkBack URL
About LinkBacks
Nuve de Etiquetas con la forma de Taringa
Citar
Iniciado por smario
