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.