Si quieres ser colaborador en este blog colectivo dedicado a pequeñas rutinas

que nos puedan facilitar las tareas con las aplicaciones en la nube (o en
tierra) envía un email con tu dirección de correo electrónico a

enlanubetic@gmail.com



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.

¡Compártelo!

5 comentarios:

Marta Máster

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

marisol

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.

C. Patricia Díaz

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.

marisol

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.

Angie TO

¡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

Publicar un comentario en la entrada

La nube

"Google Apps" #5añosenlanube #eltpics #guappis 123D catch 360º 3D 5añosenlanube ABL about.me accesibilidad acortador acortar direccion actitud ActiveTextBook actividades activismo social aditzak agrupar direcciones web AICLE aleatorio alertas almacenamiento alumnado analisis análisis anatomía Anatronica android angry birds animación animación a la lectura animoto APA aplicaciones App app colaborativo App musical appletv apps aprender archivos_pesados ARcrowd arduino arte astronomia atlas anatómico humano aTube Catcher Audacity audio audio audacity tutorial audiolibro audiovisuales augment aula aula de ciencias Aumentaty Aurasma Autodesk AVATAR ayudas azar bachillerato backchannel backup badges barcode scanner base de datos bases de datos bContext bibliografía bilingüismo Biodigital Biografía biología bitacoras bitly Blackberry blendspace Blog blogger blogvio Bloomfits bloxp Blubbr bluetooth brainstorming brillo Buscador búsqueda búsquedas avanzadas cacoo Calaméo calendario canva capturador Cardboard celtx chatbot Chatter Pix Chibimachine chrome chrome OS chromebook chromecast chromium OS citación clase al revés clasificar class dojo classroom cloud código códigos QR coggle colaborar colaborativo colecciones color comic cómics compartir compartir archivos competencias complementos comunidad comunidades de aprendizaje concentración concurso conducta connected classrooms construir contenidos Contenidos Digitales content curator contraseña contraste controlRemoto conversor audio convertidor de música Convertidor de videos convertir documentos Convertir formatos Cooliris Express copia de seguridad correo electrónico Cortafuegos corubrics corubrics CoRubrics creative commons creatividad CSS cuaderno de notas cuaderno profesor cuentos Cuerpo humano cuestionarios Cuña curación de contenidos datos delicious derechos de autor dermandar descargar descargas desktop deuteranope dia 0.97.2 diagramas diapositivas dibujo vectorial diccionarios dickens dictados didáctica difundir Diigo dipity diplomas diseño diseño gráfico diseños dispositivos móviles divertimento dnoise docente.me docentes doctopus documentos donostia qr dotdotdot dotepub dotsub drive drivers droid dropbox ebook ebook glue economía EdAS edcanvas edición edilim editor de imágenes edmodo Edpuzzle Educación educación especial Educación Primaria educaplay eduClipper efectos en imágenes eje temporal ejercicios ejes cronológicos El País electronica elementos ELT email embeber emuladores de discos encuestas Enigma Enigma virtualbox enlaces epsarea epub escenas escribir escritorio escritura escritura manual ESO ESO; ABP esquemas esquinas estadística estante Estoig Digital estrategias de enseñanza estudio etiqueta etiquetas eTwinning euskera evaluación eventos evernote examenes examtime excel exelearning Experiencias extensiones ezcast facebook favicon feed Firefox firewall firma firma digital física flash Flickr flipbook flipped flipped classroom flippity flubaroo fondo fondos ForgetBox Formación format factory formpublisher forms formulario fotografías fotor freeware ftp fuentes fumetti gadget GAFE galería de imágenes gamificacion gamificación garabatos geacron generadores Generadores de actividades Genially geogebra geolocalización gestion de aula gestión del tiempo gestión docente gifs animados GIMP Glogster gmail gmath goggles goodrae google google + google apps google apps script google art google classroom Google Cloud Connet google docs google drive google keep Google Maps Google Play Music google sites googlemaps goteo GPS gráficos gratis gratuito Gravit GROOVESHARK grouply Haiku Deck hang out hashtag hello sign hermanamientos europeos herramienta 2.0 herramienta20 herramientas herramientas automáticas herramientas para hacer presentaciones online historia historias Historypin hoja de cálculo HTML html5 iAnnotate iconos ideas idiomas iDoceo ikaskidetza Imagen imagen panorámica imágenes imagenes 360 imágenes vectoriales images Images Actives imaginación iMotion impresión Impresión en línea in3Dgallery inclusión infantil infografía Inforgr.am informacion inglés Inkscape insertación insignias Instagram instalación Insync INTEF interactivo intercambio educativo interfaces internet intranet investigación iOS Ipad iTunes iVoox jigsawplanet Jingle joomag JotForm juego juegos jugar jumpchat junaio kahoot karaoke musica kidblog kit universal labolsavirtual Layar lector lectura leer más tarde legibilidad lego Lego lengua lenguaje visual lenguas extranjeras letras léxico LibreOffice libro libro electrónico libros libros interactivos licencias likebox lineas de tiempo linkedin Linux lista listas de reproducción literatura LiveBinders lluvía de ideas logos Lucidpress magicscroll maker Makewaves Manual mapas mapas conceptuales mapas de flujo mapas de sitio mapas mentales mapear Maps Engine Lite maquetación marcador social Marcadores Sociales marketing matematicas matemáticas Matemáticas materiales menú metaio metta mezcla de audio microblogging mind42 mindflash Mindmeister Mindomo mirroring mlearning mobiletest MOOC Moodle Moovly movil móvil mozilla MP3 multimedia Multimedia: Vídeo multisistema mural murales muro colaborativo Music Timeline música MusicAll My Maps Naptha narración digital navegación anónima navegador navidad notas notebook Notegraphy Notes Plus novedades nube nubes de palabras OCR oddcast office online open badges Open Sankoré open source operaciones oralidad orden Organización de la Información padlet padres página palillos pantalla PDF PDI pensamiento computacional perfil periódico periodismo pestaña photopeach photopin photoshop photoshop express picasa Pinterest pixenate pixlr plagios planetario plantilla plantillas plataforma PLE Plickers Pocket podcast poesía popplet popularidad portable Portables portafolios portal post-its post.as posts powerpoint PPT preguntas premios prensa present.me presentaciones prezi primaria Prisma Privacidad procesador de texto profesorado Programa programación pronunciación proprofs protanope protección prototipos proxy proyecto colaborativo proyectos proyectos europeos publicación publicaciones publicar contenido puzzles qr qrhacker questionform Quickscreenshare quimica química quizbox quizz RA radio ranking Readability reader readium Realidad Aumentada Realidad Virtual reconocimiento facial recurso colaborativo recurso didáctico recursos recursos digitales recursos online recuva Redes Educativas Redes Sociales redimensionar redondear Reeder regalos relajación repositorio respuestas retoque digital revistas digitales rifas robotica Robótica róbotica rotar roundpic rowcall RSS rúbricas scanner scratch screen screencastify screencastomatic secuencia de comandos google secundaria seguridad seo servidor sexting símbolos simo simulación simulador sincronización sistema de información científica sistema de respuesta Sketchfab Sketchup SKYPE slide slide.ly Slidemypics SlideTalk smart smartphone software Software Libre Sonic Notify sonido sorteos SoundCloud spreaker STEM stepmap stop motion Storify subtítulos SVG SWF sync tabla tablet tackk talk it talleres Talleres tamaño tamborrada teachem Teamviewer tecnología TED templates test testeando text to speech texto thatquiz the noun project TIC tickets tightvnc time lapse timeline timerime Timetable Web tipografía tipografias tiro parabólico Tolosa toondoo trabajos colaborativos traductor transferencia tritanope trivial trivial educativo trivial online truco TTS tutorial TV Twitter twitterfeed typeform umapper unfollowersme unidades Unitag URL USB usuarios vacaciones valores vcard verbos video vídeo videoconferencias videojuegos Videotutorial vimeo viper Virtualbox Virtualización visibilidad Visible Tweets visualizar visualthinking vlc VOKI voz wallwisher wav web web 2.0 webcam Weebly wetranfer widget wire frames word wordle wordlens wordpress WorldTV Youtube
 
En la nube TIC Copyright © 2011 | Tema diseñado por: compartidisimo | Con la tecnología de: Blogger