24 nov. 2013

Crea una barra de menús que quede siempre fija en la parte superior de tu Blog.

La creación de un menú fijo para la parte superior del Blog es una popción a tener en cuenta dependiendo del tipo de presentación y la plantilla que se está utilizando.

Cuando tratamos Blogs que enumeran gran cantidad de entradas y estas hacen qe haya que desplazarse verticalmente por los contenidos, el usuario puede quedar desprovisto de elementos de navegación hasta que llega a la parte inferior donde le aparece la opción "Página siguiente" o "Página anterior". En esto casos, la utilización de un menú fijo en la parte superior de la pantalla, permite al usuario no tener la sensación de "estar perdido" y disponer de opciones de menú que le permitan navegar donde desea dentro del Blog sin necesidad de llegar al final de la página.



Así mismo, esta "Barra fija" de opciones de menú podemos aprovecharla para añadirle el buscador o cualquier otro Gadget que deseemos que el usuario tenga presente en todo momento para mantener la navegación por el Blog antes sus ojos constantemente.

Vamos a crear un menú con capacidad de adaptarse a cualquier resolución de pantalla y al que podemos añadir cualquier otro gadget que deseemos que constantemente tengan presente en su navegación nuestros usuarios.


CONCEPTOS PREVIOS, CÓMO SE COMPONEN LOS MENÚS EN BLOGGER:

