Personalizar barra de navegación de Blogger

Personalizando la barra de navegación de Blogger podremos darle un ancho igual al de nuestro blog, ponerle bordes y asignarle un color lo más parecido posible al del blog, o al que queramos ponerle, y diferente de los colores que nos impone Blogger. 1.- Desde la página principal vamos a: Diseño ► Diseño ► Barra de navegación (Editar) 2.- En Configuración de la barra de navegación seleccionamos uno de los colores transparentes (que no      son colores, sino transparencias): Claro transparente: cuando el color que le vamos a dar a la barra de navegación, utilizando el código que se indicará más adelante, es de un tono claro. Ejemplo: si le asignamos color blanco a la barra de navegación, pero lo combinamos con la transparencia oscura, obtendremos un color gris claro, pero con la transparencia clara sí obtendremos el blanco. Oscuro transparente: Cuando el color que le vamos a dar a la barra de navegación, utilizando el código que se indicará más adelante, es de un tono oscuro. Ejemplo: si le asignamos color negro a la barra de navegación, pero lo combinamos con la transparencia clara, obtendremos un color gris oscuro, pero con la transparencia oscura sí obtendremos el negro. Escogemos una transparencia porque nos dejará ver el color que le daremos a la barra de navegación. Si seleccionamos un color (azul, canela, negro o plateado) "tapará" el color que queremos ponerle a la barra y, obviamente, éste no se verá. Además se trata es de poner cualquier color, sin las restricciones que impone Blogger. 3.- Seleccionada la transparencia que vamos a utilizar guardamos la configuración de la barra de       navegación. 4.- Vamos a Editar HTML: Diseño ► Editar HTML ► Click dentro del editor ► Ctrl+f ► 5.- Localizamos la siguiente etiqueta poniéndola dentro del rectángulo de búsqueda (search): ]]></b:skin> 6.- Antes de la anterior etiqueta pegamos el siguiente código: #Navbar1 {   border-top: 1px solid #fe4a4a;   border-bottom: 1px solid #fe4a4a;   border-left:1px solid #fe4a4a;   border-right: 1px solid #fe4a4a;   width: 960px;   margin-left: 312px;   background: #ffff00; } Resaltado en rojo: Con estas líneas le asignamos a cada borde un grosor (1px), la propiedad solid (línea continua) y un color (#fe4a4a), que cambiamos por el nuestro. Cada línea corresponde a un borde (top: superior, bottom: inferior, left: izquierdo y right: derecho), para el caso que queramos poner bordes con colores o propiedades diferentes. Si no queremos poner todos los bordes eliminamos las líneas correspondientees a los que no vayamos a colocar. Para poner todos los cuatro bordes uniformes, con la misma propiedad y el mismo color, eliminamos esas cuatro líneas del código, y en su lugar ponemos ésta:   border: 1px solid #fe4a4a; ...Reemplazando el código hexadecimal del color (#fe4a4a), por el nuestro. (Aquí encontramos Clases de bordes y propiedades, y aquí encontramos los Códigos hexadecimales de los colores) Resaltado en verde: Con esta línea le asignamos un ancho (width), en pixeles, a la barra de navegación, para hacerlo igual al ancho del blog. Al efectuar esta modificación, la barra se desplazará a la izquierda. Resaltado en azul: Como consecuencia de ponerle un ancho definido a la barra, ésta se desplazará a la izquierda. Con esta línea le ponemos un margen izquierdo (margin-left) en pixeles que permita dejarla congruente con el blog. Resaltado en amarillo: Con esta línea le ponemos el color de fondo a la barra. Como se indicó en el punto dos, este color es el que se mezcla con la transparencia que hayamos seleccionado en la Configuración de la barra de navegación. Utilizando la Vista previa observamos la barra de navegación para: Aumentar o disminuír el número de pixeles del ancho hasta conseguir que quede igual al ancho del cuerpo del blog. Aumentar o disminuír el número de pixeles del margen izquierdo hasta conseguir que quede congruente con el cuerpo del blog. Modificar el código hexadecimal del color del fondo hasta conseguir el color que queremos. 7.- Pegado el código y hechos los ajustes necesarios en el mismo guardamos plantilla. Nota Con algunas plantillas antiguas puede ocurrir que, por modificaciones que hayamos hecho en las mismas y al personalizar la barra de navegación, el gadget correspondiente a la misma quede irreversiblemente inhabilitado, lo cual no sería problema ya que no lo necesitamos porque, para los cambios que posteriormente queramos hacerle a la barra, podemos utilizar el código indicado en el punto seis, siempre y cuando, para el caso del color del fondo, hayamos seleccionado una transparencia en la configuración de la barra de navegación, como se indicó en el punto dos. En otros casos, también con algunas plantillas antiguas podría ocurrir que, por haber hecho muchas modificaciones, no funcionara la personalización de la barra de navegación. Nos daríamos cuenta si, después de pegar el código y observar la vista previa, no vemos ningún cambio en la barra; en este caso renunciamos a la personalización de la barra borrando los cambios y guardando plantilla. No se recomienda esta personalización para blogs con un ancho inferior a 720 pixeles ya que, al darle a la barra de navegación un ancho igual al del blog, quedarían por fuera las últimas pestañas de la derecha y, para evitar esto, habría que dejar la barra más ancha que el blog. Twittear