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 */

---

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

---