Ir al contenido principal

Poner pestañas desplegables en el menú horizontal de Blogger


    Comenzamos un nuevo año lleno de buenos propósitos, uno de ellos podría ser organizar las entradas de nuestro blog de Blogger por temáticas poniendo pestañas desplegables en nuestro menú horizontal.

    Para ello introduciremos unas líneas de código en HTML en dos partes del blog.
    Antes de empezar, descarga una copia de seguridad de la plantilla.(Ve al menú de administración del blog y pincha en "plantilla" y después arriba a la derecha).
    En la red se exponen diferentes maneras de hacer este tipo de menú, así que el objetivo de este post es aclarar y resumir las tareas que hay que hacer ayudándome de tutoriales de otros autores.
   A continuación voy a explicar dos maneras de hacer el menú desplegable para que elijáis la que más os guste.

OPCIÓN 1: Recomendada para quien no esté familiarizado con HTML o quiera trabajar con un entorno visual (MenuMakers).

   Para lograr nuestro objetivo vamos a realizar dos tareas principales insertando unas líneas de código en HTML en diferentes pestañas del menú de Administración del Blog.(Ver tabla).

TAREAS
Pestaña
TAREA 1 :  Insertar el estilo y la estructura del menú
 ( pestañas, subpestañas y enlaces).

