Un Menú con Iconos usando el Gadget de Lista de Enlaces

Una de las cosas que más me gusta de Blogger es la posibilidad de añadir gadgets a la plantilla desde la sección de Diseño. Esto le permite a cualquier usuario agregar elementos fácilmente a su blog.
Todos esos elementos como la lista de enlaces, el cuadro de búsqueda, etc,  resultan muy útiles cuando le vamos dando forma a nuestro blog, y podemos personalizarlos fácilmente con CSS y en la mayoría de los casos, sin necesidad de ingresar a la edición de HTML de la plantilla.

Bueno, pues hoy vamos a personalizar el gadget de "Lista de enlaces", creando un menú horizontal con iconos. Haremos algo como lo que a continuación puedes ver en la imagen:

También puedes verlo en acción en la Demostración

Existen muchas posibilidades para lograrlo, pero en esta ocasión, agregaremos las imágenes de los iconos de forma separada, luego veremos como hacerlo con la técnica de sprites.

Para quienes quieran ahondar en el tema, esto lo lograremos usando algunos (1) selectores avanzados (2) first-child selector, que son soportadas por la mayoría de navegadores incluyendo el viejo IE7 (no IE6), y algunas propiedades de CSS3, que ya son soportadas por Internet Explorer 9.

Podrás agregar los enlaces fácilmente sin temor a equivocarte, ya que no tocarás el código que genera los enlaces con sus respectivos iconos. En el ejemplo, voy a colocar el menú entre la cabecera y el contenido.

¿Suena interesante?, entonces veamos como hacerlo:

En el ejemplo usé sólo tres enlaces diferentes, claro que tu puedes usar los enlaces que necesites, sólo tendrás que poner atención en el CSS que usarás, para que el enlace coincida con la imagen respectivamente. Es sencillo ya lo verás ;)

IMPORTANTE. Para las nuevas plantillas de Blogger o aquellas que no cuenten con una sección arriba del contenido, recomiendo ampliamente agregar el menú en la sección de la cabecera, NO en la sección que Blogger dispuso para la lista de páginas estáticas en las nuevas plantillas, y que se encuentra debajo de la cabecera. Para ello, necesitas ir a la Edición de HTML de la plantilla, y buscar esta linea código:

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Deberás cambiar 1 por 3, y no por yes. Una vez hecho esto, verificas en vista previa y si todo luce bien, guarda los cambios.

Ahora podrás ver una nueva area punteada al ir a la sección de Diseño, y la verás arriba de la cabecera, y es ahí donde vas a agregar el gadget con la opción de "Lista de enlaces", y luego lo arrastrarás para que quede debajo de la cabecera.

Cómo hacerlo paso a paso

Paso 1. Agrega un gadget desde la sección de la cabecera (ver arriba donde dice IMPORTANTE), eligiendo la opción "Lista de enlaces"

y agrega los enlaces que necesites. Al terminar, guarda los cambios:

Paso 2. Arrastra el gadget de lista de enlaces que agregaste, para que quede debajo de la cabecera:

Paso 3. Agregar y editar el CSS.
Vas a Plantilla > Personalizar > Avanzado  > Añadir CSS, y en el campo agrega el CSS que tendrás que editar para adecuarlo a tus enlaces.

#header .widget{
margin: 5px 0;
}
#LinkList2 ul{
width:100%;
margin:0;
}
#LinkList2 ul li{
list-style:none;
float: left;
margin-right:12px;
display: block;
height: 50px;
padding: 4px 3px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #ccc;
}
#LinkList2 ul li a{
line-height:90px;
color:#4f4f6f;
display:block;
text-align:center;
text-shadow:1px 0px 1px #fff;
}
#LinkList2 ul li:first-child{
background: #d3d3d5 url(URL_DEL_ICONO_DEL_PRIMER_ENLACE) 
no-repeat center top; width: 60px;
}
#LinkList2 ul li:first-child + li{
background: #d3d3d5 url(URL_DEL_ICONO_DEL_SEGUNDO_ENLACE) 
no-repeat center top; width: 60px;
}
#LinkList2 ul li:first-child + li + li{
background: #d3d3d5 url(URL_DEL_ICONO_DEL_TERCER_ENLACE) no-repeat center top;
width: 74px;
}
#LinkList2 ul li a:hover{
text-decoration:none;
}
#LinkList2 ul li:hover{ /*la sombra en el hover*/
-webkit-box-shadow: 0 8px 6px -6px #000aaa;
-moz-box-shadow: 0 8px 6px -6px #000aaa;
box-shadow: 0 8px 6px -6px #000aaa;
border: 1px solid #a1a1a4; /*el color del borde*/
}

Explicación del CSS

He resaltado de negro las propiedades mínimas en donde tendrás que editar los valores que están de rojo.

Empecemos con #LinkList2 ul li


