Unión de Bloggers Hispanos

Hace unas semanas cuando estaba calentando los motores para actualizar el blog, me puse a probar con varios menús de navegación para poder tener los cuatro servicios unidos y visibles y que fuese más fácil acceder a ellos.

Probé con un sistema complicadísimo, pero el resultado fue pésimo, hasta que Mik (repito, el que tiene un amigo tiene un tesoro), me recomendó el siguiente sistema. Muchísimo más sencillo, funcional y el estilo como veréis atractivo y perfectamente adaptable.

En el weblog de Christopher Ware, encontramos estos magníficos diseños para poner un menú de navegación en tu blog y poder destacar páginas importantes, de forma sencilla.

Podéis verlos en acción en la página de demostración, pero tranquilos que por muy complicado que parezca es muy sencillo.

Para comenzar podéis ir descargando el equipo completo,

Que consta de un archivo htlm, con los códigos que podéis necesitar para cada menú y dos imágenes por menú, si os fijáis en la demostración, cada menú va enumerado con una letra, al igual que las imágenes que necesita.

1.- Escoger un menú

Lo primero que haremos será escoger uno de los once menús, el que más os guste para vuestro blog, entonces dependiendo de la letra con la que esté enumerado buscamos las imágenes que le corresponden enumeradas con la misma letra.

2.- Subir las imágenes al servidor

Por ejemplo para el menú H, necesitaremos las imágenes tableft.gif y tbrightH.gif, y las subiremos a nuestro servidor o un servidor gratuíto, quedándonos con las rutas que las necesitaremos para añadir al código

.

tableftH

tabrightH

3.- Cómo Editar los códigos
Ahora vamos con el código, abrimos el archivo menus.htlm con vuestro editor web favorito o en su defecto con un editor de texto cualquiera.

4.- El estilo CSS

En primera instancia, vendrán ordenados los estilos css, copiáis el que corresponda a vuestro menú y lo pegáis en la hoja de estilos de vuestros blogs entre las etiquetas <style></style>

He marcado en negrita, los lugares que debéis editar y poner las rutas (url) de las imágenes que con anterioridad habéis subido al servidor, cada una lleva su nombre. No debéis tocar nada más (a no ser que queráis adaptar algún color o cualquier otra cosa).

/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

5.- El código htlm

Luego vamos con el código htlm que viene a continuación, os deslizáis hasta el que corresponda con vuestro menú y comenzáis a editarlo, es conveniente que tengáis claro de antemano qué páginas váis a incluír en el menú y el orden que les váis a poner:

<div id="tabsH">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
<br /><br />

Sustituyendo los siguientes campos:

# ---> Por la dirección url de las páginas que vayáis a poner, una por cada almohadilla

Link 1---> El nombre que se verá de la página, veréis que sale dos veces, editadlo las dos, porque la que corresponde a title, es la que se verá cuando pasen el puntero por encima de ella

Por defecto viene preparado para siete enlaces, dependiendo de los que le queráis poner podéis añadir (copiando y pegando) o quitar, borrando lo que sobre.

Una vez editado, lo copiáis y pegáis en el código de vuestro blog en el lugar que queráis que se vea entre las etiquetas <body></body>

Si queréis ver ejemplos en UBH utilizamos estos diseños

6.- Precauciones: Antes de andar toqueteando el código si no tienes mucha experiencia, mejor que hagas copias de seguridad antes y utilices la previsualización antes de guardar cualquier cambio.

Referencias ---> Mikitrix - ExplodingBoy - Free CSS Navigation Menú Design