Repasemos los conceptos previos que nos permiten configurar a nuestro gusto un menú en Blogger para luego aprovecharlo para fijar en la parte superior de nuestro Blog. Al igual que podemos fijarlo en la parte superior, podrás indicar cualquier otra zona del Blog para que se dibujen (a la derecha, izquierda o la parte inferior).
El menú en Blogger: El menú en Blogger, al igual que en otras publicaciones web se forma en la plantilla Blogger, basándose en unas hojas de estilo (.css), en el cuerpo de la plantilla que se está utilizando para la presentación del Blog. Expliquemos paso a paso cada concepto, conviene tenerlos muy claros para entenderlo mejor.
La plantilla Blogger: En el lenguaje más abstracto y menos técnico, la plantilla es el modelo de presentación sobre el que vas a trabajar para mostrar los contenidos de tu Blog. Se le denomina plantilla porque va a definir dónde y cómo se van a mostrar tus contenidos en el Blog. Por ejemplo, define dónde va a ir colocada la cabecera con el título del blog, qué tipos de letra se van a mostrar, con qué colores, qué componentes van a "dibujarse" y cómo van a hacerlo... es la base de la presentación que verán tus usuarios cuando accedan a tu Blog.
En un plano técnico, la plantilla es una representación esquemática realizada en XML que sintetiza código HTML en etiquetas "propias" de Blogger que al ser interpretadas conforman la presentación del blog.
El menú vamos a crearlo dentro de la plantilla Blogger. 
Las hojas de estilo (.css): las páginas web basan su presentación fundamentalmente en hojas de estilo. Esta clase de archivos tienen la extensión .css: Hojas_de_estilo_en_cascada. Contienen la información semánticamente construida de los elementos que en la página HTML constituirán el aspecto y el formato de los componentes que integran dicha página.  
Simplificando técnicamente, son archivos externos que le dicen a cada componente que utilizamos en nuestra página web (cajas de texto, títulos, comentarios, etc...) qué formato deben tener para darle un "estilo", una presentación.  
Como a cualquier otro elemento de una página web, el menú mostrará su presentación gracias a la hoja de estilo con la que trabaje nuestra plantilla. 
Establecen, por citar ejemplos simples que puedan comprenderse al instante, el espaciado entre caracteres, el margen entre un marco y el texto, el color que se va a utilizar en las letras...
En cualquier publicación web se incluyen primero, antes del cierre de la etiqueta </head> para que luego el resto del código pueda referenciarlas. 
Se pueden ver en el HTML de cualquier sitio web porque quedan declaradas de la siguiente forma: <link href='URL_A_LA_CSS' rel='stylesheet' type='text/css'/>.Donde URL_A_LA_CSS es la dirección donde se encuentra almacenada la hoja de estilos que estamos utilizando.
Etiqueta <b:skin><![CDATA[TUS_ESTILOS]]></b:skin>:
En Blogger el contenido de las hojas de estilo en la plantilla se suelen indicar antes de que cierre la etiqueta "</head>".  Entre medias de la etiqueta <b:skin> y </b:skin>, escribirás dentro de <![CDATA[ ]]> los estilos con los que trabaja la plantilla.
El menú en Blogger:
El menú en Blogger, al igual que en cualquier publicación web, se construirá a partir de:
  • Unas clases de la hoja de estilos de la plantilla que definen la presentación que tendrá el menú (aspecto, colocación, forma, color, etc...). 
  • Un código en el cuerpo de la plantilla que definirá su estructura (las categorías y opciones que lo componen.
Es decir, las clases de la hoja de estilo (el código que explicábamos se encontraba dentro del texto CDATA) dicen qué aspecto, qué presentación tendrán los componentes que conforman el menú con sus categorías y opciones que luego dibujaremos en el cuerpo del menú.
Simplificando con un ejemplo que mezcla el código con los conceptos aprendidos podríamos visualizarlo así:
<b:skin><![CDATA[ 
#clase menu{ 
el menú debe tener "tal tamño"
el menú debe ser "de este color"
debe tener este "tipo de letra"
etc...]]>
<body> (cuerpo de la plantilla)
<menu> aplicando la presentación de la #clase menu, debe componerse de:
  • Categorías
  • Opciones dentro de cada categoría
 Así pues, como podemos ver en el ejemplo, en la plantilla dentro de la hoja de estilos <b:skin><![CDATA[ se define cómo va a ser la presentación del menú que luego en el <body> o cuerpo de la plantilla se llama para que forme las categorías y opciones del menú según deseamos.
Veamos cada punto a continuación.

Dentro de la hoja de estilos, qué clases suelen conformar en Blogger la presentación de mi menú:
  • Normalmente en Blogger encontrarás las clases del menú en tu plantilla, dentro del código <b:skin><![CDATA[ podrás buscar la clase #menu (esto es un ejemplo de una plantilla, si bien las clases casi todas existirán, los parámetros que contienen son meros ejemplos y no tienen que coincidir con los que utiliza tu plantilla):

#menu {
width: 1000px;
height: 40px;
position: left;
left: 500px;
top: 41px;
overflow: hidden;
Cada plantilla tiene sus propios estilos para el menú y puede utilizar más o menos clases, pero todas suelen tener compuestos los menús por la clase #menu. En ella podemos ver cómo está definiendo por ejemplo el ancho: width: 1000px; y el alto height: 40px; que el menú va a tener.
 #menu ul li {
padding: 0 22px;
font-size: 2em; /* Menu Font Size */
font-weight: bold;
text-align: center;
float: left;
background: url(la que sea) left 9px no-repeat;
Esta clase ul li especifica por ejemplo el aspecto que tendrá cada opción dentro del menú. El font-size: 2em; está especificando el tipo de letra en tamaño proporcional a la resolución de la pantalla donde se dibuja, etc...
 Así encontraremos varias clases de #menú que configurarán el aspecto que éste tendrá en la plantilla por medio de la hoja de estilos (el código que tenemos en CDATA).

Cómo suele dibujarse un menú en Blogger en el cuerpo de la plantilla:

  • Luego, en la plantilla, en la zona donde deseemos poner el menú (siempre irá dentro del <body> de la plantilla, el cuerpo que normalmente suele ser en Blogger: <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>) irá la definición del menú:

<div id='menu'><ul><li><a href='Llamada_que_realiza_la_opción_cuando_el usuario_pulse'>Literal_del_menu</a></li></ul></div>
  • Aquí podemos ver donde con <div id='menu'> estamos indicando que se utilice la clase #menu que definimos en la hoja de estilo con los parámetros para la presentación del menú (el color, el tamaño, el tipo de letra, etc...) con la estructura:
    • <a href='Llamada_que_realiza_la_opción_cuando_el usuario_pulse'>Literal_del_menu</a><ul>
  • Donde en <a href='Llamada_que_realiza_la_opción_cuando_el usuario_pulse'> estamos indicando la orden o la llamada que queremos que se ejecute cuando el usuario haga "clic" en la opción del menú y en Literal_del_menu ponemos el literal que queremos que salga en la opción del menú al usuario en pantalla. 


Paso a Paso, configurando nuestro propio menú fijo para la navegación del Blog:

1) En primer lugar crea el menú para tu Blog normalmente, escoge el tipo de menú que desees crear (de un sólo nivel o de múltiples niveles):

PASO A PASO HAZTE UN MENÚ SIMPLE EN BLOGGER, MENÚ DE UN SÓLO NIVEL:
Este tutorial  lo tienes disponible haciendo "clic" aquí en una página a parte para mayor facilidad.
PASO A PASO HAZTE UN MENÚ DE MÁS DE UN NIVEL EN BLOGGER, MENÚ MULTI-NIVEL, CON SUBOPCIONES:
Este tutorial  lo tienes disponible haciendo "clic" aquí en una página a parte para mayor facilidad.

2) Ahora ya puedes hacer fijo el menú para que quede localizado en la parte superior de tu Blog:

Simplemente añade a la clase del <b:skin><![CDATA[ de tu menú, los siguientes atributos que a continuación te explico:
#cssmenu{height:70px;background-color:#232323;box-shadow:0 2px 3px rgba(0,0,0,0.4);width:100%;
position:fixed;
z-index:101}
  • Donde width:100%; expresa que el ancho del menú debe ser el proporcional a todo el ancho que haya disponible en pantalla (según la resolución del usuario). Es decir, se adapta al ancho con el que el usuario cuenta para dibujar la barra del menú.
  • position:fixed; Indica que la posición del menú es fija y estática, no debe cambiar.
  • z-index:101 Expresa que el menú debe quedar por delante de cualquier objeto sobre el que se superponga. Ideal cuando las subopciones de un menú fijo no se ven porque las tapa otro gadget.
  • Si no deseas que se vea un mensaje cuando se extraen opciones del menú en función de una etiqueta ("Mostrando entradas con la etiqueta ..."), añade esta línea antes de que se cierre el CDATA de tu plantilla: .status-msg-wrap {visibility:hidden;display:none;}

¡Eso es todo!, disfruta realizando tu menú fijo y equípalo con lo que desees para que tus usuarios puedan navegar sin perderse.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

65comentarios:

  1. La verdad, me da flojera leer todo esto pero me salte al tutorial y me funciona de maravilla GRACIAS ;)

    ResponderEliminar
    Respuestas
    1. jajajaja, muchas gracias Jonathan!!!, en Diarios de la nube intento que funcionen las explicaciones para gente con experiencia como tú (que pueden ir directos a la solución) y gente sin ninguna experiencia informática o en programación, que necesitan muchos más datos para poder hacer el cambio.

      Me algero que te haya servido, nos vemos en la comunidad Todo Blogger. Por cierto, tienes muy buen Blog.

      Un saludo y cuídate.

      Eliminar
  2. Respuestas
    1. Hola Sheila, si ya tienes un menú y lo que quieres es hacerlo fijo solo agrega el siguiente estilo css:
      #id-de-tu-menu {
      position:fixed;
      }

      Eliminar
    2. ja,ja,ja, gracias Jonathan.

      El tutorial se divide en dos partes: un paso a paso donde se explica position:fixed y la segunda parte donde se da un ejemplo con el antiguo menú de diarios de la nube.

      NO OLVIDAR utilizar z-index:101 para que la capa del menú quede siempre superpuesta sobre cualquier otra.

      ¡Un saludo! y gracias por tu contribución.

      Eliminar
    3. ¡Qué diablos!, voy a quitar la parte en la que explico el menú de Diarios de la nube para dejar sólo el tutorial y que quede más reducida la explicación... gracias jonathan.

      Eliminar
    4. Hey! no sabía del "z-index:101" jeje con razón mis menús se ponían detrás de otros elementos ...

      Eliminar
    5. Si, soluciona ese problema... oye, gracias por la ayuda, al final reduje el tamaño de la entrada. Un saludo muy grande.

      Eliminar
  3. Hola, hace un tiempo que no pasaba por acá y veo que hiciste algunos cambios en tu blog. Te hago una pregunta: Estoy armando un blog para una radio online y quiero saber si se puede poner el reproductor de la radio dentro de ese menú (en reemplazo de el buscador) y que cuando la gente navegue por las páginas la música no se corte. Este menú fijo, sirve para eso?

    ResponderEliminar
    Respuestas
    1. Claro Pal,
      tan sencillo como meter el código del widget de la radio dentro del menú. Haz pruebas y si no te sale me avisas. ¡Ánimo que te puede quedar muy bien!

      Eliminar
  4. Gracias Miguel, lo voy a intentar y te aviso. De paso te comento que hace un par de semanas estoy teniendo problemas con tildes y acentos en el blog, las corrigo y como por arte de magia desaparecen. Sabes que puede ser?

    Mi nombre es Christian y este es el blog para que veas el problema, fijate en la sidebar. Gracias.

    www.palmun.com.ar

    ResponderEliminar
    Respuestas
    1. Ok, me vas contando. Para lis acentos debes utilizar caracteres de escape, busca con eso en Google, aún no he hecho un tutorial al respecto pero me lo apunto. Un saludo!

      Eliminar
  5. Muchas gracias me ha servido de muchísima utilidad!!! :) aunqe tengo un problemilla que es que se queda fijo donde se establece y me gustaría que cuando se fuera bajando con el scrool el menu se quede en la posición de arriba...seguiré indagando!
    Muchas GRACIAS!

    ResponderEliminar
    Respuestas
    1. Hola!,
      si quieres dame la URL a tu página y veo qué puedes poner para que se quede donde quieres.

      Un saludo,

      Eliminar
  6. Hola Miguel tus tutoriales son excelentes y te felicito pero haces demasiado largos los post y te terminan confudiento y hasta molestando, aun así te tengo quedar credito y agradecer los tuto.

    ResponderEliminar
    Respuestas
    1. Gracias por expresarlo con cariño y delicadeza. Intento hacerlos para personas que no tengan nada de experiencia en informática y menos aún en programación. De tal manera intento dar todas las explicaciones posibles y quizás se me va de las manos... Ni obstante tengo algunos más técnicos dedicados a expertos que van directamente al grano.

      Tomo nota y aprendo para los próximos. Depuraré un poco por si en alguno meto más explicación de la debida.

      Lo dicho, gracias por participar y tomo buena nota.

      Eliminar
  7. Hola, muy buenas... llevo un buen rato intentando poner enn práctica este post, pero no lo consigo!! A ver si me puedes echar una mano... ya tengo la barra simple terminada, ahora lo que quiero es dejarla fija, pero no hay manera... ese código que nos das hay que me escribirlo en el código html?? yo no encuentro por ningún lado el b:skin><![CDATA[
    Desde dónde puedo acceder? Mil millones de gracias por adelantado!!!!!!

    ResponderEliminar
    Respuestas
    1. Hola, puedes añadirlo metiendolo en el CDATA como has comentado o en la opción de menú "plantilla" te metes bajo el cuadradito donde se ve tu Blog en pequeño, luego le das a personalizar y en avanzadas añades tu código.

      Cualquier duda me dices si no te quedó claro.

      Disculpa que tardara en contestar pero he andado muy ocupado.

      Cualquier cosa me dices.

      Un saludo y gracias por participar.

      Eliminar
  8. Hola,

    He creado el menú tal y como indicas en el paso 1, copio el código que indicas lo añado en avanzadas CSS y no me hace nada, según desplazo la hoja hacia abajo desaparece el menu. Te paso la dirección para que le heches un vistazo. http://gureirterak.blogspot.com.es/

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Pablo,
      he entrado al Blog pero no hay posibilidad de ver si se queda fijo porque no hay entradas, No obstante, para que quede fijo, una vez has creado el menú, debes luego hacer el paso 2.

      Un saludo y cualquier duda que tengas pregunta sin problema.

      Eliminar
  9. Hola tengro un problema mi barra quedo un pocoseparada de hasta arriba me podrias decir como la ajusto para que pegue al tope

    ResponderEliminar
    Respuestas
    1. Hola Jesús,
      pásame la URL de tu web y lo miro a ver qué se puede hacer. Es posible que con el padding en tu hoja de estilos se arregle.

      Un saludo!!!

      Eliminar
  10. Hola, he intentado poner mi menú fijo en mi blog, pero siempre que modifico la position a fixed, toda la barra de menú queda hacia la derecha. Probé lo de z-index (de lo cual no había leído antes, así que gracias por esa info), pero pasa lo mismo. Pienso que tal vez esté colocando el código en el lugar equivocado , pero no encuentro realmente qué pueda ser.

    ResponderEliminar
    Respuestas
    1. Hola, pásame la dirección de tu Blog en este mismo comentario y te lo miro, no te preocupes que al final sale ;)

      Un saludo!.

      Eliminar
  11. jo ami no me sale, hago el menú con un gadget html y pongo el codigo justo despues de <![CDATA[ en editar html pero se me queda igual :S por favor podrías especificar mejor donde se coloca el código?? Gracias :):):)

    ResponderEliminar
    Respuestas
    1. Hola Patricia, dime la dirección de tu Blog y te digo dónde se puede poner.

      un saludo!

      Eliminar
  12. Hola Miguel, en primer lugar muchas gracias por los tutoriales (yo soy de las que agradece tanta explicación, así uno va aprendiendo).

    He conseguido poner el menú fijo y adaptarlo a mi gusto, lo único que me falta es saber como puedo centrar las páginas en el menú sin que formen una lista, quiero decir, centradas respecto al tema pero una página al lado de otra en lugar de una debajo de otra.

    Gracias :)

    ResponderEliminar
    Respuestas
    1. He conseguido solucionarlo, he añadido"display:inline;" y "float: none;" y me ha funcionado.
      Gracias de todas formas :)

      Eliminar
    2. Me alegro mucho!, disculpa que no haya podido responderte antes porque estoy ahora con una carga de trabajo importante... Otra cosa, esta guía te ayudará mucho con esa clase de cambios que has realizado: http://www.diariosdelanube.com/2013/07/guia-para-trabajar-con-hojas-de-estilo.html

      Un saludo!

      Eliminar
  13. Hola, Felicitaciones por la página, es Excelente!!! Me he guiado para fijar la cabera en mi página, pero tengo un inconveniente en mi página con el z-index en Internet Explorer y los videos de youtube . Solo estos últimos se superponen a la cabecera, el resto funciona normal.
    En Chrome no tengo ese problema. Gracias por la ayuda. Mi págna: http://www.thebeatles909.com

    ResponderEliminar
    Respuestas
    1. Hola Carlos,
      a mí me sucede igual, es en Explorer, esto dice la página de Microsoft: "As of Microsoft Internet Explorer 5.5, the iframe object is windowless and supports the z-index property. In earlier versions of Windows Internet Explorer, the iframe object is windowed and, like all windowed controls, ignores the z-index property. If you maintain Web pages that were designed for earlier versions of Internet Explorer that do not support the z-index property, you might want to redesign the pages, especially if the pages contain iframe objects that are stacked on top of windowed controls, such as select objects. You can use the visibility attribute to hide windowed controls that you want an iframe object to overlap. You can also position windowed controls so that iframe objects do not overlap them."

      A mí me pasa con Explorer 8... afortunadamente la mayor parte de usuarios utilizan Explorer más avanzados y sobre todo Chrome o Firefox donde no van a tener ese problema.

      Un saludo!

      Eliminar
  14. amigo pongo el codigo que haz dado en ccs y en la edicion de html donde me dices pero no funciona :(...
    Me podrias ayudar porfavor.

    Gracias y exelente el blog.
    http://abiaunavezcorporacion.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola,
      parece que la clase que se encarga de tu menú es ".tabs-inner .widget ul". Ahí es donde debes añadir el z-index y position:fixed... pero es un tipo de menú que en mi opinión, al encontrarse a modo de "pestañas" no compensahacer fijo.

      Un saludo!

      Eliminar
  15. se va escuchar medio bachatero pero me podrías decir como hiciste tu menú de paginas, es que quiero saber como se hace para que el logo quede dentro del mismo menú y las paginas ponerlas a la derecha exactamente como vos las tiene. por favor, creo llevo un mes buscando esto.

    ResponderEliminar
    Respuestas
    1. Hola Emanuel,
      la descripción paso a paso de la guía es tal cual lo he creado. Luego, para el logo, lo mejor es que le des a F12 y hagas clic sobre la zona del menú para que veas el código exacto que he utilizado (es que en comentarios no puedo escribir código). Es copiártelo con los estilos que explico e ir haciendo pruebas con tu propia imagen y opciones de menú hasta que te salga.

      Lo del F12 en Chrome es para ver el "código fuente" que compone alguna parte de una página web, es como darle a "ver código fuente" pero sobre la parte concreta que te interesa.

      Si te salen dudas me vas preguntando.

      Eliminar
  16. Hola. A ver si pueden ayudarme... He creado un menú desplegable en blogger. Lo ubico en la parte superior del blog, sobre las entradas y el menú no se despliega. He probado con el valor de index pero nada. No sé si lo tengo que colocar en otro sitio.
    Muchas gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola,
      déjame la dirección y miro a ver qué puede ser. Es posible que haya algún error javascript o similar que haga que no funcione correctamente.

      Un saludo!

      Eliminar
    2. Buenas!!! La dirección del blog es http://parajesxvisitar.blogspot.com.es/
      Ahora el menú lo tengo ubicado abajo del todo para que no me haga "feo" el blog. Aquí abajo pasa algo distinto que si coloco arriba. Aquí no se abre sobre el wadget de abajo, si no que ese wadget se mueve hacia abajo...
      Gracias!!!

      Eliminar
    3. Hola!,
      es que ya tienes un menú creado en la parte superior y tiene sus estilos y demás preparados para "salir donde sale". La opción sería eliminarlo y poner este en su lugar (justo encima de las entradas) pero es algo que no te recomiendo. Yo veo bien el menú como lo tienes, no me complicaría en este caso.

      Un saludo!,

      Eliminar
    4. Pues no nos complicaremos entonces jeje cualquier duda te consultaremos. Muchas gracias!!!

      Eliminar
  17. Hola, genial tu blog y muy instructivo hasta el punto que me llamó la atención uno de tus gadgets, en especial el primero de la barra lateral derecha que tiene las siguientes pestañas: Sígueme - Temas - Popular, estaría muy agradecido si me obsequiaras el código de ese gadget. Me gustó porque ahorra espacio ya que con solo darle click, allí mismo muestra el contenido sin llevarme a otra ventana o entrada. Mucho sabré apreciar tu obsequio. sublimpresosreyes@gmail.com - Saludos desde Venezuela.

    ResponderEliminar
    Respuestas
    1. Hola Juan,
      es que en las cajas de comentarios no puedo meter código porque Blogger no lo permite. Pero es muy sencillo:

      1) Abre Diarios de la nube con Google Chrome
      2) Pulsa F12 y se te abrirá el "modo desarrollador" del navegador.
      3) Busca una "lupa" pequeña (suele estar arriba a la izquierda del todo) y una vez la hayas hecho "clic" ponla sobre el sidebar que te gusta, verás que pone el nombre en el código fuente "rsidebar-wrapper".
      4) Pillas todo ese código y los "Styles" de la pestaña de estilos.
      5) Con todo eso haces pruebas en tu web y tienes montada tu sidebar.

      Si saco tiempo algún día, dejo montada una guía para el sidebar. Es que ahora estoy a tope de trabajo.

      Un saludo y muchas gracias

      Eliminar
  18. gracias probare a ver ke tal saludos :)

    ResponderEliminar
  19. Buenas ya hice la pestaña menú básica como dices pero no se donde poner el codigo para que baje intente ponerlo en la caja de ccs que sale en el menú de plantilla y no funciona y antes busque esto de <![CDATA[ y no lo vi por ningún lado
    Gracias anticipadas por la ayuda tienes muy buenos tutoriales
    otra pregunta esta ya es secundaria me gustaría saber como poner el menu sobre la cabecera

    ResponderEliminar
    Respuestas
    1. Hola Freddy,
      para buscar, ponte dentro del editor HTML de Blogger y dentro de él pulsa CONTROL+F y escribe lo del CDATA. Todos los Blogs (salvo que hayan sido optimizados para algunos temas de rendimiento), tienen CDATA porque es donde se ponen los estilos. Si no, otra opción es retocar el estilo en personalización avanzada de plantilla.

      Para poner el menú en la cabecera, desde la vista de diseño ponlo lo "más arriba" que te sea posible. Si no se "queda arriba" en la perspectiva de diseño es que hay algún componente que puede estar impidiendo su colocación. Esto es paciencia e ir probando poco a poco.

      Un saludo y muchas gracias!.

      Eliminar
  20. Hola, escribo el codigo inmediatamente despues de <![CDATA[ y no pasa nada, mi menu sigue abajo, lo quiero arriba y bonito cmo el tuyo! help!!! este es mi blog, que no tiene casi nada porque lo estoy armando primero
    http://caminandoenlaweb.blogspot.com/

    ResponderEliminar
  21. Hola Miguel! ya pude colocar la barra fija de menu y ahora tengo otra duda (ignora mi duda anterior XD) como hago para alinear las categorías del menu a la derecha y agregarle un logotipo a mi pagina a la izquierda, es decir igual que tu hermosa barra!! help please!

    ResponderEliminar
    Respuestas
    1. Hola!,
      veo que la clase que maneja la presentación de tu menú es top-inner y widget PageList. Busca top-inner en tu código y es ahí donde puedes poner la parte de código que explico o incluso el código que yo pongo en los estilos de mi menú.

      Yo he hecho pruebas y a mí me quedaba más o menos bien poniendo dentro de la clase top-inner mis datos de la clase de la presentación de menú:

      z-index: 843;
      width: 100%;
      height: 63px;
      border-style: none;
      border-color: transparent;
      background-color: rgba(0, 0, 0, 0.6);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
      position: fixed;
      top: -1px;
      left: 50%;
      margin-left: -50%;

      Puedes utilizar esos valores de base e ir poniendo tú tus propios colores y presentación.

      Un saludo!

      Eliminar
  22. Hola. Yo quisiera saber cómo poner una sombra inferior a la barra. Algo así como en esta web:
    http://cajondelosgirasoles.blogspot.com/

    Para mi blog (http://filologabibliofila.blogspot.com), seguí este otro tutorial que encontré:
    http://lachicadelportatil.blogspot.com/2015/01/barra-secciones-navbar.html

    ¿Sabes qué hay que añadirle y dónde para ponerle ese borde inferior?

    Gracias //

    ResponderEliminar
    Respuestas
    1. Hola!,
      el problema con la sombra es que hay muchos navegadores que no tienen el efecto "shadow". Al final hay que llamar a una imagen que haga de efecto sombra y propagarla por toda la barra:

      #sombra {
      background: url("direccion/imagen_desombra.png") no-repeat 100% 100%;
      padding-right: 20px;
      padding-bottom: 20px;
      width: 200px;
      }

      También tienes sitios como este donde te ayudan a crear efectos sombra con el efecto shadow:

      http://www.cssmatic.com/es/box-shadow


      En tu Blog en concreto puedes retocar la clase #menu poniendo esta:

      #menu {
      margin: 0 auto;
      width: 920px;
      height: 30px;
      http: //www.cssmatic.com/es/box-shadow;
      -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
      box-shadow: 50px 10px 50px 0px rgba(0,0,0,0.75);
      }

      De esta manera añadirás la sombra que quieres.

      Un saludo

      Eliminar
    2. Gracias Miguel. Tomaré nota de todo.
      Un saludo //

      Eliminar
  23. Hola Miguel tengo un problema con mi blog, y es que cuando cambio de pagina mi menú desaparece, la plantilla la descargue de Internet, lo mismo pasa con el slide show, tanto como la barra de menu y el slide show se desaparece cuando cambio de pagina.
    miguel_clarimusic@hotmail.com
    Necesito ayuda por favor

    ResponderEliminar
    Respuestas
    1. Hola,
      fíjate que en tu plantilla habrá un "if cond", un condicional, que hace que desaparezca el menú y el slide cuando no estés en la página principal.

      Para encontrarlo, primero debes entender qué es, sigue este tutorial que te explica cómo funcionan los if condicionales: http://www.diariosdelanube.com/2014/09/como-utilizar-condiciones-en-blogger.html

      Haz copias de seguridad y varias pruebas, cuando quites el "if cond..." tendrás que quitar también después su cierre /b:if, para que no te dé error la plantilla.

      Es probar y comprobar, asegúrate también que cuando quites el if condicional y la dejes como quieres, siga funcionando igual también en móviles y tabletas como esperas.

      Un saludo y muchas gracias por participar.

      Eliminar
  24. Hola Miguel,
    La barra derecha de mi blog se ha desplazado hacia abajo y no puedo lograr que vuelva a su sitio. Esto ocurre con cualquier navegador. Pero no sucede con Entradas antiguas o una entrada en particular donde se ve correcta.

    La url de mi blog es:

    www.jazzparadescargar.blogspot.com.ar

    Gracias.

    ResponderEliminar
    Respuestas
    1. Solucionado. El problema estaba en el código HTML de una entrada.
      Saludos.

      Eliminar
    2. Solucionado. El problema estaba en el código HTML de una entrada.
      Saludos.

      Eliminar
    3. Me alegro que te funcionara, cualquier cosa por aquí estoy. Un saludo!

      Eliminar
  25. como puedo hacer esto, puse una imagen hasta arriba y luego el menú ya lo programe todo en el,prefiero que se quede asi pero acompañando al bajar asi conforme baje en la pagina este se pegue en la parte superior de ella, pero eso me imagino que se hará con jquery?

    ResponderEliminar
    Respuestas
    1. No, no es necesario utilizar jQuery para eso. Sigue los pasos de esta guía en la que estás y verás que es tan sencillo como conseguirlo por medio de las hojas de estilo de tu web. Sigue los pasos y te saldrá.

      cualquier duda aquí estoy.

      Un saludo.

      Eliminar
  26. Gracias me ha ayudado mucho su trabajo.

    ResponderEliminar
    Respuestas
    1. Le agradezco yo su participación y su feedback. Diarios de la nube es para esto, para ayudar a los demás.

      Un saludo!

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.