martes, 4 de agosto de 2009

ALGO MÁS SOBRE LA BARRA DE MENU HORIZONTAL

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:

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

Pestaña para menú 1

No olvidar hacer este procedimiento con las dos direcciones http que aparecen en el menú, para que la barra aparezca completa al final. =)

Pestaña para menú 2

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 hay comentarios.:

Publicar un comentario

Perrito divertido