Lista de Enlaces con Efecto Hover

Esta es un lista de enlaces que tiene la propiedad de que al pasar el mouse sobre cada enlace, éste cambiara el icono  de cruz a una flechita en color azul. Da un bonito efecto. De esta forma se señala que se está pulsando sobre el enlace escogido.
El resultado es el siguiente:

Para realizarlo es muy sencillo. Primero agregamos a través de diseño, añadir un gadget, lista de enlaces. En seguida vamos a plantilla edición de html y pulsamos F3, seguidamente nos saldrá un buscador en la parte superior derecha y buscaremos  ]]></b:skin>, justo arriba de esto pegamos nuestro código CSS, el cual sería:


#LinkList1 li {
list-style:none;
margin-left:0;
border:none;
font-family: Georgia, 'Times New Roman', serif;
padding: 2px 2px 2px 2px;
font-style:italic;
}
#LinkList1 li a{
color: #000000;
background: transparent url(https://lh6.googleusercontent.com/-PNdYSx9mOqo/TpQfqZmZPSI/AAAAAAAABAo/kXVPI1HYuQc/s16/dbtool.png) no-repeat center left;
padding: 2px 2px 2px 20px;
}
#LinkList1 li a:hover {
list-style:none;
color: #585858;
padding-left: 20px;
font-family: Georgia, 'Times New Roman', serif;
font-style:italic;
background: transparent url(https://lh6.googleusercontent.com/-cO0fZ7mcJJk/TpP5trSawYI/AAAAAAAABAg/AYUoWa1-P68/s16/check.png) no-repeat center left;
text-decoration:none;
}


Luego de ello ya tendrás la lista de enlaces funcional. Si quieres puedes personalizarla aún más cambiando los colores, fuentes, o agregándole tus propios iconos. Para esto último en donde dice background, cambia la URL (lo que está entre paréntesis), por la URL de tu imagen.

Si te gustó compártelo en tu red social o recomiéndalo en Google!!!

3 comentarios:

  1. MUJER MADRE, ESPOSA, HIJA, AMANTE,
    AMIGA, ANCIANA, NIÑA, JOVEN,
    MUJER DE MIL COLORES,
    MUJER COMO LAS FLORES,
    MUJER DE MIL AROMAS,
    A TI MI CANTO EN ESTE DÍA,
    Y TODOS LOS DÍAS DEL AÑO.
    UN FUERTE ABRAZO

    ResponderEliminar
    Respuestas
    1. Gracias por tus saludos. Un abrazo para ti también Karla.

      Eliminar
  2. Puedes darme el link donde explicas como poner el cuadro (etiquetas, lo mas visto, archivo).
    O me puedes explicar como ponerlo. Buena pagina.

    ResponderEliminar

Tus comentarios ayudan a mejorar este Blog.