Tutorial barra de navegacion para Blog

Aqui puedes encontrar un tutorial muy detallado sobre como colocar una barra de navegacion en tu blog. Es muy sencillo hacerlo, pero, de cualquier manera, el tutorial está ilustrado con imágenes para que cualquier persona lo pueda entender, aunque no tenga conocimientos previos al respecto.

<style type="text/css"><br /><style type="text/css"><br />/*Azul ////////////////////*/<br />#menu ul { margin:0; list-style:none;}<br />#menu li {display:inline;margin:0;padding:0;}<br />#menu a { float:left;background:url(http://i864.photobucket.com/albums/ab207/jose_vv/button_lefts.png) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 2px 0 8px;text-decoration:none;}<br />#menu a span {float:left;display:block; background: url(http://i864.photobucket.com/albums/ab207/jose_vv/button_rigth.png) no-repeat right top;padding:8px 12px 4px 6px;color:#fff;}<br />#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#EFEBFA; float:none;}<br />#menu a:hover span {color:#fff;}<br />#menu a:hover {background-position:0% -27px;}<br />#menu a:hover span {background-position:100% -27px;}<br />#menu #current a {background-position:0% -27px;}<br />#menu #current a span {background-position:100% -27px;color:#fff}<br />.clear {clear:left}<br />/* Fin de Barra */<br /></style><br /><div><br /><div id='menu'><br /><ul><br /><li><a href='link_1'><span>CATEGORIA_1</span></a></li><br /><li><a href='link_2'><span>CATEGORIA_2</span></a></li><br /><li><a href='link_3'><span>CATEGORIA_3</span></a></li><br /><li><a href='link_4'><span>CATEGORIA_4</span></a></li><br /><li><a href='link_5'><span>CATEGORIA_5</span></a></li><br /></ul><br /></div><br /><div id="tag" style="position:absolute; left:4px; top:5px; z-index:50;width:172px; height:51px;"><br /><a href="http://softw-anime.blogspot.com/" target="_blank"><br /><img border=" 0" src="http://i864.photobucket.com/albums/ab207/jose_vv/back.gif" /><br /></a></div></div><br />

Si ya tienes un blog y quieres poner una barra de navegacion vas a ir a "Personalizar", "Diseño", "Elementos de la página" y Cliqueás en "Añadir un gadget"

Se te abrirá una ventana nueva con todas las opciones de gadget que proporciona blogger. La que vas a elegir es "HTML/Javascript"

Ahora debes ir a al cuadro de texto de la barra que elegiste y tienes que copiar todo el texto que se encuentra abajo de la imagen del mismo. Te conviene clickear con el botón derecho y elegir la opción "seleccionar todo" y recién ahi, copiar.
Una vez que está copiado, ya puedes pegarlo en el espacio en blanco de la ventana. Una vez que lo pegaste, tienes q cambiar donde dice CATEGORIA_# por el nombre de la categoria que quieres tener y en donde dice LINK_# pones el link de tu pagina con la etiqueta de la categoria (por ejemplo en la mia es http://softw-anime.blogspot.com/search/label/Tutorial, donde tutorial es la etiqueta), lo guardas y listo!!
Es en este momento cuando podés ver si te gusta como queda el fondo cliqueando en "Vista previa".
Si estás conforme, guardas los cambios.

Si quieres botones de otro color dejame un comentario y te los pondre.