En:
margin-right:12px; especificamos el margen a la derecha de cada elemento (cada enlace) con el icono, así los separamos.


En:
height: 50px; especificamos el alto que tendrá cada elemento (cada enlace) con el icono. Se aplica a todos.

con: 
border-radius: 5px;  
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

...creamos esquinas redondeadas, el valor debe ser el mismo, y es para que se vea en la mayoría de navegadores. Funciona en navegadores modernos y en Internet Explorer 9, mas no en IE8 e IE7. 

En:

border: 1px solid #ccc; 

Especificamos el color de borde, grosor, y estilo. #ccc, es un tono gris.

Seguimos con:  #LinkList2 ul li a

En:

line-height:90px;

Hacemos que el texto del enlace se vaya hacia abajo.

En:

color:#4f4f6f;

Especificamos el color del texto del enlace.

Con:

text-shadow:1px 0px 1px #fff;

Creamos la sombra en el texto, que en el ejemplo se ve semi hundido.

Seguimos con: #LinkList2 ul li:first-child

Con el CSS anterior, especificamos que aplicaremos el CSS en el primer elemento (primer enlace), que en el ejemplo es el enlace que dice Inicio.

En: 

background: #d3d3d5 url(URL_DEL_ICONO_DEL_PRIMER_ENLACE) no-repeat center top;

Especificamos el color de fondo del elemento (que en el ejemplo es gris), y el icono que llevará el primer elemento o nuestro enlace y su posición dentro del la cajita, y evitamos que se repita (con no-repeat). #d3d3d5 es el color de fondo.

En:

width: 60px;

Especificamos el ancho del primer elemento. (la cajita gris con el icono). Mide 60 pixeles de ancho.

Seguimos con: #LinkList2 ul li:first-child + li

Con la linea de CSS anterior, especificamos que aplicaremos el CSS en el segundo elemento (segundo enlace), que en el ejemplo es el enlace que dice Android.

En:

background: #d3d3d5 url(URL_DEL_ICONO_DEL_SEGUNDO_ENLACE) no-repeat center top;

Especificamos el color de fondo del elemento (que en el ejemplo es gris), y el icono que llevará el "segundo elemento" o segundo enlace; definimos su posición dentro de la cajita contenedora, y evitamos que se repita (con no-repeat). #d3d3d5 es el color de fondo.

En:

width: 60px;

Especificamos el ancho del segundo elemento. (la cajita gris con el icono). Mide 60 pixeles de ancho.

Seguimos con: #LinkList2 ul li:first-child + li + li

Con el CSS anterior, especificamos que aplicaremos el CSS en el tercer elemento (tercer enlace), que en el ejemplo es el enlace que dice Fotografías.

En:

background: #d3d3d5 url(URL_DEL_ICONO_DEL_TERCER_ENLACE) no-repeat center top;

Especificamos el color de fondo del elemento (que en el ejemplo es gris), y el icono que llevará el "tercer elemento" o nuestro tercer enlace y su posición dentro del la cajita, y evitamos que se repita (con no-repeat). #d3d3d5 es el color de fondo.

En:

width: 74px;

Especificamos el ancho del tercer elemento. (la cajita gris con el icono). Mide 74 pixeles de ancho.


Agregar más enlaces con iconos

Pero, ¿cómo hacer si necesito más enlaces con iconos?

Es sencillo sólo repites el último bloque de CSS que identifica al último enlace, y lo pones exactamente debajo de éste.

#LinkList2 ul li:first-child + li + li +li{
background: #d3d3d5 url(URL_DEL_ICONO) no-repeat center top;width: 74px;}

Agregas +li    (como se aprecia en el bloque anterior) cada vez que necesites un nuevo enlace con icono. Editas los valores tomando en cuenta la explicación del CSS. El código anterior serviría para un cuarto enlace con su icono.

Si ocuparas un quinto enlace con su icono, entonces tendrías que usar algo así:

#LinkList2 ul li:first-child + li + li +li +li{background: #d3d3d5 url(URL_DEL_ICONO) no-repeat center top;width: 74px;}

...y así sucesivamente.

Paso 4. Una vez conseguidos los resultados que buscas, haces click en "Aplicar al Blog" para guardar los cambios.

Notas Adicionales

Y ¿qué con Internet Explorer, también funcionará?

Sí funcionará, excepto por algunas propiedades de CSS3 que no funcionan en versiones viejas de ese navegador, como IE8 e IE7. No en IE6.

Es así como luce el menú en IE7 e IE8, como puedes comprobar en el mismo navegador.

Nota importante: He identificado el widget como #LinkList2, esto suponiendo que es el segundo, si fuera el primero, sería #LinkList1, Blogger los va numerando sucesivamente.

Cualquier observación, o experiencia que quieras compartir sobre el tema no olvides en comentarla ;)

Los iconos que usé los puedes descargar en Might Deals, son 200 en total y por supuesto son gratis ;)