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/AVvXsEi_Gr0eu7phEnVg8vYdwaHknqu32xXcgOOULytSnPzwTffc5xFFJ6PyKxYwA1f7Az8UO0O3SbyPAY_zdzwRBfnMw5QPj0xhg3qWeDErdC6NLC1BU52fXn4VUvQRVSb-CA-xWqlMh7TYf2k/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/AVvXsEi_Gr0eu7phEnVg8vYdwaHknqu32xXcgOOULytSnPzwTffc5xFFJ6PyKxYwA1f7Az8UO0O3SbyPAY_zdzwRBfnMw5QPj0xhg3qWeDErdC6NLC1BU52fXn4VUvQRVSb-CA-xWqlMh7TYf2k/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 !!

Comentarios

Entradas más populares de este blog

Adjustment Program Epson reset , Reseteador Epson o Reset de Impresoras Epson Stylus

Aprende a Leer con pipo 1 y 2 (MEGA) 1 LINK

Enrutar Extension a Numero Externo en Elastix