Como ya es sabido, en Internet existe una infinidad de páginas dedicadas a este tema, todas ellas en mayor o menor medida explican cómo instalar una barra de menú horizontal en nuestro blog.... la variedad de diseños es enorme y las hay para todos los gustos.
Pues bien, luego de un extenuante vitrineo ciber – espacial y después de probar unas cuantas, puedo decir con cierta soltura que de todas las que "coticé", lejos la barra de menú que más cumplió con mis expectativas por ser simple y sencilla de instalar, fue la que proponen los chicos de Trucos Blogger el único inconveniente que presenta es que los colores de los menús vienen predeterminados y ninguno me gustaba o combinaba con mi blog.
Por lo tanto, para los que no tenemos mucho conocimiento en códigos HTML la opción era conformarse o directamente buscar otra alternativa de menú.... PUFFF!!! Ahí me llego la inspiración... y como dice el refrán “toda problemática trae siempre consigo una solución inesperada”, mi espíritu curioso me llevo a encontrar una solución.
No pretendo dármelas de experta enseñando cómo hacer un blog, dando consejos y explicando cuáles son los mejores trucos para Blogger, lejos estoy de ello!! Tampoco pretendo hacer un "copy/paste" sobre este tema presentando códigos de otras páginas como si fueran propios, algo que he visto en muchos sitios de ayuda para blog y que por lo demás no tiene ningún sentido... Simplemente deseo compartir este detalle que me pareció interesante y que descubrí “intrusiando” en el código HTML de esta barra de menú.
Para empezar debemos seguir las instrucciones que dan los chicos de Trucos Blogger e instalar en nuestra plantilla HTML los 2 códigos donde corresponde, uno pertenece al CÓDIGO BASE y el otro indica los ENLACES DEL BLOG. Si te pasa como a mí que los colores propuestos por ellos no son de tu agrado o no concuerdan con tu blog... Ahí viene mi aporte, buceas en el CÓDIGO BASE del menú y buscas las dos direcciones http que se ven a continuación:
Pues bien, luego de un extenuante vitrineo ciber – espacial y después de probar unas cuantas, puedo decir con cierta soltura que de todas las que "coticé", lejos la barra de menú que más cumplió con mis expectativas por ser simple y sencilla de instalar, fue la que proponen los chicos de Trucos Blogger el único inconveniente que presenta es que los colores de los menús vienen predeterminados y ninguno me gustaba o combinaba con mi blog.
Por lo tanto, para los que no tenemos mucho conocimiento en códigos HTML la opción era conformarse o directamente buscar otra alternativa de menú.... PUFFF!!! Ahí me llego la inspiración... y como dice el refrán “toda problemática trae siempre consigo una solución inesperada”, mi espíritu curioso me llevo a encontrar una solución.
No pretendo dármelas de experta enseñando cómo hacer un blog, dando consejos y explicando cuáles son los mejores trucos para Blogger, lejos estoy de ello!! Tampoco pretendo hacer un "copy/paste" sobre este tema presentando códigos de otras páginas como si fueran propios, algo que he visto en muchos sitios de ayuda para blog y que por lo demás no tiene ningún sentido... Simplemente deseo compartir este detalle que me pareció interesante y que descubrí “intrusiando” en el código HTML de esta barra de menú.
Para empezar debemos seguir las instrucciones que dan los chicos de Trucos Blogger e instalar en nuestra plantilla HTML los 2 códigos donde corresponde, uno pertenece al CÓDIGO BASE y el otro indica los ENLACES DEL BLOG. Si te pasa como a mí que los colores propuestos por ellos no son de tu agrado o no concuerdan con tu blog... Ahí viene mi aporte, buceas en el CÓDIGO BASE del menú y buscas las dos direcciones http que se ven a continuación:
/* COLOR X ////////////////////*/
#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:#EFEBFA; 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 */
Si pinchas sobre las direcciones http, verás que aparece a continuación una imagen en formato GIF con forma de pestaña como esta, debes guardarla en tu computador con el nombre que quieras:
No olvidar hacer este procedimiento con las dos direcciones http que aparecen en el menú, para que la barra aparezca completa al final. =)
Luego con Office Picture Manager o con cualquier otro editor de imágenes, personalizamos el color y subimos la imagen a nuestro blog o a cualquier sitio de almacenamiento de imágenes como Picasa web, ImageShack, Photobucket, etc.
Finalmente, debemos buscar la URL que generan estos servidores y la cambiamos por la que teníamos antes... y listo color nuevo para la barra de menú.
No olvidar hacer este procedimiento con las dos direcciones http que aparecen en el menú, para que la barra aparezca completa al final. =)
Luego con Office Picture Manager o con cualquier otro editor de imágenes, personalizamos el color y subimos la imagen a nuestro blog o a cualquier sitio de almacenamiento de imágenes como Picasa web, ImageShack, Photobucket, etc.
Finalmente, debemos buscar la URL que generan estos servidores y la cambiamos por la que teníamos antes... y listo color nuevo para la barra de menú.
