COMO ARMAR UN BARRA DE NAVEGACIÓN HORIZONTAL PARA BLOGGER

En esta Entrega, Te voy a Enseñar como configurar Una barra lateral de enlaces en tu blog
Para esto Es Necesario introducir DOS series de codigos, el primero  lo ubicaras en "EDICION DE HTML" (Configura la orientacion , la forma  y Los Colores De Los Botones), y El Segundo lo ubicaras en la cabecera de tu blog, alojandolo en  DISEÑO/AÑADIR GADGET/"HTML / JAVASCRIPT" (ESTE Codigo configura La cantidad De Botones, el titulo de Los Mismos y el enlace url de las paginas Que asignes a cada boton.
he preparado  4 Barras horizontales para qué Copies el codigo Con El Color que mas se adapte a tu blog, (negro, gris, amarillo y rojo)

Comencemos:

1) Entra a "DISEÑO"

2) Edición de HTML

3)Buscamos el siguiente codigo:  ]]></b:skin>   , (Para ubicarlo rapido Teclea Ctrl + F, aparecera un cuadro  de busqueda, copialo dentro asi podes ubicar al instante el codigo en la plantilla )

4) Justo antes de ]]></b:skin>  pega el codigo Que corresponda al color que elegiste Para Tu Blog.

CODIGO BOTONES NEGROS

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnStmqEZp3jmjh3Xw_GoPPVhz82KVjau8kEWn__QPXAUTgPgxHs_BRQfLUp9ZxkTc9zK0MJbvozW0lmm3Y-B25MXUsurxXlzPLgd3E9wAoRqByblXgbTU34oMiae297jLM6jnGJ8O7DLQ/) 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://img832.imageshack.us/img832/9943/bottonejestudio5.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */


________________________
CODIGO BOTONES ROJOS

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnStmqEZp3jmjh3Xw_GoPPVhz82KVjau8kEWn__QPXAUTgPgxHs_BRQfLUp9ZxkTc9zK0MJbvozW0lmm3Y-B25MXUsurxXlzPLgd3E9wAoRqByblXgbTU34oMiae297jLM6jnGJ8O7DLQ/) 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://a.imageshack.us/img594/5764/bottonejestudiorojo.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */

_______________________________
CODIGO BOTONES AMARILLOS

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnStmqEZp3jmjh3Xw_GoPPVhz82KVjau8kEWn__QPXAUTgPgxHs_BRQfLUp9ZxkTc9zK0MJbvozW0lmm3Y-B25MXUsurxXlzPLgd3E9wAoRqByblXgbTU34oMiae297jLM6jnGJ8O7DLQ/) 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://a.imageshack.us/img715/8199/bottonejestudioamarillo.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */
­­­­­­­­­­­­­­­­­­­­­­
_______________________________
CODIGO BOTONES GRIS

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnStmqEZp3jmjh3Xw_GoPPVhz82KVjau8kEWn__QPXAUTgPgxHs_BRQfLUp9ZxkTc9zK0MJbvozW0lmm3Y-B25MXUsurxXlzPLgd3E9wAoRqByblXgbTU34oMiae297jLM6jnGJ8O7DLQ/) 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://a.imageshack.us/img594/6805/bottonejestudiogris.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */

5) Luego hace clic en "GUARDAR PLANTILLAS" y luego a "GUARDAR CAMBIOS".
A esta elatura ya tenemos configurados los botones, Pero todavia no se ven porque debemos insertar la Segunda serie de codigos!
6) Ve a "DISEÑO"  y luego a "Anadir GADGET" en la cabecera del blog.
7) Busca y hace clic en  "HTML / JAVASCRIPT" y pega el siguiente codigo.

<!-- Menú horizontal --><br /><br /><div id="menu"> <br /><br /><ul><br /><br /> <li><a href="URL"><span>Título 1</span></a></li> <br /><br /> <li><a href="URL"><span>Título 2</span></a></li> <br /><br /> <li><a href="URL"><span>Título 3</span></a></li> <br /><br /> <li><a href="URL"><span>Título 4</span></a></li> <br /><br /></ul> <br /><br /></div> <br /><br /><a href="http://ej-estudio.blogspot.com/"> ej estudio</a>

8) LUEGO escribes  en "Titulo" el Nombre y en "URL" la dirección de la pagina  Que DESEAS enlazar.
Para agregar mas Pestañas Copia y pega una secuencia Secuencia {
9) Guarda los Cambios y Disfruta de tu barra personalizada horizontal!

En el Caso Que Tu BARRA HORIZONTAL aparezca en la Pantalla MUY PEQUEÑA, Vuelve a abrir el gadget donde alojaste la ultima serie de códigos (en la cabecera del blog) y te encontras Que en cada Secuencia aparece este código "font-size: 0 " , reemplaza el 0 Por El numero 10 , te quedaras debería asi; "font-size: 10", Cambia los valores en todas las Secuencias Que veas,  LUEGO guarda los Cambios y Problema solucionado. ¡¡¡¡¡¡!

NOTA: NO TE Olvides QUE ANTES DE REALIZAR Cualquier CAMBIO EN EDCION DE HTML. DEBES REALIZAR UNA COPIA DE SEGURIDAD,

Espero Haber Sido muy claro y Que te sea de utilidad la explicación!. Saludos y Hasta La próxima Entrega!

Edgardo Lafuente
__________________________________________________