Agregar una lista de menú a Blogger

menú en Blogger

 

Este código es un fragmento de un menú personalizado para un blog de Blogger, que utiliza un widget de tipo "LinkList" para crear un menú de navegación principal con enlaces a diferentes secciones o páginas, representados por textos e iconos.

Menú persoalizado

<div class='header-menu'>
        <b:section class='main-menu' id='main-menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>
          <b:widget id='LinkList74' locked='true' title='menú principal' type='LinkList' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='text-9'>__📙Cx Gastrointest-2</b:widget-setting>
              <b:widget-setting name='text-8'>__📙Cx Gastrointest-1</b:widget-setting>
              <b:widget-setting name='text-1'>📚 Medicina</b:widget-setting>
              <b:widget-setting name='text-0'>🏡Home</b:widget-setting>
              <b:widget-setting name='text-3'>_📚Cirugia General</b:widget-setting>
              <b:widget-setting name='text-2'>_📕Cx Laparoscopica</b:widget-setting>
              <b:widget-setting name='text-5'>__📙Cx Oncologica</b:widget-setting>
              <b:widget-setting name='text-4'>__📙Cx Metabolica</b:widget-setting>
              <b:widget-setting name='text-7'>__📙Cx Cardiovascular</b:widget-setting>
              <b:widget-setting name='text-6'>__📙Cx de torax</b:widget-setting>
              <b:widget-setting name='text-55'>Mega Menu</b:widget-setting>
              <b:widget-setting name='text-51'>__🗄&#65039; </b:widget-setting>
              <b:widget-setting name='text-52'>_👩&#8205;💻 xx </b:widget-setting>
              <b:widget-setting name='text-53'>_👩&#8205;💻 xx </b:widget-setting>
              <b:widget-setting name='text-54'>_👩&#8205;💻 xx </b:widget-setting>
              <b:widget-setting name='text-50'>__🗄&#65039; Edicion y presentacion </b:widget-setting>
              <b:widget-setting name='shownum'>100</b:widget-setting>
              <b:widget-setting name='link-17'>https://investigacion-biomedica.blogspot.com/</b:widget-setting>
              <b:widget-setting name='link-16'>https://biologiamedica0.wordpress.com/</b:widget-setting>
              <b:widget-setting name='link-19'>#</b:widget-setting>
              <b:widget-setting name='link-18'>#</b:widget-setting>
              <b:widget-setting name='link-1'>https://biologiamedica0.wordpress.com/</b:widget-setting>
              <b:widget-setting name='link-13'># </b:widget-setting>
              <b:widget-setting name='text-48'>__🗄&#65039; Drive </b:widget-setting>
              <b:widget-setting name='link-2'>https://biologiamedica0.wordpress.com/2023/10/20/modulo-cirugia-laparoscopica/</b:widget-setting>
              <b:widget-setting name='link-12'># </b:widget-setting>
              <b:widget-setting name='text-49'>__🗄&#65039; Formularios </b:widget-setting>
              <b:widget-setting name='link-15'># </b:widget-setting>
              <b:widget-setting name='link-0'>/</b:widget-setting>
              <b:widget-setting name='link-14'># </b:widget-setting>
              <b:widget-setting name='text-44'>__📂Power-point </b:widget-setting>
              <b:widget-setting name='text-45'>__📂Excel </b:widget-setting>
              <b:widget-setting name='link-11'># </b:widget-setting>
              <b:widget-setting name='text-46'>__📂Access </b:widget-setting>
              <b:widget-setting name='link-10'># </b:widget-setting>
              <b:widget-setting name='text-47'>_👩&#8205;💻 Goglee Docs </b:widget-setting>
              <b:widget-setting name='link-9'># </b:widget-setting>
              <b:widget-setting name='text-40'>_Comandos-Windows</b:widget-setting>
              <b:widget-setting name='text-41'>📒Informatica</b:widget-setting>
              <b:widget-setting name='link-7'># </b:widget-setting>
              <b:widget-setting name='text-42'>_👩&#8205;💻 Oficina </b:widget-setting>
              <b:widget-setting name='link-8'># </b:widget-setting>
              <b:widget-setting name='text-43'>__📂Word </b:widget-setting>
              <b:widget-setting name='link-5'>
          https://biologiamedica0.wordpress.com/2023/11/16/modulo-cirugia-oncologica/</b:widget-setting>
              <b:widget-setting name='link-6'># </b:widget-setting>
              <b:widget-setting name='link-3'>#</b:widget-setting>
              <b:widget-setting name='link-4'>https://biologiamedica0.wordpress.com/2024/03/29/modulo-cirugia-metabolica/</b:widget-setting>
              <b:widget-setting name='link-28'># </b:widget-setting>
              <b:widget-setting name='link-27'># </b:widget-setting>
              <b:widget-setting name='link-29'># </b:widget-setting>
              <b:widget-setting name='link-24'># </b:widget-setting>
              <b:widget-setting name='text-37'>_Desarrollo-software</b:widget-setting>
              <b:widget-setting name='link-23'># </b:widget-setting>
              <b:widget-setting name='text-38'>_Elect--Mecatrónica </b:widget-setting>
              <b:widget-setting name='link-26'># </b:widget-setting>
              <b:widget-setting name='text-39'>_Herram-programación</b:widget-setting>
              <b:widget-setting name='link-25'>https://bioanalisis-clinico-auto-aprendizaje.blogspot.com/</b:widget-setting>
              <b:widget-setting name='link-20'># </b:widget-setting>
              <b:widget-setting name='text-33'>_Cloud computing</b:widget-setting>
              <b:widget-setting name='text-34'>_Desarrollo Web</b:widget-setting>
              <b:widget-setting name='link-22'># </b:widget-setting>
              <b:widget-setting name='text-35'>_Pasatiempos</b:widget-setting>
              <b:widget-setting name='link-21'># </b:widget-setting>
              <b:widget-setting name='text-36'>_Autoeducación</b:widget-setting>
              <b:widget-setting name='text-30'>📚Mis-blogs</b:widget-setting>
              <b:widget-setting name='text-31'>_Medicina-Cirugia</b:widget-setting>
              <b:widget-setting name='text-32'>_Blogs Webs</b:widget-setting>
              <b:widget-setting name='link-39'>https://miltonherramientasdeprogramacion.blogspot.com/</b:widget-setting>
              <b:widget-setting name='link-38'>https://electronicaymecatronicabasica.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-26'>_&#10084;&#65039; Cardiologia </b:widget-setting>
              <b:widget-setting name='link-35'>https://miltonpasatiempos.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-27'>_🚨 Radiologia </b:widget-setting>
              <b:widget-setting name='link-34'>https://desarrolloweb-parte1.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-28'>_🧰-Instrumental-Qx</b:widget-setting>
              <b:widget-setting name='link-37'>https://fundamentosdeldesarrollodesoftware.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-29'>_📚-Qx</b:widget-setting>
              <b:widget-setting name='link-36'>https://autoeducaciononline.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-22'>__📊-Publica-Artículo </b:widget-setting>
              <b:widget-setting name='link-31'>https://www.blogger.com/profile/12668539291580415274</b:widget-setting>
              <b:widget-setting name='text-23'>__📊-Bioestadistica </b:widget-setting>
              <b:widget-setting name='link-30'>https://biologiamedica0.wordpress.com/</b:widget-setting>
              <b:widget-setting name='text-24'>__📊-SPSS</b:widget-setting>
              <b:widget-setting name='link-33'>https://miltondesarrolloweb.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-25'>_🔬 Laboratorio clinico</b:widget-setting>
              <b:widget-setting name='link-32'>http://blogswebmiltonrodriguez.blogspot.com/ </b:widget-setting>
              <b:widget-setting name='text-20'>__📊-Informe Final </b:widget-setting>
              <b:widget-setting name='link-40'>https://aprendecomandoscmdwindows.blogspot.com/</b:widget-setting>
              <b:widget-setting name='text-21'>__📊-Defensa-Tesis</b:widget-setting>
              <b:widget-setting name='text-19'>__📊-Diseño metodolog </b:widget-setting>
              <b:widget-setting name='link-49'>#</b:widget-setting>
              <b:widget-setting name='text-15'>__📙Cx Urologia-Transplante</b:widget-setting>
              <b:widget-setting name='link-46'>#</b:widget-setting>
              <b:widget-setting name='text-16'>_📗 BiologiaMedica</b:widget-setting>
              <b:widget-setting name='link-45'>#</b:widget-setting>
              <b:widget-setting name='text-17'>_📊 Investigación BM</b:widget-setting>
              <b:widget-setting name='link-48'>#</b:widget-setting>
              <b:widget-setting name='text-18'>__📊-Protocolo-Investig </b:widget-setting>
              <b:widget-setting name='link-47'>#</b:widget-setting>
              <b:widget-setting name='text-11'>__📙Cx Trauma 2</b:widget-setting>
              <b:widget-setting name='link-42'>#</b:widget-setting>
              <b:widget-setting name='text-12'>__📙Cx Hepatobiliar</b:widget-setting>
              <b:widget-setting name='link-41'>#</b:widget-setting>
              <b:widget-setting name='text-13'>__📙Cx de Hernias</b:widget-setting>
              <b:widget-setting name='link-44'>#</b:widget-setting>
              <b:widget-setting name='text-14'>__📙Cx Cabeza-Cuello</b:widget-setting>
              <b:widget-setting name='link-43'>#</b:widget-setting>
              <b:widget-setting name='link-51'>#</b:widget-setting>
              <b:widget-setting name='text-10'>__📙Cx Trauma 1</b:widget-setting>
              <b:widget-setting name='link-50'>#</b:widget-setting>
              <b:widget-setting name='sorting'>NONE</b:widget-setting>
              <b:widget-setting name='link-53'>#</b:widget-setting>
              <b:widget-setting name='link-52'>#</b:widget-setting>
              <b:widget-setting name='link-55'>random/mega-menu</b:widget-setting>
              <b:widget-setting name='link-54'>#</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
              <b:include name='content'/>
            </b:includable>
            <b:includable id='content'>
              <ul id='main-menu-nav' role='menubar'>
                <b:loop values='data:links' var='link'>
                  <li><a expr:href='data:link.target' role='menuitem'><data:link.name/></a></li>
                </b:loop>
              </ul>
            </b:includable>
          </b:widget>
        </b:section>
      </div>


