Cambiar las etiquetas por imágenes

Hoy vamos ha hablar de como podemos cambiar nuestras etiquetas por imágenes tal y como podéis ver en mi blog.

Para hacer esto vamos a usar un código CSS que tenemos que introducir en nuestra plantilla HTML.
Lo primero que siempre digo es hacer una copia de seguridad de nuestra plantilla por si algo nos nos sale bien.
Puedes ver como se hace paso a paso

en este Vínculo

Ahora que ya tenemos nuestra copia de seguridad en un sitio a salvo, nos vamos a:

Tema < HTML
Nos aparecerá todo nuestro código HTML de nuestra plantilla.
Con los botones Ctrl+F buscamos.

<span class='post-labels'>
  <b:if cond='data: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>

Justo después de

  <a expr:href='data:label.url' rel='tag'>

añadimos el código siguiente, tanta veces como etiquetas queramos cambiar.

<b:if cond='data:label.name == "{ETIQUETA1}"'>
        <img src='{URL DE IMAGEN1}' expr:title='data:label.name' expr:alt='data:label.name'/>
      </b:if>

Cambiamos lo marcado en morado por el nombre de la etiqueta, y lo verde por la url de la imagen.
Quedara así.

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'>
      <b:if cond='data:label.name == "{ETIQUETA1}"'>
        <img src='{URL DE IMAGEN1}' expr:title='data:label.name' expr:alt='data:label.name'/>
      </b:if>
      <b:if cond='data:label.name == "{ETIQUETA2}"'>
        <img src='{URL DE IMAGEN2}' expr:title='data:label.name' expr:alt='data:label.name'/>
      </b:if>
      <b:if cond='data:label.name == "{ETIQUETA3}"'>
        <img src='{URL DE IMAGEN3}' expr:title='data:label.name' expr:alt='data:label.name'/>
      </b:if>
      <b:if cond='data:label.name == "{ETIQUETA4}"'>
        <img src='{URL DE IMAGEN4}' expr:title='data:label.name' expr:alt='data:label.name'/>
      </b:if>
      </a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
  </b:if>
</span>