Personalizar los enlaces de las etiquetas con viñetas y crear efecto hover
El DEMO lo puedes ver ahora mismo en mi blog, sin embargo puedes cambiar los colores de los enlaces, el tipo de viñetas y los colores a tu gusto y necesidad para que se adapten al diseño tu plantilla.
Ventajas
- No necesitas crear ninguna imagen
- Puedes aplicarlo en el blog inmediatamente y con resultados visibles
- Crearás un efecto hover interesante en las viñetas
- Una vez que lo uses en tu blog, puede cambiar las viñetas, colores etc.
Limitaciones
- La viñeta se limita a 3 estilos diferentes, el círculo, el cuadrado y el disco
- El efecto hover no funciona en IE6 (Internet explorer 6) eso es problema del navegador
Antes que nada, vamos a partir del hecho de que usas el widget de las etiquetas, si es que aún no tienes en tu blog hay que colocarlo yendo a Diseño ►elementos de la página y harás click en agregar gadget, seleccionando la opción etiquetas, y donde dice mostrar elige la opción lista, (aunque si no la cambias a nube, ya viene marcada de ese modo) pensando en que usas etiquetas en tus entradas claro.
Una vez colocado el widget de las etiquetas, los enlaces se mostrarán con los estilos definidos en la plantilla, específicamente los estilos que tiene la barra lateral para las listas, (si es que ahí lo colocas) entonces lo que haremos es crear nuestros propios estilos, aprovechando que ya blogger tiene ese widget identificado.
Empecemos.
Paso 1. Ve a Diseño►Diseñador de plantillas►Avanzado►Añadir CSS y luego agrega ahí en el campo, el siguiente código (puedes cambiar colores y estilo de viñetas a tu gusto)
Empecemos.
Paso 1. Ve a Diseño►Diseñador de plantillas►Avanzado►Añadir CSS y luego agrega ahí en el campo, el siguiente código (puedes cambiar colores y estilo de viñetas a tu gusto)
/*ESTILOS DE LOS ENLACES DE LAS ETIQUETAS*/
#Label1 ul{margin:0;padding:0 0 20px 30px;}#Label1 ul li{margin: 0;padding:2px 0 5px 0;list-style-type: circle; /*este es el tipo de viñeta*/font-size: 24px; /*este es el tamaño de la viñeta*/
color: #f8b22a; /*este es el color de la viñeta*/
}#Label1 ul li:hover {/* aquí van los estilos que se verán al poner el puntero sobre el enlace*/list-style-type: disc; /*este es el estilo de la viñeta*/
color: inhrit; /*aquí pones el color que se verá la viñeta al poner el puntero encima "efecto hover" */
}#Label1 li{margin:0;padding:0;}#Label1 li a{color: #241802; /*este es el color de la letra de la etiqueta*/
font-size: 16px;/*este es el tamaño de la letra de la etiqueta*/
padding:0;margin:0;
text-decoration: none;}#Label1 li a:hover {
color: inherit; /*aqui pones el color del enlace de la etiqueta al poner el puntero arriba*/font-weight: normal; /*si en lugar de normal pones bold la letra se vera negrita al poner el puntero del ratón encima*/ }
Nota: Label1 es la forma que blogger identifica el widget de las etiquetas, cada vez que agregas este widget, se va numerando de forma consecutiva, si es el segundo será Label2, el tercero Label3 etc., si no estás seguro puedes verificar en el código HTML de tu plantilla usando CTRL F, escribiendo ahí el nombre que le asignaste al título de tus etiquetas, por ejemplo Categorías, luego ves como esta identificado, está dentro de esta linea de código:
<b:widget id='Label1' locked='false' title='Categorías' type='Label'/>
Si no quieres hacerlo de ese modo, puedes pegarlo antes de ]]></b:skin> , es lo mismo, solo que del otro modo, vemos los cambios desde ahí, en el diseñador de plantillas y sin tener que poner vista previa cada vez que necesitemos.
Paso 2. Desde ahí puede ver los resultados, cuando pegues el código haz click en la tecla enter después de } por ejemplo, para que sea interpretado lo que has agregado, edita los colores y las formas guiándote con las indicaciones que escribí arriba en el código, entre /*...*/.
Paso 3. Una vez que consigas los resultados que quieres, guarda los cambios en APLICAR AL BLOG.
Paso 3. Una vez que consigas los resultados que quieres, guarda los cambios en APLICAR AL BLOG.
¿Cuáles son los distintos tipos de viñetas que puedo usar?
Podemos cambiar los valores de esta propiedad usada en las listas llamada: list-style-type, estos son los tipos de viñetas que puedes usar:
En forma de disco (este es por defecto en las listas) y se escribe así:
list-style-type: disc;
Y se ve así ( le cambié el color para crear el efecto hover)...
También puede verse como círculo, si lo escribimos así (cambié la viñeta a un disco en el hover)
list-style-type: circle;
...o en forma de cuadrado (cambié la viñeta a un disco en el efecto hover)
list-style-type: square;
Sabiendo todo eso, podemos hacer algunos cambios en los valores de esa propiedad para crear los efectos que queramos, también, como usamos enlaces, es posible poner el color del texto diferente al color de la viñeta y poner el tamaño de la viñeta diferente a la del texto, cambiar la viñeta en el hover etc.
Para cambiar los colores a tu gusto, usa esta tabla de colores .
¿Te gustó? dime que piensas...
Referencias: (ahí puedes ver los valores de la propiedad list-style-type y otra información)
w3schools
En forma de disco (este es por defecto en las listas) y se escribe así:
list-style-type: disc;
Y se ve así ( le cambié el color para crear el efecto hover)...
También puede verse como círculo, si lo escribimos así (cambié la viñeta a un disco en el hover)
list-style-type: circle;
...o en forma de cuadrado (cambié la viñeta a un disco en el efecto hover)
list-style-type: square;
Sabiendo todo eso, podemos hacer algunos cambios en los valores de esa propiedad para crear los efectos que queramos, también, como usamos enlaces, es posible poner el color del texto diferente al color de la viñeta y poner el tamaño de la viñeta diferente a la del texto, cambiar la viñeta en el hover etc.
Para cambiar los colores a tu gusto, usa esta tabla de colores .
¿Te gustó? dime que piensas...
Referencias: (ahí puedes ver los valores de la propiedad list-style-type y otra información)
w3schools
Etiquetas:CSS,Tutoriales