TAREA 2 : Modificar el código de la plantilla para que acepte cualquier formato de menú.

  • TAREA 1:
  • Ve a la pestaña de Diseño, pincha en "Añadir un gadget" que está justo debajo de la cabecera de tu blog y añade un gadget HTML.


  • Con ayuda de un generador de menús (MenuMakers) creamos y descargamos el código css del menú desplegable. Existen varios MenuMakers, purecssmenu es online y en este videotutorial , Miri Alvarez, explica muy bien cómo usarlo. Otro es apycom.
  • Abre el gadget de HTML pinchando en “editar”, copia las líneas del código css descargado anteriormente desde <!-- Start PureCSSMenu.com STYLE → hasta <!-- End PureCSSMenu.com MENU → , pégalo dentro de gadget de HTML y dale a “guardar”.
    Advertencia: Si ya tienes un gadget de página hecho, debes eliminarlo (no se borrarán las páginas).
    Enlaces: Si quieres enlazar internamente con entradas del blog, copia y pega la url que aparece en la barra de navegación cuando pinchas en una entrada o en una etiqueta de una entrada.
  • TAREA 2 :
  • Para modificar el código en la plantilla, pinchad en la pestaña de Plantilla y después en "Editar HTML", seguidamente pinchad dentro de la ventana y pulsar Ctrl+F para que aparezca la barra de buscador. 


  • Vamos a hacer dos búsquedas y dos modificaciones:
  • Primera búsqueda y modificación:
  •  Escribimos o pegamos el texto <b:section class='tabs en el buscador (Search) y pulsamos ENTER. Una vez localizado, como podéis ver en la imagen, borramos sólo el texto class='tabs en las dos líneas que aparecen destacadas en amarillo.
  • Segunda búsqueda y modificación:
  •  Buscamos /* Tabs y borramos todo el texto que aparece debajo de la línea discontinua hasta el siguiente apartado con línea discontinua. A continuación, sustituimos lo que hemos borrado por este código:
ul {z-index: 200; padding:0 !important;}
li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
  •     Al final debe quedar así:
  • Para finalizar pinchad en "guardar plantilla" y si hemos seguido bien los pasos ya hemos terminado.


OPCIÓN 2: Recomendada para quien esté familiarizado con HTML o desee trabajar con HTML.
  •    En este caso, también vamos a realizar dos tareas principales insertando unas líneas de código en HTML en diferentes pestañas del menú de Administración del Blog.(Ver tabla).
TAREAS
Pestaña
TAREA 1 : Insertar la estructura del menú ( pestañas, subpestañas y enlaces).

TAREA 2 : Modificar las líneas del código para insertar el estilo de las pestañas del menú.

  • TAREA 1 :
    Esta tarea es muy similar a la tarea 1 de la opción 1 explicada anteriormente, la única diferencia es que las líneas de código HTML que se pegarán en el gadget de “HTML”se elaboran en un procesador de textos y no incluyen la información sobre el estilo de las pestañas.
  •    Crea un gadget de “HTML” en la pestaña de Diseño (ver explicación en la tarea1 de la opción 1).
  •     Obtén o haz las líneas del código de la estructura del menú que pegarás en el gadget de HTML.
    Voy a explicar el significado de estas líneas:
    Para añadir una pestaña se escribe:
 <li> <a href='URL'>Nombre de pestaña</a> </li>
    Cada pestaña de nuestro menú está contenida entre las etiquetas <li> y </li>
    Nosotros debemos rellenar la URL de enlace y el nombre de la pestaña.
    Para añadir subpestañas, escribimos <ul> antes de </li> y hacer el listado de cada subpestaña de la misma forma que las pestañas. Una vez terminado cerramos poniendo </ul>, como podéis ver aquí.
<li> <a href='URL'>Nombre de pestaña</a>
<ul><li><a href='URL'>Nombre subpestaña1</a></li> 
</ul>
</li>

El código que podéis copiar para un menú de una pestaña con dos subpestañas es este:(el código con el color de fondo en verde, se refiere al nombre del identificador del elemento del menú y hay que ponerlo siempre al principio y al final de el conjunto de todos los códigos de pestañas y subpestañas que queramos poner).
<div id='mbwnavbar'>
<ul id='mbwnav'>
<li><a href='URL'>Nombre de pestaña</a>
<ul>
<li><a href='URL'>Nombre subpestaña1</a></li>
<li><a href='URL'>Nombre subpestaña2</a></li>
</ul>
</li>
</div>
  •    Para poner más pestañas o subpestañas copia y pega las veces que desees.
  •    Para finalizar este paso, pega el código HTML de la estructura del menú en el gadget de HTML que creaste anteriormente.
  • TAREA 2:
    Esta tarea es muy parecida a la tarea 2 de la opción 1 explicada anteriormente, la única diferencia es que vamos a hacer una sola búsqueda y modificación en la Plantilla.
  •    Vamos a hacer una búsqueda y una modificación:
   Buscamos ]]></b:skin>, dejamos espacio encima de ese texto y pegamos nuestro código de formato de las pestañas que podemos descargar, copiar y pegar de múltiples webs como estas:
   Advertencia:   Debéis fijaros en que los identificadores de elementos (id) del menú se llamen igual tanto en las líneas del gadget de HTML como en las de la plantilla. Por ejemplo, Isabel Leyva le llama mbwnavbar, mientras que Lireth y El Potro le llaman menuWrapper.
    Poner pestañas desplegables en Wordpress es mucho más sencillo porque no hay que trabajar con el código HTLM pero esta actividad puede ser una buena práctica para familiarizarnos con este lenguaje.

    Espero que os haya quedado claro todo y mucha suerte en el intento.

Comentarios

  1. Hola. es un tutorial muy completo y detallado para incluir las pestañas...

    ResponderEliminar
  2. Gracias Marta. Me llevó mucho tiempo buscar la información para hacer este tipo de menú y enterarme de lo que estaba haciendo por eso decidí hacer este post que espero sirva de ayuda. Un saludo.

    ResponderEliminar
  3. Hola, gracias por la entrada. Podrías hacer un tutorial para poner pestañas en un blog ( no sé si ya lo has hecho o no) . Me refiero para organizar las entradas en la parte de arriba. Gracias y saludos codiales.

    ResponderEliminar
  4. Hola Patricia. Imagino que te refieres a que cada pestaña del menú horizontal enlace con una entrada del blog. Si es así, si sigues los pasos que se indican en este post, lo lograrás. No he hecho ningún videotutorial porque hago referencia a los que ya están hechos por otros autores, por eso, si pinchas con el ratón en las palabras que aparecen en marrón en el post enlazarás con ellos.( Antes de responderte a este comentario no aparecían marcados en marrón y puede ser que por eso no se apreciaba que enlazara con una url.)
    Si no necesitas subpestañas en el menú horizontal puedes hacerlo creando páginas.Aquí tienes un videotutorial que lo explica:
    https://www.youtube.com/watch?v=oCBA30JxWzc
    Gracias por tu comentario y espero servirte de ayuda.

    ResponderEliminar
  5. ¡Hola!
    Sólo quería decirte que mil gracias por el post, soy una cabeza dura para el HTML y me aterraba borrar las líneas de la plantilla. El tutorial es muy claro y sencillo :D

    ResponderEliminar
  6. hola, como puedo crear otra pestaña dentro de una subpestaña?

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Fin del proyecto "En la nube TIC"

  Llegó el día del “hasta siempre”… Nunca pensé en este momento, en cómo despedir un proyecto que ha estado tan presente en la última década de nuestras vida. 10 años es mucho tiempo para cualquier proyecto educativo colaborativo, y llega un momento en el que distintas circunstancias nos hacen pensar que es el momento de cerrar una etapa, de decir adiós. Y este momento ya está aquí. “En la nube TIC” llega a su fin. Solo se me ocurre dar las gracias a todos aquellos que nos siguieron artículo a artículo, a los que nos animaron y a los que pusieron su cariño en celebrarlo una y otra vez. Pero sobre todo quiero dar las gracias a esos maravillosos docentes que, sin pedir nada a cambio, lo dieron todo para ayudar a muchos de sus compañeros, les conocieran o no. Han derrochado esa generosidad de la que se nutrió la web 2.0 y la revolución tecnológica en la educación en sus inicios, y que tanto echamos de menos últimamente. Quiero dar las gracias y mostrar mi admiración y respeto a todos los

WordWall: Crea juegos online en minutos.

  ¡Hooooola a todos! Qué penita me está dando publicar estas últimas entradas en el blog EnlanubeTIC. Ver cómo se va apagando un proyecto tan bonito está costando...  Pero vamos a intentar que las entradas que nos quedan sean lo más útiles posible para otros profes, que es lo que siempre hemos pretendido. Hoy vamos a hablar de Wordwall , una web    británica que nos ofrece la posibilidad de crear fantásticos juegos online a los que nuestros alumnos pueden jugar desde sus tabletas, móviles, portátiles...  Hay tres características que me encantan de Wordwall: Lo rápido y sencillo que es crear un juego (simplemente crear listas de conceptos y ya). El aspecto gráfico del juego que se genera (incluso puedes cambiar el tipo de juego con la misma lista). Las estadísticas que obtienes de las puntuaciones que alcanzan tus alumnos. Aquí tenéis un par de ejemplos de juegos que he creado para mis “minions”: Y en este tutorial se puede ver lo súper sencillo que es crear y compartir un j

Fluky.io: Tu "ruleta de la fortuna" personalizada

¡Hoooola a todos! Hacía mucho que no escribía una entrada en la nube TIC, y ya tenía ganas. Hemos hablado de tantas herramientas, que ya casi no quedan sin repetir… En esta ocasión voy a presentaros una web suuuuuúper sencilla y en mi opinión muy práctica: Fluky.io . Son muchas las ocasiones en las que queremos hacer una elección aleatoria en clase (otras muchas nos interesa que la elección parezca aleatoria, pero no lo sea, jeje). Varios de los programas o apps que utilizamos en el aula tienen alguna opción que nos permite hacerlo: el software de la pizarra digital (Notebook, Active Inspire…), webs como ClassDojo, o la app que utilizamos como "cuaderno del profesor” (Additio, iDoceo, CuadernoProfesor…) por ejemplo. Pero esta que os presento hoy hace sencilla, exclusiva y perfectamente eso: elecciones aleatorias. Sin registros ni cosas raras. Cuando entras en fluky.io , solo tienes que pulsar el botón “START” y aparecerá una barra a la izquierda en la que pu