21 sep. 2013

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.


Personalizar el Menú de Paginas Blogger


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ú

cambiar tamaña pestañas de blogger

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.

40 comentarios:

  1. Este blog ha sido eliminado por un administrador de blog.

    ResponderEliminar
    Respuestas
    1. jajajajaja nada es imposible (solo lamerse un codo o el ojo)
      para que quede con esa linea coloca de fondo el color blanco y en el diseñador de plantillas en avanzado coloca este código

      #PageList1 {
      border-top: 5px solid #000;
      border-bottom: 5px solid #000;
      }

      el numero cinco es la anchura de las lineas y los ceros son el color negro, espero te sirva saludos, :)

      Eliminar
  2. Lo que pasa es que me sigue saliendo por debajo los recuadros de cada una de las pestañas yo quería que eso fuese transparente, no se si es posible. Y despues para poner las pestañas centradas que no me queden alineadas a la izquierda como sería? Gracias y disculpa las molestias.

    ResponderEliminar
    Respuestas
    1. ?
      me podrias mandar una foto de tu menu es que no entiendo un poco

      Eliminar
  3. Like a Boss!

    Muchas gracias quedo perfecto. gracias

    ResponderEliminar
  4. hola, me gustaria tener submenus desplegables dentro del menu de blogger pero las plantillas por defecto no me dejan. como puedo hacer.

    ResponderEliminar
    Respuestas
    1. Hola francisco, es verdad las paginas de blogger no se puede lograr este efecto, si quieres tener un menú desplegable te toca colocar menús echos por terceros, te enviare algunos.

      Eliminar
    2. Podrias porfavor enviarmelos a mi tambien, es posible que lo necesite en el futuro, muchas gracias.

      Eliminar
  5. Hola, buenas, me está siendo bastante útil esta entrada pero tengo un problema. Me queda con una raya del color del fondo de las pestañas que se extiende hasta el lado izquierdo de la pantalla y no sé cómo eliminarla, porque se ve mucho en contraste sobre el fondo del blog.

    ResponderEliminar
    Respuestas
    1. Que tal Lane,

      para quitar eso ve a tu código y busca esta linea

      .tabs-inner .widget ul {
      background: #fafff8 ; /* color de fondo */
      margin-left: -600px;
      padding-left: 600px;
      }

      y quita

      margin-left: -600px;
      padding-left: 600px;

      Eliminar
  6. Hola, muchas gracias por tus consejos, me han ayudado bastante. Estoy aplicando lo que le indicabas al compañero de las líneas horizontales encima y debajo del menú. Me va perfecto, pero ¿habría alguna forma de hacer que esas líneas fueran más cortas, es decir, que sólo llegasen hasta el final de las pestañas de los extremos, en vez de cruzar toda la pantalla? Gracias.

    ResponderEliminar
    Respuestas
    1. hola pedro
      para quitar eso ve a tu código y busca esta linea

      .tabs-inner .widget ul {
      background: #fafff8 ; /* color de fondo */
      margin-left: -600px;
      padding-left: 600px;
      }

      y quita

      margin-left: -600px;
      padding-left: 600px;

      Eliminar
  7. Este blog ha sido eliminado por un administrador de blog.

    ResponderEliminar
  8. Hola! desde ya muchas gracias. Me ocurre que el texto de las pestañas cuando es más largo, sobresale de las mismas. no sé cómo solucionarlo. Intenté alargandolas como vos explicás pero en mi código no aparecen los números. ¿Cómo ppodré hacer?
    Gracias de3 nuevo.

    ResponderEliminar
  9. Hola necesito tu ayuda, en el menu de mi blog no se ven todas las entradas que creo, en la lista desplegable se ven casi todas las entradas, pero la ultima no se vè y si sigo agregando entradas no se ven mas, queria que empiecen a aparecer al lado de las primeras, puedes ayudarme por fa gracias!!!

    ResponderEliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. no te entiendo
      lo que quieres hacer es eliminar las lineas negras entre las paginas?

      Eliminar
  11. holaa, por que no me funciona en mi blog solo se cambian los colores pero no se puede mover a arriba de la cabecera

    ResponderEliminar
    Respuestas
    1. hola emanuel es simple tu problema
      tu menú esta con un ID diferente, ya lo vi
      usa este código para ello

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

      es el mismo solo que cambia de #PageList1 a #PageList2
      usa el cambio para los demas codigos de esta entrada

      Eliminar
    2. hola que bueno ya quedo bien gracias, ahora tengo este problema: que no puedo hacerlo que baje junto con la pagina, ya hice el paso donde explicas que aplique :fixed en vez de relative y z-index 1500 pero al poner eso se me desaparece el menu ya no se mira por ningun lado. y el otro es que me gustaria que asi como el menu abarca hasta el final del lado izquierdo del blog asi llegue igual al lado derecho, ya intente modificando lo que comentabas anteriormente de margin-left: -600px;
      padding-left: 600px;
      pero no me queda asi como el tuyo. gracias

      Eliminar
  12. hola emanuel pues si isiste el cambio para que quede quieto tienes que disminuir el zoom del navegador a ver si es que el menu quedo muy arriba o a la derecha.... intenta con eso

    y lo de los valores pare que tenga una linea que pase la pnatlla tendras que agregar valores mas altos en
    de margin-left: -600px;
    padding-left: 600px; e ir probando

    ResponderEliminar
    Respuestas
    1. hola ezneider ya lo hice y me quedo muy Guay" gracias solo puse el codigo directo en html ya que esa parte no la interprataba en el recuadro de css

      Eliminar
  13. Que tal Esneider ¿como te va? antes de otra cosa, saludos desde México.
    Permiteme felicitarte por tan buen trabajo. No tenía idea de como crear un Blog (de hecho todavía no la tengo) jajaja pero con tu orientación me atreví a iniciar y estoy esperando con ansias la séptima parte para poder iniciar con las entradas o publicaciones. Ojalá puedas mostrar como poner la barra de menú (inicio, sobre mí, buscar, etc) y como meter información a cada una de esas partes.
    Una vez más te agradezco tal vez a nombre de muchas personas que siguen tus consejos y mas que eso seguimos tu conocimiento.
    Hacen falta más personas con ese entusiasmo por enseñar lo que saben.
    Lo que das te lo das; lo que te guardas, te lo quitas.
    Un fuerte abrazo y saludos!

    ResponderEliminar
    Respuestas
    1. ivan, guau que comentario mas inspirador saludos desde colombia!
      gracias por tu comentario y si ya casi hago la parte 7, ya compre un nuevo microfono :)

      Eliminar
  14. Hola saludos, como hago para crear un menú deslizante así como el tuyo

    ResponderEliminar
  15. Hola. Gracias por el tutorial.
    Yo he intentando cambiar el fondo de una sola pestaña específica a un color diferente del resto (como mi enlace a Twitter, que su fondo fuera azul cyan). Pero cuando al hacerlo, cambian todas las demás. ¿Tienes alguna sugerencia?
    Gracias.

    ResponderEliminar
    Respuestas
    1. si entiendo como quieres el boton, pero lamentablemente el menu de blogger no nos dejara hacer ese cambio, debes colocar un menu por aparte

      Eliminar
  16. Hola. Primero que nada mil gracias por tan valiosa información ¡Tanta cosa que uno quiere hacer y no se sabe como! Quiero ver si me puedes ayudar con algo: Tengo mi blog y ya tengo mi menú con sus respectivas páginas (como enlace a mis etiquetas) ...Me gustaría saber si hay forma de colocar una cabecera, o algo en cada una de esas páginas. Darle un cierto estilo diferente a cada página de mi blog.

    Saludos

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
  17. Hola Esneider !
    A ver si tu me puedes ayudar.
    Tengo mi menu desplegable perfecto,solo me falta saber como puedo cambiar el color de las letras del "submenu".
    No doy con el sitio y me estoy volviendo loca .jajajaja
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. que mas Elyzabeth, después de analizar tu plantilla te digo que tienes el código del menú repetido, no es necesario que lo tengas dos veces, puedes eliminar uno y para cambiar ese color como verde pálido del texto del submenu busca este código
      .menu li:hover li a {
      y debajo de el pega esto
      color:#000000
      los ceros son el color negro tu veras que color le colocas, pero es importante que primero quites uno de los códigos repetidos, si no quieres pues aplica el cambio en ambos partes, saludos y nos vemos!

      Eliminar
    2. Maravilla amigo ! Me volvi loca con esto,se que es una tonteria pero bueh.. jajaja Mil gracias!!

      Lo de el menú repetido es aposta amigo,estoy haciendo cambios en el menu personalizado y para no liarla mucho me gusta ver el otro tambien jajaja, nada mas termine lo elimino ;)
      Mil graciiias!

      Eliminar
  18. amigo el menu tiene dos lineas pero el color del fondo del menu solo agarra la primera linea como haria para que tome los dos campos

    ResponderEliminar
    Respuestas
    1. Yo tambien quiero saber eso,mi menu ya es de dos lineas y solo tengo color en la primera.

      Eliminar
    2. No les entiendo, envíenme el blog y una mejor descripción por favor.

      Eliminar

2016 © Inovablog