Descripción detallada:

  1. <div class='header-menu'>: Define un contenedor HTML para el menú de navegación dentro del encabezado del blog.

  2. <b:section>: Es una sección de Blogger, que agrupa un widget que contendrá el menú. La sección tiene el ID 'main-menu', lo que permite gestionarla en la interfaz de Blogger.

  3. <b:widget>: Un widget específico que se utiliza para crear una lista de enlaces (LinkList). Este widget contiene configuraciones que definen cada enlace del menú.

  4. <b:widget-settings>: Aquí es donde se configuran los enlaces y textos que aparecerán en el menú.

    • name='text-X': Los textos como "📚 Medicina" o "🏡Home" son los nombres visibles en el menú.
    • name='link-X': Las URLs asociadas a cada texto. Por ejemplo, el enlace a "Cirugía Laparoscópica" apunta a una página externa de WordPress.

  5. <b:includable id='main'> y <b:includable id='content'>: Estas son plantillas internas del widget que definen cómo se mostrará el contenido. El menú se genera en una lista desordenada (<ul>) con enlaces (<a>) que utilizan un bucle (<b:loop>) para iterar sobre los enlaces configurados en el widget.

¿Cómo reutilizarlo en otro blog?

  1. Copia el código: Si estás utilizando una plataforma como Blogger o WordPress, puedes copiar todo el fragmento de código, incluyendo la estructura <div>, <b:section>, y <b:widget>.

  2. Ajusta las configuraciones:

    • Modifica los textos de los enlaces (text-X) y las URL (link-X) según los contenidos de tu nuevo blog. Por ejemplo, cambia "📚 Medicina" por otro texto relevante.
    • Actualiza los enlaces de las URLs (link-X) para que apunten a las nuevas páginas o secciones de tu blog.

  3. Insertar en la plantilla:

    • Si usas Blogger, debes pegar el código en la plantilla HTML de tu blog, probablemente en la sección de la cabecera (header).
    • Si usas otra plataforma como WordPress, podrías necesitar adaptar el formato del código, eliminando etiquetas específicas de Blogger (como <b:section> y <b:widget>) y usar widgets o bloques nativos de WordPress.

Ejemplo visual del menú:

Este código generaría un menú con enlaces como:

  • 📚 Medicina
  • 🏡 Home
  • _📚 Cirugía General
  • __📙 Cirugía Oncológica

Iconos: Los iconos como 📙 y 🏡 son emojis que decoran los textos, facilitando una representación visual agradable en el menú.

Reutilización:

  • Personaliza los textos e iconos para que se alineen con el tema y las secciones de tu nuevo blog.
  • Verifica los enlaces para asegurarte de que llevan a las secciones correctas de tu nuevo sitio.