jueves, 14 de marzo de 2013

Poner Etiquetas al Estilo Taringa en Blogger

Cansado de mostrar las etiquetas con un simple texto, de esta forma obtendrás un toque mas profesional de calidad, mostraras las etiquetas en un diseño mas perfecto y detallado.

La etiquetas siempre 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 este Codigo antes de </b:skin>:
.post-labels {
margin: 0;
padding: 0;
}
.post-labels a {
float: left;
position: relative;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjVYRo2NwzZWM48HS9QV_XuZIyQm5BDMTNcx5rL5WmnD1NhQyuBa9aorB3W-qdh-o6MDBvDvmAwsk3nsjMXJoBBUvuW0UVbB2fRchtzmwobTOlfk7FXw8oU_1X_UPAxxGWSz2MwZCnSlk/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjVYRo2NwzZWM48HS9QV_XuZIyQm5BDMTNcx5rL5WmnD1NhQyuBa9aorB3W-qdh-o6MDBvDvmAwsk3nsjMXJoBBUvuW0UVbB2fRchtzmwobTOlfk7FXw8oU_1X_UPAxxGWSz2MwZCnSlk/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;
}

Y listo ya tenemos nuestras etiquetas a un mejor estilo !!




No hay comentarios:

Publicar un comentario