Personalizar el Menú de Paginas Blogger

Saludos, veremos como personalizar nuestro menú de blogger, es algo simple decorar  nuestras paginas para que sean un poco mas atractivas, estas son algunas de las cosas que haremos para personalizar el menú, vamos a cambiarlo de color, cambiarlo de lugar e incluso te mostrare como dejarlo "quieto" y que baje con la pagina, Lo que mostrare es como estilizarlo, no mostrare como hacer uno, eso puedes consultarlo en esta pagina para crear un menú en blogger, ademas esto aplica para los menús que trae por defecto el blog, es decir, del gadget de blogger, si estabas esperando que te mostrara un menú con subpestañas como por ejemplo el mio o esperabas poder agregarselas, no lo encontraras aquí. bien comencemos, vamos a personalizar el menú dependiendo de la plantilla que tengas y luego veremos mas avanzado.

Bien lo primero es básico, tienes que saber que el diseño principal de tu menú depende de la plantilla que elegiste, las plantillas por defecto de blogger, si vas mirando plantillas veras que cambia la forma de las paginas del menú, si te gusta el menú de una plantilla pero quieres cambiarle los colores y de mas:

1. Ve a plantilla.
2. Luego en personalizar.
3. Nos dirigirá al diseñador de plantillas, dirígete a la sección Opciones avanzadas. 
4. Bien en esta sección veras muchas configuraciones, para configurar las del menú busca las opciones "texto de la pestañas" y "fondo de las pestañas".
5. Con la opción "texto de las pestañas" eliges la fuente del texto del menú y el color del texto cuando se selecciona una pestaña o cuando no esta seleccionada (una pestaña seleccionada es cuando colocas el ratón en ella y cambia de color)
6. En "fondo de las pestañas" podemos cambiar el color de una pestaña cuando esta seleccionada o el fondo normal del menú.
7. Dependiendo de la plantilla que hayas elegido tal ves te den mas opciones.

Personalizar el menú de Blogger (Avanzado)

Usar un menu de otra plantilla

Bueno, es un poco exagerado el avanzado pero da igual, ya te mostré como personalizar tu menú de la forma mas básica, ahora es cunado se pone bueno, si es el caso de que por ejemplo dices: yo uso la primera plantilla de "Picture Window (ventana de imágenes)" pero quiero el menú de la ultima plantilla de "Sencillo", bien eso se puede hacer, entre otras palabras podemos cortar un menú de una plantilla y colocárselo a otra plantilla diferente, pero lo malo para este truco es que al final ya no podrás editar el menú desde el diseñador de plantillas.
Si quieres el menú de otra plantilla:

1. Necesitamos un blog de pruebas o que hagas una copia de seguridad, Si ya tienes muchos cambios en tu blog haz la copia de seguridad para luego restablecerla.
2. Elige la plantilla de la cual quieres tomar su menú y en el diseñador de plantillas dales los estilos que esta tendrá de ahora en adelante, porque ya no se podrán cambiar.
3. Una vez hecho esto, aplica esa plantilla o da en el boton Aplicar al blog
4. Sal del diseñador de platillas o clickea en Volver a blogger y luego ve a editar HTML
5. Oprime las teclas CTRL   F  (Mac ⌘F)  para activar el buscador y busca esta linea: /* Tabs
6. Copia todo el código hasta que llegues a otro similar que tiene unas lineas debajo: ejemplo puede ser alguno de estos 2 u otro:
   
   

   /* Columns
   ----------------------------------------------- */
   
   /* Headings
   ----------------------------------------------- */

   
   
   Ejemplo:
   
   

   /* Tabs
   ----------------------------------------------- */
   
   Copia todo lo que esta aqui
   
   
   /* Headings
   ----------------------------------------------- */

   
   
