Tutorial: cómo poner el menú fijo arriba de la página

Pues me dio la gana hacer otro tutorial. Uno que, por si fuera poco, estoy segura que ya existe allí afuera, pero yo lo traigo hecho por dummies, con las explicaciones más tontas posibles para que nadie se pierda y todos lo puedan hacer en su blog. Ya saben que, una vez terminado el tutorial, las dudas van aquí abajo (y las sugerencias y los tomatazos, también...).

Este tutorial es para que su menú quede en esa posición

Primero, tienen que abrir el código HTML de su blog o la sección para agregar CSS. Yo, personalmente, prefiero que todo se haga en el código, porque ayuda a que quede todo más ordenado. Blogger les va advertir que no lo modifiquen mucho si no saben, pero ustedes hagan caso omiso, aquí aprenden. Y si de plano no confían, vayan a la parte en el editor de plantillas que dice "Agregar CSS" y san se acabó.

Algunas cosas previas:

• Este tutorial es sólo para blogger. Lo siento a los que tengan otro tipo de blog.
• Deben tener la sección de páginas en su blog. Nada un widget de links, tienen que ser las páginas. Pueden adaptarlo a un widget de links, pero deben conocer el id (identificador) del widget.

Por si no saben qué hacer, aquí van las instrucciones en imagen (si no se ve bien, click en la imagen): 

Ahora, el CSS que van a agregar:

#PageList1{
  position:fixed;
  z-index:+3!important;
  top:0px;
  left:0px;
  right:0px;
}

La explicación rápida: #PageList1 es el id del elemento, así que por eso lo hacemos el identificador. No se cambia nunca, a menos de que pretendan adaptar este código a otro tipo de widget. 

El position:fixed; es también necesario para que el menú se quede fijo y cuando scrolleemos hacia arriba o hacia abajo no se mueva. Existe una variante position:absolute; que pondrá también a menú arriba, pero no lo dejará fijo. Sin embargo, por los márgenes de blogger, no siempre funciona. Siempre que ponemos un position fixed o absolute, siempre, tenemos que poner la posición del elemento con los parámetros top, left y right, en este caso, también se puede agregar bottom, por ejemplo, cuando quieren poner algo abajo o en una esquina inferior, pero en este caso, si no saben de CSS, no lo recomiendo. En teoría, las tres se ponen en 0px, porque las queremos pegadas a los bordes de la página; sin embargo, a veces no quedan del todo centradas y tendremos que mover el right o el left (por ejemplo, mi CSS tiene left:20px;). Si ese es su caso, vallan probando distintas cantidades.

El z-index se pone para que el menú siempre esté por encima de los demás elementos. Si al scrollear notan que, por ejemplo, se va abajo de las imágenes, sólo aumenten el número en uno o dos. Siempre tiene que ser un número positivo, en este caso. 

¡Pero el texto no salió centrado! No. Salió pegado a la derecha. Para que quede centrado y queden en una sola línea, agregan lo que sigue:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Los !important son... importantes y no los deben quitar porque el CSS de blogger predeterminado lo maneja de otra forma y nosotros lo estamos sobreescribiendo. Los estándares de HTML y CSS están llorando justo ahora, pero podemos echarle la culpa a google, totalmente. Ahí no hay necesidad de cambiar nada, pero si tienen curiosidad pueden preguntarme en los comentarios aquí debajo. 

Ahora, ¡los colores! ¡Todavía no le hemos puesto colores! Yo personalmente los pongo en la definición de variables, pero si les digo se me van a perder. Si ya los pusieron antes, en el diseñador de plantilla, y quedan bien con estos arreglos, no le hagan nada más. Si no, sólo agregen esto: 

.tabs-inner .widget ul{
   background-color:#000000;
}

Y cambian #0000 por el color que quieran. De preferencia en hexadecimal, pero si no saben buscar el código hexadecimal del color que quieren, les dejo un link para hacerlo. Si quieren cambiar el color de cómo se ve seleccionado, agregan lo siguiente y repiten las instrucciones que acabo de dar: 

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color:#000000;
}

Ahora, como bonus, les voy a decir como hacer que parezca un efecto cuando pasan el mouse y se cambia de color. ¿Han visto como, en vez de cambiar de color de repente, en mi blog, lo hace de una manera gradual? Bueno, sólo tienen que agregar los códigos de transition, que son los siguientes. 

.tabs-inner .widget li a {
  transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}

Sí, se repite lo mismo cuatro veces para que sea compatible en navegadores viejos y navegadores no compatibles. El all se refiere a los atributos que vamos a animar. En este caso en especial, se puede cambiar por background, pero yo siempre pongo all para no fallar. Después, va la cantidad en segundos que va a durar la transición, en mi caso, 0.6s, pero siempre pueden cambiarlo. No recomiendo que sea más de un segundo.

Y al final, el tipo de transición. Yo uso el ease-in-out, pero hay varios por los que pueden cambiar: 

• linear: la transición será lineal en el tiempo. Siempre a la misma velocidad. 
• ease-in: irá un poco más lenta al principio.
• ease-out: irá un poco más lenta el final. 
• ease-in-out: irá un poco más lenta al principio y luego otra vez al final. 

Y bueno, ¡eso fue todo! Si lo hacen, compartan sus resultados y si les gustó el tutorial, por favor, por favor, compártanlo. Si no les gustó, siempre pueden compartírselo a sus enemigos, por cierto. Las dudas y las sugerencias van aquí debajo, y si quieren otro tutorial, también digánme en los comentarios. Estoy planeando hacer uno para personalizar los tipos de encabezado y subencabezado en las entradas, pero me quedará más largo, así que me llevará tiempo.