25 de noviembre de 2013

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!!!

30 comentarios :

  1. Ole pedado de post bien explicado, muchísimas gracias por tu dedicación para hacer estas cosas.
    Yo ya he hecho los deberes y la he centrado, me ha quedado monísima.

    Gracias bombón.

    ResponderEliminar
    Respuestas
    1. Muchas gracias guapa!!! Me alegra mucho que te sirviera.
      Un beso.

      Eliminar
  2. qué útiles son estas entradas! Una duda que tengo yo a ver si tu me la sabes resolver: tengo vinculado mi Instagram del blog a mi Twitter del blog y quería hacer lo mismo con la página de Facebook del blog, pero sólamente me deja vincularlo a mi perfil personal. Hay alguna manera para poder hacerlo a la página? Es que me gustaría compartirlo todo a la vez en los 3 sitios. besos!

    ResponderEliminar
    Respuestas
    1. Hola, siento meterme donde no me llaman, pero te he leído y quería decirte algo que igual te resulta útil.

      A mí me pasaba lo mismo, no me dejaba vincular Instagram a Facebook y di con el porqué. Si tienes vinculado twitter y facebook, y a su vez tienes vinculados twitter e instagram, no te deja vincular instagram con twitter directamente, ya que el contenido que compartes en instagram se publica también en twitter, que a su vez al estar vinculado con facebook, "republica" en facebook el contenido de instagram. Joder, qué lío me he hecho, no se si lo habrás entendido, jajaja. Publicas en instagram (vinculado con twitter)-->se publica en twitter (vinculado con facebook)-->publica en facebook. Si vinculases instagram con facebook, se publicaría doblemente.

      Espero haberte ayudado en lugar de haberte liado más, jaja.

      Un besote.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. "no te deja vincular instagram con twitter directamente"= no te deja vincular facebook con instagram directamente. ¿Ves cómo me había liado? jajaja

      Eliminar
    4. jaja, normal que te líes, si es que esto es más complicado!!! pero el caso es que sí me deja publicar todo en las tres redes sociales siempre y cuando lo quiera hacer en mi Facebook personal, no una página que gestiono dentro de mi perfil personal. No sé si yo me explico :S

      Eliminar
    5. Pues yo no tengo ni idea, perooooo, voy a ver si te encuentro algo relacionado, jajaja. Porque sabe más del tema Ne Black Velvet.
      Si veo algo, te cuento.
      Un beso para las dos.

      Eliminar
  3. Esta super bien! yo también voy modificando0 poco a poco!

    hotlittlewhitedress.blogspot.com

    ResponderEliminar
    Respuestas
    1. Si, lo mejor es hacerlo poco a poco, porque sino parece que estás ahí cambiando todo y perdiendo un montón de tiempo, y la verdad es que parece que no cunde.
      Un beso y me iré fijando en tus cambios.

      Eliminar
  4. ¡Pero cómo te curras siempre estas entradas! Me ha encantado, siempre tan bien explicado, con el paso a paso y las imágenes para que lo veamos... ¡¡Que viva Patri!! :D

    A mí esta entrada me viene muy bien, porque lleva tiempo rondándome la cabeza poner el menú bajo la cabecera con pestañas, pero cuando tengo tiempo me pongo a escribir las entradas y al final termino no tocando nada del diseño, pero viendo tu entrada igual me animo a ponerlo.

    Y sí, tienes razón, te ha quedado la mar de mona tu barra de pestañas :D.

    Un besote, guapa.

    ResponderEliminar
    Respuestas
    1. Jajaja, sino quien me va a decir que está mona!!!! jajaja, pues me lo digo yo. Ponla, ponla y cuando la tengas, me avisas y voy corriendo a verla.
      Y si tienes algún problema, me dices, vale?
      Un besote gordo!!!!!

      Eliminar
  5. Súper interesante guapa, y encima todo muy bien explicado, mira que yo soy torpe pero me he enterado de todo!! :)

    De momento sólo tengo dos pestañas en el blog, pero cuando crezca un poquito quiero ampliar contenidos así que tomo nota de todo porque seguro que me hará falta.

    Besitos guapísima!!

    ResponderEliminar
    Respuestas
    1. Pues cuando quieras poner más, es súper útil centrarlas, así que ya sabes. Si lo haces, me cuentas. Estaré atenta, jeje.
      Un beso guapa.

      Eliminar
  6. No sabía lo de los colores! lo probaré! lo de centrarlas no pq no me importa que estén a la izquierda y contra menos lo toque mejor, que soy un pato para estas cosas.
    Gracias, me encantan estas entradas, ojalá que hagas más! por casualidad sabes como puedo centrar la cabecera del blog y/o ajustarla a la medida de la pantalla? busqué información por internet pero no entendí nada y no supe cambiarla.
    Gracias! besos!

    ResponderEliminar
    Respuestas
    1. Si todo los lunes, por ahora, os contaré cositas de modificaciones de Blogger. Te mandaré a tu correo lo que me pides, porque lo hice al principio y ya ni me acuerdo. Tienes que tener la cabecera igual que el tamaño que tienes asignado al blog. Pero ya te lo explicaré paso a paso.
      Un beso guapa.

      Eliminar
    2. Muchísimas gracias, espero no causarte demasiadas molestias. Cuando intenté arreglarlo vi que era por eso que tu dices de los tamaños pero aún así no fui capaz de ponerlos igual...
      Bsitos!

      Eliminar
    3. Te acabo de enviar un correo para que pueda indicarte cómo hacerlo.
      Un beso guapa!

      Eliminar
  7. Voy a necesitar clases particulares para poner mi blog monísimo jajajaja!!!
    Gracias por este post amor!!!

    ResponderEliminar
    Respuestas
    1. Ya sabes, si tienes alguna duda, donde estoy!
      Un beso guapa.

      Eliminar
  8. Como ya te comenté por facebook jeje vaya útil que me es esta entrada. Siempre me pregunté como podía poner la barra más bonita y ya no tengo disculpa con lo bien que lo has explicado. Ahora a sacar tiempo y ponerme con ella.

    Me voy a ver la otra entrada de hoy :-)

    Besossss

    ResponderEliminar
    Respuestas
    1. Hay tantas cosas por hacer y tan poco tiempo, jejeje.
      Cuando lo modifiques me dices, que voy a verla!!!!!
      Un beso muy gordo.

      Eliminar
  9. Me parece muy complicadoooo....besicos

    ResponderEliminar
    Respuestas
    1. Que va Guecica!!!! Todo es ponerse. Si haces cosas mucho más complicadas!!!!! Jejeje. Si te animas, me avisas, que voy corriendo a verla.
      Un beso guapa!

      Eliminar
  10. Hola,tengo un problema con la barra de menus, he hecho todo como dices y bien, peeeero..a la hora de cambiar el color de las pestañas quiero que estén como las tuyas todo de el mismo color, no hay manera, se me quedan oscuras....y no encuentro como cambiarlo..En toda la parte de avanzado que expliques lo he cambiado mil veces, mil colores para verificar y nada...consigo cambiar todo menos el color que se queda fijo,el que se ve al abrir el blog,..no tengo lo que tu llamas acentos.....sniff

    ResponderEliminar
  11. por fin tuve un ratito libre y lo hice jejeje gracias!

    ResponderEliminar

Entradas relacionadas

Related Posts Plugin for WordPress, Blogger...