Personalizar menú de paginas blogger

Bien en la anterior entrada vimos como crear un menú en blogger ahora veremos como personalizarlo, es realmente simple, decorar nuestro menú de paginas para que sea mas atractivo, entre los detalles para personalizar el menú de paginas estáticas, veremos como cambiarlo de color y cambiarlo de lugar e incluso te mostrare como dejar el menú "quieto" y que baje con la pagina, bien comencemos, vamos a personalizar el menú dependiendo de la plantilla que tengas y luego veremos mas avanzado.
Bien lo primero, es que tienes que saber que el diseño principal de tu menu 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 avanzado 
4. bien en esta sección veras muchas configuraciones, para configurar el 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 cunado 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.

Personalización del menú de paginas blogger (Avanzado)

bien ya te mostré como personalizar tu menú de la forma mas básica, ahora es cunado se pone bueno,
si es el caso que por ejemplo dices: yo uso la primera plantilla de "Picture Window" pero quiero el menú de la ultima plantilla de "sencillo", bien eso si es un poco mas complicado pero fácil a la ves.
Podemos cortar un menú de una plantilla y colocárselo a otra plantilla diferente pero eso es ya un poco mas difícil, ya tendríamos que entrar en la plantilla hacer unos cambios (muy confusos) y al final ya no podremos editar el menú desde el diseñador de plantillas, por lo pronto te mostrare como tener un menú como el mio,
mi menú es de la ultima plantilla de sencillo, si tu  usas esta plantilla has los cambios de color y texto en el diseñador de plantillas los otros efectos los mostrare mas abajo.
si usas otra plantilla por ejemplo la Picture Window o etéreo, y quiere que tenga el estilo de mi menú.

1. ve a plantilla
2. crear restablecer copia de seguridad (por si algo sale mal)
3. una ves descargada tu plantilla de respaldo ve asía editar de HTML
4. oprime las teclas CTRL   F  (Mac ⌘F)  para activar el buscador
5. busca esta linea:   "/* Tabs" y elimina todo lo que esta debajo hasta llegar a la otra linea

ejemplo:

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

ahora copia este código:

.tabs-inner .widget ul {
  background: #000 ;  /* color de fondo */
  margin-left: -600px;
padding-left: 600px;
}
.tabs-inner .widget li a {
  display: inline-block;
  padding: .9em 1em; /* Ancho de las pestañas */
  font: normal bold 13px Arial; /* fuente de texto */
  color: #fff; /* color del texto */
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #fff; /* color de texto seleccionado */
  background-color: #7cc400; /* color de la pestaña seleccionada */
  text-decoration: none;
}

ahora pega ese código justo de bajo de
/* Tabs
----------------------------------------------- */
y da en guardar plantilla
ahora para los últimos detalles

• ve a plantilla
• personalizar
• avanzado
• y pega este código

#PageList1 {
width:100%;
}

y listo ahora tu menú de paginas estáticas es igual al mio.

Otras configuraciones para el menú de blogger

Poner el menú de blogger arriba de la cabecera

Para colocar el menú de paginas arriba de la cabecera  es necesario que hagas esto:

1. fíjate de que el gadget de paginas este dejado del de la cabecera
2. luego ve a plantilla
3. personalizar
4. avanzado
5. añadir css
6. pega este cogido 

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

guarda los cambios
dependiendo del tamaño de cabecera o altura del blog deberás cambiar el valor de color verde, para que quede mas cerca de la parte de arriba o menos.

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

para dejar que el menú de paginas estáticas baje con la pantalla, si tienes ya el código anterior remplaza "relative" por "fixed" y listo y pega  "z-index:1500;" debajo de  #PageList1{
si no tienes el código anterior

1. ve a plantilla
2. personalizar
3. avanzado
4. añadir css
5. pega este cogido 

#PageList1{
position:fixed;
z-index:1500;
top:-140px; /* distancia de la parte de arriba */
}

guarda los cambios
dependiendo del tamaño de cabecera o altura del blog deberás cambiar el valor de color verde, para que quede mas cerca de la parte de arriba o menos.

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

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

• vayan a plantilla
• editar HTML
• oprime las teclas CTRL   F  (Mac ⌘F)  para activar el buscador
• busca esta linea

.tabs-inner .widget li a {

• debajo de ella localiza un alinea como esta

padding: .6em 1.5em;

Lo que esta en color rojo es para aumentar la altura de las pestañas (este valor llega hasta 9)
Lo que esta en color verde es para aumentar el ancho de la pestaña

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

si has notado en mi menú cuando pasas el mouse 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 estáticas estos son los pasos a seguir:

1. ve a plantilla
2. personalizar
3. avanzado
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 mascado 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.