Aprende informática con... Cómo crear una barra de menús debajo de la cabecera y centrarla

Pues esta es la última modificación en el blog que he hecho, y la verdad es que ya me vale, porque voy a pedoburra. Todo esto es un quiero y no puedo, porque claro, os quiero contar tantas cosas que si me pongo a modificar el blog, nada de nada y así estoy, que aprovecho a hacer las entradas de los lunes para ir modificando. :-)

Y por fin tengo una barra de menús medio chula. Porque todo se puede mejorar, ¿verdad?

Vamos a aprender a hacer nuestra propia barra de menús, que yo situaré debajo de la cabecera de mi blog, y además os enseñaré cómo centrar todas nuestras pestañas, para que quede de lo más chula!!! Sencillo y bonito, ¿qué más se puede pedir?


Pues vamos a empezar.

Lo primero que tenemos que hacer es crear las páginas que van a formar cada uno de los apartados de nuestra barra.

Para ello tenemos que ir al menú Páginas de Blogger.

Tenemos que crear tantas páginas nuevas, como apartados queramos. Para crear una página, desplegamos la opción Página nueva y seleccionamos Página en blanco.

Si lo que queremos es que la barra de menús nos aparezca debajo de la cabecera, tenemos que tener seleccionada la opción Pestañas principales dentro de Mostrar páginas como.

En el título de la Página, ponemos el nombre que queremos mostrar en nuestro apartado, en mi caso OTROS SORTEOS EN BLOGS. Lo pongo en mayúsculas porque es como quiero que aparezca en la barra.

Pulsamos Publicar y por defecto, si no teníamos barra debajo de la cabecera, nos habrá aparecido una con la nueva página que acabamos de crear.

A mí me ha añadido la que he creado, a continuación de las que ya tenía. Si queremos colocarlas en otro orden, sólo tenemos que situar el cursor del ratón en la zona gris que está a la izquierda de cada pestaña, hasta que el cursor del ratón se convierta en una cruz y pinchando, podemos arrastrar la pestaña hacia arriba o hacia abajo, soltando donde nos interese situarla.

 Como sabéis, cuando creamos las páginas Blogger, en la barra de menús, nos las alinea a la izquierda. Pero, ¿qué tenemos que hacer si nosotros queremos tenerlas centradas?

¡¡¡Pues es muy sencillo!!!

Sólo tenemos que añadir dos únicas líneas. ¿Y dónde? Tenemos que ir al menú Plantilla, a la opción Personalizar. Seleccionamos la opción Avanzado, y vamos a la última opción, Añadir CSS.

En el recuadro que nos aparece, añadiremos las dos líneas siguientes:

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

Si en este recuadro tenemos incluido algún otro código, de alguna modificación que hayamos hecho anteriormente, sólo tenemos que pulsar dos Intros seguidos de la última línea de código previa que tengamos. A continuación pegamos el código que os he puesto, que sirve para centrar las pestañas de la barra de menús.
Por último, pulsamos el botón Aplicar al blog, para que se queden registrados nuestros cambios.

¡¡¡¡Y voilá!!!!! Ya tenemos nuestra barrita lista. Me ha quedado la mar de mona, jejeje.

Para terminar os voy a explicar que opciones hay que tocar dentro del apartado Avanzado, para que la barra sea blanca como esta. Aunque ir probando y cuando algo os guste, lo aplicáis y listo.

Texto de la pestaña: podemos personalizar la fuente de las pestañas, el color cuando no está el cursor del ratón sobre el título de la pestaña (color del texto), y por último,el color cuando tenemos el ratón sobre el título de la pestaña (color seleccionado).

Fondo de las pestañas: desde aquí podemos añadir un color de fondo a toda nuestra barra (color de fondo) y podemos resaltarlo cuando pasamos el ratón por encima de cada uno de los menús (color seleccionado).

Acentos: en la opción Color del contorno de las etiquetas podemos seleccionar el color del borde que queremos que tengan nuestras pestañas. Dejadlo en blanco si no queremos nada y nuestro fondo es blanco.

Según vamos cambiando los colores, podemos ir viendo debajo cómo van quedando en nuestro blog. Es una Vista previa, es decir, que hasta que no pulsemos el botón Aplicar al blog, no se grabará.

Y esto ha sido todo. Espero que si os gusta, lo pongáis en vuestros blogs, porque ya veis que no es nada complicado. Avisadme para ir a verlos!!!

¿Qué modificaré el próximo lunes? Ummm, no lo sé...

¿Te gustan las barras de menús?
¡¡¡Estoy de sorteo, 5 productos de la marca La Chinata pueden ser vuestros!!!