Widget label con imagenes en blogger

Entre todo esto de personalizar el blog, se te van ocurriendo una u otra idea, esta vez mostrare una forma sencilla para agregar imágenes personalizadas a las etiquetas que mostramos con el Widget Label.

Pasos:

1.- lo primero que hacemos es respaldar la plantilla, es lo recomendable siempre, y así nos evitamos malos ratos .

2.- localizamos (con los artilugios expandidos)  la línea: <b:widget id='Label1',  cuando agregamos el widget la primera vez, blogger asigna el nombre Label1, si agregas otro, le asignara Label2 y así sucesivamente, lo importante aquí es que sepas a cuales les aplicaras los cambios, en este caso será a uno de id igual a Label1.
Una vez localizada la línea, encontraremos un trozo de código similar al siguiente:

(clic para mostrar/ocultar el código)

<b:widget id='Label1' locked='false' title='Secciones' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
 <b:if cond='data:display == &quot;list&quot;'>
  <ul>
   <b:loop values='data:labels' var='label'>

<!-- nos interesa desde aquí .. -->
    <li>
     <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
     <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
      <data:label.name/></a>
     </b:if>
     <b:if cond='data:showFreqNumbers'>
      <span dir='ltr'>(<data:label.count/>)</span>
     </b:if>
    </li>
<!-- hasta aquí, solo lo que esta dentro de LI -->

   </b:loop>
  </ul>
 <b:else/>
  <b:loop values='data:labels' var='label'>
   <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
     <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
     <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
     <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
   </span>
  </b:loop>
 </b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

lo que nos interesa es lo que está dentro de la etiqueta li, sustituimos el código indicado anteriormente, por este otro:

  <li>
   <!-- acá se imprime la imagen por etiqueta-->
   <img expr:src='&quot;RUTA_hacia_las_imagenes/&quot; + data:label.name + &quot;.png&quot;'/>
   <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
   </b:if>
  </li>

al código solo se le agrega la etiqueta que permitirá mostrar la imagen:

<img expr:src='&quot;RUTA_hacia_las_imagenes/&quot; + data:label.name + &quot;.png&quot;'/>

solo cambiamos  la ruta hacia la imagen, dichas imágenes en este caso deben tener el mismo nombre que la etiqueta. Por ejemplo:

algunsitio/imagenes/blog/Blogger.png
algunsitio/imagenes/blog/JQuery.png
algunsitio/imagenes/blog/Juegos.png

3.- por último agregamos el código CSS necesario:

<style>
/* css para las etiquetas */
#Label1 {}
#Label1 ul li {
  background-image: none;
  font-family:&quot;Times New Roman&quot;, Times, serif;
  font-size:16px; /* tamaño de la etiqueta */
}
#Label1 img {
   margin-right: 15px;
}
</style>

Puedes ver el código aplicado acá (click aquí).