Hacker of the Web
Tus ideas en código!...y mas

Barra de navegación Horizontal

La barra de navegación horizontal le permite cambiar de pagina, funcionan como pestañas, son de diferentes colores y pueden ir al link que usted prefiera.

Este código funciona con cualquier plataforma que funcione con HTML y CSS, aqui les pongo las intrucciones de como se aplica este código.
Para ver un ejemplo de estas barras de navegacion horizontal visite mi otro blog
.

El código es el siguiente:
<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>

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.


Solo sustituye las palabras en rojo por sus links y titulos de cada pestaña (Puede Agregar las que quiera).Si estas en blogger entra a Edición de HTML y selecciona la casilla Expandir plantillas de artilugios ya aqui busca la siguiente linea, y justo antes de esto el código anterior:

<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 solo elijan un color de pestañas y coloquen el código antes del anterior:
/* 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:#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 */
/*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:#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 */
/*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:#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 */
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

6 comentarios !

GaBoManSoN dijo...

sii 1 pregunta
como hago para poner esa barra de navegacion x arriba del titulo del blog?
yo de titulo tngo una imagen, pues bueno la barra de navegacion la kiero poner x arriba de esa imagen
espero tu respuesta
cualkier cosa t dejo mi blog
http://gabomanson.blogspot.com

muchas gracias

SaNTy dijo...

Hola!!, GaBoManSoN.

Pues lo que me pides es muy sencillo, pero no puedo contestarlo aqui. Que te parece si te lo contesto en una entrada.

nem dijo...

Primero, te agredezco por la orientación, me pareció excelente.
Soy nuevo en el uso de blogs. Ya apliqué los pasos para crear la barra horizontal de uno de mis blogs.
Una de las pestañas dice FOTOS. Ahora, ¿cómo hago para tener acceso a esa pestaña? Es decir, necesito subir unas fotos, pero no sé qué hacer.
¿Podrías hacer el favor de orientarme?

SäNTÿ dijo...

nem, para poder tener acceso a las pestañas debes agregarles la dirección justo aqui:

<a href='http://santyweb.blogspot.com'>

Es decir, debes sustituir el URL en negrita para darle una dirección a donde acceder la pestaña ;)

Cocineros del Mañana dijo...

Hola tengo muchas etiquetas en mi blog y me gustaria ponerlo como una barra horizontal pero si hago lo que me decis me me quedaria una barra larguisima son 36 etiquetas
Te dejo el link para que lo veas y me respondas
http://www.saborcotidiano.com
Gracias

felipe dijo...

hola,

esta muy buena esta información, aunque ya tenia la barra, pero quería saber como hacer que se despliegue una sección de la barra, como la tuya de "secciones". te agradecería me ayudaras, si quieres visita mi blog, la sección que quiero que se despliegue es la de "oportunidad" http://4life-nope.blogspot.com/


Página Principal
Arriba