Cómo poner iconos en las pestañas del menú de Páginas

Muchas veces sentimos la necesidad de añadir iconos a los enlaces para identificar de una mejor manera el tipo de contenido al que dirige dicho enlace. En la mayoría de los menús esto no es problema pues basta con añadir el código de la imagen antes del nombre de la pestaña, pero con el gadget de Páginas se dificulta un poco ya que el código del gadget no es el tradicional de un menú HTML sino que contiene una serie de códigos propios de Blogger, así que añadir imágenes -diferentes- directamente en el HTML es imposible.

Pero eso no significa que no podamos buscar formas alternas de hacerlo, y es justo lo que haremos en esta entrada, vamos a ver cómo poner un ícono diferente en cada pestaña del menú de Páginas, y para ello usaremos CSS, específicamente los selectores :nth-child() y ::before
De esta manera conseguiremos que cada una de las pestañas de nuestro gadget de Páginas tenga un ícono diferente antes del nombre de la pestaña.

Conseguir lo anterior es mucho más fácil de lo que se piensa. Sólo tienes que entrar a Plantilla | Edición de HTML y añadir antes de ]]></b:skin> lo siguiente:

#PageList1 li:nth-child(1):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(2):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(3):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(4):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}

En estos estilos CSS verás unos números, cada número representa cada pestaña de tu menú, siendo que el 1 es la primera pestaña, el 2 la segunda, etc. Toma en cuenta que la primera pestaña habitualmente es la Página Principal, así que la segunda pestaña pertenece a la primera página de tu menú.

En el código deberás cambiar la URL de la imagen donde se indica en color rojo.

La distancia entre el ícono y el texto se modifica en padding-right.

Con top podrás controlar la distancia desde arriba, esto es para que puedas alinear la imagen verticalmente. Yo he puesto que el ícono se desplace 3px desde arriba, pero puede variar según el tamaño del ícono que pongas, ahí deberás jugar con el valor de top incluso pudiendo usar un valor negativo para subir la imagen, por ejemplo -3px

El código es para las primeras cuatro pestañas de tu menú, si tuvieras más pestañas entonces sólo añade un trozo de código como este por cada pestaña a la que le quieras agregar un icono.

#PageList1 li:nth-child(5):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}

Por cada código que agregues deberás cambiar el número 5 por el correspondiente: 6, 7, 8, etc.

Así de fácil y sencillo podrás personalizar más el gadget de Páginas usando iconos que ayuden al reconocimiento visual de las pestañas.