Domingo de Trucos

Bueno hoy es dia de trucos, el dia de hoy gracias a Gem@, les traigo como agregar un menú a su blog, muy parecido al mio de hecho.

Nota Nerd Herd: Es mas facil encontrar los codigos si presionamos Ctrl
+f

Vamos a añadir un menú con CSS esto quiere decir que consta de los estilos y el código para los enlaces únicamente.
Los estilos los añadiremos justo antes de ]]>

.red #slatenav {
position: relative;
display: block;
height: 42px;

background: transparent url(url-de-imagen-gif) repeat-x top left;
text-transform: uppercase;

font: bold 11px Arial, Verdana, Helvitica, sans-serif;
}

.red #slatenav ul {
margin: 0;

padding: 0;
list-style-type: none;

width: auto;
}

.red #slatenav ul li {
display: block;

float: left;
margin: 0 1px 0 0;

}
.red #slatenav ul li a {

display: block;
float: left;

color: #FECCC3;
text-decoration: none;

padding: 14px 22px 0;
height: 28px;

}
.red #slatenav ul li a:hover,
.red #slatenav ul li a.current {

color: #fff;
background: transparent url(url-de-imagen-HOVER.gif) no-repeat top center;

}
En este menú tenemos dos imágenes:

La Opacidad

El Efecto Hover

Para añadirlas estas o cualquier otra imagen nos fijaremos que el nombre de la imagen corresponda con el lugar donde tenemos que añadirla en los estilos del menú.

Es decir, guardamos o descargamos las imágenes a nuestro PC las subimos a nuestro servidor o a una entrada del blog que dejaremos en borrador y copiamos la url de la imagen para añadirla en el sitio que corresponda.

Podría ser que no contenga imágenes y que en lugar de decir background: transparent url(url-de-cualquier imagen);fuera un color en este caso sería algo así background:#ccc; o background-color:#ccc; eso nos daría la posibilidad de sustituir el color por cualquier otro.

Ya tenemos el código de los estilos en la plantilla, las imágenes añadidas o el color de nuestro agrado.

Guardamos los cambios y nos situamos en plantilla de diseño, allí editamos un nuevo gadget y escogemos la pestaña de HTML...

En las páginas de menús también nos proporcionan el código HTML para los enlaces del menú, para este del ejemplo es el siguiente:

Donde dice url-página añadimos la url de la página que vamos a enlazar.
*En descripción es el texto que se muestra al pasar el cursor sobre el enlace.
*El texto Home lo añadí para tener una página de inicio.
*Etiqueta1 será el nombre de los enlaces, es decir el texto que visualizamos.

Completamos esos detalles y guardamos los cambios para no perderlos.


» Para enlazar una entrada en concreto «
Lo que haremos será visualizar la entrada completa. Podemos hacerlo de varias formas...

» Haciendo click en el título de la entrada.
» Desde una confirmación de comentario en el correo.
» En el enlace de (x comentarios)
» En un título de los archivos.
» Desde un gadget de últimas entradas.

Una vez visualizamos la entrada completa copiamos la url que aparece en la barra del navegador. Esa es la url de la entrada que pegaremos en el código del menú.