Personalizar los enlaces de la lista de enlaces de Blogger
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{En donde:
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;
}
- 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.
transition:all .25s linear;Paso 2. Desde ahí puedes ver los resultados, y guarda los cambios en APLICAR AL BLOG.
-o-transition:all .25s linear;
-moz-transition:all .25s linear;
-webkit-transition:all .25s linear;
Estos son unos ejemplos del resultado, usando distintas imágenes:
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.
...y el resultado lo puedes ver ahora mismo en mi blog.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;}
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 poner cualquier imagen a tu gusto
- Puedes buscar entre cientos de flechas en icon finder.
- Tu puedes!
Etiquetas:Tutoriales