Menu Horizontal Barra de Navegacion

Aquí de nuevo gracias una petición de uno de nuestros usuarios por medio del Formulario de Contacto, el cual tenía una duda respecto al Menú de Navegación Horizontal el cual pueden ver en la parte superior de nuestro sitio.

Ahora, les enseñare como crear uno, incluso les daré la barra en cinco colores para que ustedes puedan usarla en cualquier diseño.

Este código funciona en cualquier plataforma que funcione con HTML y CSS sin embargo ahora les mostrare donde tienen que colocar este código en Blogger, antes que nada.

Código Base: Este código es lo que necesitaran poner en cualquier parte del blog que ustedes deseen, ahora les enseñare como ponerlo en la parte de abajo del titulo de Blogger, si lo quieren usar en otra Plataforma como Wordpress simplemente tomen este código y el CSS que encontrarán más adelante.

<div id='menu'>
<ul>
<li id='current'><a href='http://TuBlogEnlace0'><span>Titulo</span></a></li>
<li><a href='http://TuBlogEnlace1'><span>Titulo</span></a></li>
<li><a href='http://TuBlogEnlace2'><span>Titulo</span></a></li>
<li><a href='http://TuBlogEnlace3'><span>Titulo</span></a></li>

</ul>
</div>

Simplemente Cambia el texto en Negritas por los Enlaces a tu Blog y los Titulos que quieres que tengan las pestañas.

Ahora, si estamos usando Blogger tendremos que ir a Plantilla > Edición HTML y seleccionar la casilla Expandir plantillas de artilugios , ahora buscaremos el siguiente Texto, y antes de eso pegaremos el Código Base.

<div id='content-wrapper'>

Ahora, simplemente tenemos que seleccionar el Código CSS, si no usan Blogger simplemente tienen que implementarlo como cualquier otro elemento CSS, ahora si están usando Blogger tendrán que buscar:

]]></b:skin>

Ahora, simplemente tienen que elegir un color que les guste y poner el código antes del código antes dicho:

/* Dorado  ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img508.imageshack.us/img508/971/hgoldljp3.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img505.imageshack.us/img505/7849/hgoldrzx4.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#faf4d0; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */


/*Rojo ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img508.imageshack.us/img508/8383/redlhh5.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img257.imageshack.us/img257/1230/redrme9.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#faf4d0; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */


/* Verde ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img257.imageshack.us/img257/5924/verdelzc1.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img257.imageshack.us/img257/4822/verdercx2.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#b7c600; float:none;}
#menu a:hover span {color:#687100;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#687100}
.clear {clear:left}
/* Fin de Barra */


/*Azul  ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img257.imageshack.us/img257/5375/bluelco2.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img442.imageshack.us/img442/4413/bluermk9.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#EFEBFA; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */


/* Rosa  ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img257.imageshack.us/img257/9909/rosalvt2.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img523.imageshack.us/img523/7982/rosarjk6.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#EFEBFA; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */

Technorati : Blogger, Navegación, Trucos Blogger, Tutorial Blogger