Es conveniente recordar, porque tiene que ver con el tema que vamos a tratar, que el estilo de los enlaces se define asignando su apariencia según sus distintos estados. Dichos estados son: - Enlace no visitado: Se define con el atributo link.
- Enlace visitado: Se define con el atributo visited.
- Enlace activo (cuando se está pulsando): Se define con el atributo active.
- Enlace con el cursor del mouse sobre él: Se define con el atributo hover.
Para crear un menú en el cual los enlaces aparezcan de diferentes colores, según el estado en que se encuentren:
1.- Vamos a Editar HTML: | Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
2.- Localizamos la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código CSS: #menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}
#menu div.barraMenu {
text-align: center;
}
#menu div.barraMenu a.botonMenu {
background-color: #F2952A;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}
#menu div.barraMenu a.botonMenu:hover {
background-color: #EB6969;
}
#menu div.barraMenu a.botonMenu:active {
background-color: #D9D959;
color: black;
} |
3.- Vista previa y Guardar plantilla Las líneas del código correspondientes a los estados de los elementos del menú, y a los títulos de los mismos, están resaltadas con sus colores correspondientes. Podemos cambiarlos por los que deseemos.
| background-color de a.botonMenu: | Enlace no visitado |
| background-color de a.botonMenu:hover: | Cursor sobre enlace |
| background-color de a.botonMenu:active: | Enlace visitado |
4.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript (debajo de la cabecera). En este gadget pegamos el siguiente código: <div id="menu">
<div class="barraMenu">
<a class="botonMenu" href="#">Opción 1</a>
<a class="botonMenu" href="#">Opción 2</a>
<a class="botonMenu" href="#">Opción 3</a>
<a class="botonMenu" href="#">Opción 4</a>
</div>
</div>
|
Cambiamos los signos # por los enlaces correpondientes y Opción 1, 2, 3, 4, por los títulos de los mismos. Ponerle fondo al menú Para ponerle fondo al menú arriba explicado, sencillamente colocamos el código HTML dentro de una tabla, así: <table border="0" cellpadding="20px" bgcolor="#000000" align="center">
<tr>
<td>
<div id="menu">
<div class="barraMenu">
<a class="botonMenu" href="#">Opción 1</a>
<a class="botonMenu" href="#">Opción 2</a>
<a class="botonMenu" href="#">Opción 3</a>
<a class="botonMenu" href="#">Opción 4</a>
</div>
</div>
</td>
</tr>
</table> |
...en donde: - border="0": La tabla no tiene borde.
- cellpadding="20px": El espacio entre el borde de la tabla y la celda, en este caso el menú, es de 20 pixeles.
- bgcolor="#000000": el color del fondo del menú (tabla) es negro.
- align="center": La tabla está ubicada en el centro.
Pero podemos modificarla según el diseño que deseemos, por ejemplo: - Si queremos que el fondo tenga borde, en border"0", cambiamos el 0 por 1, 2, 3..., dependiendo del grosor que deseemos.
- Para darle al fondo un ancho y una altura específicos reemplazamos cellpadding="20px" por: width="pixeles deseados", para el ancho, y height="pixeles deseados", para la altura.
- Para que el menú ocupe todo el ancho de la página, le ponemos al width 100% (width="100%"), y eliminamos align="center".
- En caso de que el menú ocupe menos del total del ancho de la página, debemos darle ubicación con la propiedad align:"": center (centro), left (izquierda) y right (derecha). Si no lo hacemos se nos dará por defecto, que es la izquierda.
- Para cambiar el color del fondo, en bgcolor="000000", cambiamos 000000 por el código del color deseado.
Para más información sobre la creación de tablas visite: Una buena herramienta para conseguir códigos hexadecimales de todos los colores, está en: Códigos hexadecimales de colores |
2 comentarios :
Hola CastorLux, Primero quiero agradecerte por toda esta información que es de suma utilidad para ir aprendiendo a armar mi blog.
Lo curioso es que más avanzo con este tema y más preguntas se me ocurren.
Te consulto lo siguiente, acabo de agregar un menu dinámico tal como lo explicas. Este código lo inserté en Diseño->Elementos de pagina. Lo que quisiera es ponerle color de fondo a ese elemento nada más pero no encuentro la manera. Podrías Ayudarme. Desde ya te lo agradezco
mi blog es http://urkumanta.blogspot.com
Urkumanta: Arriba, dentro del post, en "Ponerle fondo al menú", está la respuesta a su pregunta. Espero que le sea útil.
Gracias por su consulta.
Cordial saludo.
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.