Añadir, enlazar, configurar menús



Entre las consultas que recibo hay una que se repite constantemente, se trata de añadir un menú al blog y que enlace cualquier entrada o etiqueta.

Lo primero que haremos será buscar ese menú, hay muchas páginas donde hacerlo y seguro que ya tenéis alguno en mente.



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

Para ejemplo añadí el que veis en la parte superior de la entrada.
Los estilos los añadiremos justo antes de ]]></b:skin>

.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:


<div class="red">
<div id="slatenav">
<ul>
<li><a href="url-página" class="current" title="descripción">Home</a></li>
<li><a href="url-página" title="descripción">Enlace1</a></li>
<li><a href="url-página" title="descripción">Enlace2</a></li>
<li><a href="url-página" title="descripción">Enlace3</a></li>
</ul>
</div>
</div>

*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- 2- 3 serán 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.
» El gadget de últimos comentarios.

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ú.


» Enlazar una categoría o etiqueta «

Esta vez haremos clikc sobre la etiqueta en concreto. Se mostrarán en este caso todas las entradas con una misma etiqueta o los títulos de las entradas con una misma etiqueta si así lo tenemos establecido.

Copiaremos la url de la barra del navegador y esa es la url de nuestra etiqueta que pegaremos en el código de nuestro menú.

» Enlazar el perfil de autor «

En este caso nos dirigimos a nuestro perfil y realizamos la misma operación, copiar la url y pegar en el menú.

» Enlace a envío de correo «

Aquí cambiamos porque vamos a enlazar con la dirección de nuestro correo.

Sería algo así:
<a href="mailto:aquí tu dirección de correo" target="_blank" title="aquí descripción>ENLACE</a>

Enlazar una página externa sería más de lo mismo, copiar la url de la página y pegarla en nuestro código donde "a href"


Espero que esto conteste tus dudas "El blog gracioso"

¡Suerte!!

0 comentarios:

Publicar un comentario