7. Guarda ese código en un documento de texto.
8. Vuelve a la plantilla que tenias.
9. Ve a editar HTML y busca la misma linea /* Tabs y debajo de esa linea borra lo que esta hasta llegar a algunas de las 2 lineas anteriores y en ese espacio mismo pega el código que habíamos guardado en el documento de texto.
10. Da en guardar plantilla y listo disfruta tu menú. 

---

Poner el Menú arriba de la cabecera

No se tu, pero yo he visto algunos blogs que tiene su menú en la parte de arriba de la cabecera y la verdad se ve muy bien, es mas durante mucho tiempo yo tenia el mio así, si quieres podemos hacer lo mismo con el tuyo, si usas plantilla Awesome Inc, copia el segundo código que doy y para los que usan las demás copiemos el primero, listo vamos:

1. Fíjate de que el gadget de paginas este dejado del de la cabecera
2. Luego ve a plantilla.
3. Personalizar.
4. Opciones avanzadas.
5. Añadir css.
6. Pega este cogido:

#PageList1{
position:relative;
top:-140px; /* distancia de la parte de arriba */
}

y para los que tienen plantilla Awesome Inc copien este

.tabs-outer {top:-110px;/* distancia de la parte de arriba */}

Y solo cambia el valor de top: para subir o bajar mas el menú, luego presiona el botón aplicar al blog y listo disfruta tu menú.

---

Poner el Menú quieto en la pantalla (al bajar la pagina, el menú baja con ella)

Literalmente es lo que dice, para que las paginas estáticas bajen con la pantalla, cuando estas leyendo el blog y corres la pantalla para seguir leyendo, el menú continua en la misma posición de la pantalla, es decir, se quedara quieto en la parte de arriba de la pantalla del computador:

Para aplicar este truco:

1. Ve a plantilla.
2. Personalizar.
3. Opciones avanzadas.
4. Añadir CSS.
5. Pega este cogido:

Para las plantillas Awesome Inc, Filigrana y Etérea

.tabs-outer {
top:-0px;position: fixed;margin-left:0px;width:100%;z-index:1000
}

Ahora, para los demás estilos de plantilla usamos el mismo código anterior, la diferencia es que al hacer esto el menú nos quedara "corto", es decir el ancho del menú se reduce dependiendo del numero de paginas que tengas, pero no te preocupes, igual tengo la solución, primero sigue los pasos anteriores, pega el código y fíjate en como queda tu menú, si te gusta así como esta pues no hay problema ya acabaste, pero si eres como yo que no te gusto como quedo pegamos este código debajo del anterior y Buala!

.tabs-inner .widget ul { margin-left: -1000px; padding-left: 1000px; }

Se ve mucho mejor, solo guarda los cambios y listo disfruta de tu menú.

---

Cambiar ancho y alto de las pestañas del menú

Como pudieron notar en la imagen, es un truco para cambiar las dimensiones de los botones o pestañas del menú es real mente simple hacer esto ,para realizarlo:

• Ve a plantilla.
• Personalizar.
• Opciones avanzadas.
• Añadir CSS.
• Pega este cogido:

.tabs-inner .widget li a {padding: 40px 30px;}

Lo que esta en color rojo es para aumentar la altura de las pestañas
Lo que esta en color verde es para aumentar el ancho de la pestaña, no le coloques un valor muy alto porque los botones podrían salirse del menú.

• Para los que tienen una plantilla Filigrana, usen estos codigos:

.tabs-inner .widget ul {padding: 10px 2px;}
.tabs-inner .widget li a {padding: .25em 50px;}

Y configuran lo que tiene color verde y rojo como ya dice arriba.

---

Efecto hover al pasar el cursor en las pestañas del menú

Si has notado en mi menú cuando pasas el raton por una pestaña o sección del menú este cambia de color con un efecto suave de transformación (este efecto se llama HOVER), si quieres añadir este efecto para los botones o pestañas de tus paginas estos son los pasos a seguir:

1. Ve a plantilla.
2. Personalizar.
3. Opciones avanzadas.
4. Añadir CSS.
5. Pega este cogido:

#PageList1 a:link {
-webkit-transition:all 0.7s ease-out;  /* Chrome y Safari */
  -o-transition:all 0.7s ease-out;  /* Opera */
  -moz-transition:all 0.7s ease-out;  /* Mozilla Firefox */
  transition:all 0.7s ease-out;  /* W3C */
  -ms-transition:all 0.7s ease-out;   /* Internet Explorer */}

Lo que esta marcado en color verde es el tiempo en que tardara en cambiar de color, el tiempo de transición del hover en segundos, si quieres puedes cambiarlo para que se demore mas o menos.