Tutorial: Como poner etiquetas al estilo Taringa! a tu blog

¡Comparte el tutorial!

Tweet

El día de hoy te traemos un tutorial más para darle un toque diferente y con estilo a tu blog.


Se trata de modificar el estilo con el que se muestran las etiquetas en tu blog haciéndolas similares a las de Taringa!.

Puedes ver como quedan en la imagen:

O viendo debajo del titulo de este tutorial.
Mira como poner etiquetas al estilo Taringa! a tu blog:

¿Que necesitamos?

* Un blog.

Dificultad

Fácil

Paso 1:

Bien, lo primero será ir al escritorio de Blooger, Plantilla > Editar HTML. Y buscar el siguiente código:

<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>

Paso 2:

Elimina la parte del código que esta en color morado.
Ésta:

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

Paso 3:

Ahora, antes de </b:skin> pega lo siguiente:

.post-labels {
margin: 0;
padding: 0;
}
.post-labels a {
float: left;
position: relative;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBsI2Ui3wv0Udwn_DVk99s6tjwwrA7Xt0bT5T-MjV6FnKmHVpAC6B9O10b_w1BfJCm9O-MCq-jAfGiyCVynolXkmoKGRYiuVdmBoUG_2-kaVgaNwH6VqojoP2vnFzAoMwUBcDh4ZI0pfo/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/AVvXsEiBsI2Ui3wv0Udwn_DVk99s6tjwwrA7Xt0bT5T-MjV6FnKmHVpAC6B9O10b_w1BfJCm9O-MCq-jAfGiyCVynolXkmoKGRYiuVdmBoUG_2-kaVgaNwH6VqojoP2vnFzAoMwUBcDh4ZI0pfo/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;
}

Guarda los cambios y listo.

Ya tienes tus etiquetas con el mismo estilo que Taringa!.

Fin del tutorial