Personalizar los enlaces de la lista de enlaces de Blogger

El otro día Joel, me comentaba como crear el efecto en los enlaces que tengo en mi BlogRoll, me refiero a el movimiento de los enlaces al poner el puntero encima de este. Es muy sencillo, y primero vamos a personalizar la viñeta usando una imagen como una flecha, o usando un caracter Unicode, y en ambos casos, sólo damos un margen para que se cree ese efecto.

Mejor, veamos como hacerlo paso a paso, tanto con la imagen, como con el Caracter Unicode.

Como personalizar los enlaces usando una imagen

Antes de empezar con la personalización de los enlaces, agrega todos los enlaces que quieras usando el gadget de lista de enlaces; voy a escribir el código CSS como si fuera tu primer lista de enlaces, si fuera tu segunda lista, necesitarás cambiar #LinkList1 por #LinkList2 en el código respectivamente.

Paso1. Vas al Diseñador de plantillas > Avanzado > Añadir CSS, y pegas el siguiente código, agregando la imagen que usarás y editando los demás valores si fuera necesario:

#LinkList1 ul li{
list-style:none;
}
#LinkList1 li a{
background:url(URL_de_la_imagen) no-repeat left center;
padding-left:17px; /*Edita el valor según necesites*/
}
#LinkList1 li a:hover {
margin-left:4px;
} 

En donde:

• Con list-style:none; eliminamos la viñeta por defecto.
• Con padding-left:17px; desplazamos el texto del enlace a la derecha.
• Con margin-left:4px; movemos el texto con la flecha a la derecha, al poner el puntero del ratón encima del enlace, y creamos el efecto.

Si quisiéramos hacer más suave el movimiento del enlace, podemos usar transiciones, que no funcionarán en Internet Explorer, pero si en otros navegadores modernos, y sólo agregas estas lineas en #LinkList2 li a

transition:all .25s linear;
-o-transition:all .25s linear;
-moz-transition:all .25s linear;
-webkit-transition:all .25s linear;

Paso 2. Desde ahí puedes ver los resultados, y guarda los cambios en APLICAR AL BLOG.

Estos son unos ejemplos del resultado, usando distintas imágenes:

• Enlace
• Enlace 2
• Enlace 3


• Mi Enlace
• Tu Enlace
• Nuestro Enlace

Excepto por el efecto de las transiciones (si es que decides usarlas), esto funciona perfectamente en todos los navegadores, incluyendo Internet Explorer 6.

Como personalizar los enlaces usando un Caracter Unicode

Si no quieres usar ninguna imagen, puedes agregar un caracter unicode al enlace y para ello harás lo siguiente:

Paso 1. Vas a la Edición de HTML de tu plantilla, marcas la casilla de expandir plantilla de artilugios, y con la ayuda de Ctrl F, buscas el nombre que le pusiste a tu lista de enlaces, y un poco más abajo verás esto:

<ul>

     <b:loop values='data:links' var='link'>

       <li><a expr:href='data:link.target' ><data:link.name/></a></li>

     </b:loop>

   </ul>

...lo cual cambiarás por esto:

<ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target' target='_blank'><span style='font-size:15px; padding-right:5px;'>»</span><data:link.name/></a></li>
     </b:loop>
   </ul>

Lo que estamos agregando es lo que he marcado de rojo y...

• Con: <span style='font-size:15px; padding-right:5px;'>»</span> agregamos el caracter unicode al enlace que es este: "»" , con: font-size:15px; le damos el tamaño, y con padding-right:5px; separamos el texto del enlace del caracter. Puedes editar los valores sugún necesites. Si quieres poner un color diferente en el caracter, sólo agregas: color:#ABCDEF; con el color que quieras, y para ello puedes consultar esta tabla de colores .
• Con target='_blank' hacemos que la página se abra en una ventana nueva.

Paso 2. Verificas en vista previa, y si todo luce bien, guarda los cambios.

Paso 3.  Finalmente, agregamos una linea de CSS para crear el efecto en los enlaces, en el campo de Añadir CSS del Diseñador de plantillas y desaparecer la viñeta por defecto, guarda los cambios en APLICAR AL BLOG.

#LinkList1 ul li{list-style:none;}#LinkList1 li a:hover{ margin-left:4px;}

...y el resultado lo puedes ver ahora mismo en mi blog.

Personalizar en enlace poniendo una imagen como viñeta sin el efecto 

Si simplemente quieres personalizar la viñeta usando una imagen, usas este CSS, que agregaras en Añadir CSS, yendo al Diseñador de Plantillas, agregando el enlace de la imagen como se indica:

#LinkList1 ul li{
list-style: url(mi_imagen.gif) inside;
}

Puedes leer más sobre la propiedad list-style en Libros web. 


Notas:

• Puedes poner cualquier imagen a tu gusto
• Puedes buscar entre cientos de flechas en  icon finder.
• Tu puedes!