English Português

El widget de páginas estáticas de Blogger es muy útil para usarse como menú, sin embargo, tiene un punto débil: no se pueden agregar enlaces de otro tipo desde el panel. Pero sí es posible agregar enlaces desde el código.

1. Ir al código de la plantilla (Escritorio → Diseño → Edición HTML) y expandir plantilla de artilugios.

2. Buscar el código del widget de páginas, que es más o menos como sigue:

<b:widget id='PageList1' locked='true' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Para facilitar la búsqueda, pueden buscar con el navegador: id=’PageList

3. Una vez ubicado el código, hay dos lugares donde se pueden colocar nuevos enlaces:

  • Antes de <ul>. El enlace aparece primero en el menú.
  • Después de </ul>. El enlace aparece último en el menú. Nótese la diagonal de cierre de la etiqueta.

Como se trata de una lista HTML, el enlace seguiría el siguiente formato:

<li><a href='http://misitio.com/mienlace/'>Mi enlace</a></li>

Se pueden agregar tantos enlaces como el diseño lo permita. Siempre teniendo cuidado de abrir y cerrar correctamente las etiquetas.

4. Guardar los cambios.

De este modo se pueden agregar enlaces a una etiqueta importante, un sitio externo, al url del feed o cualquier otro sitio.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Joel / Hace 6 años /

      Hola Francisco!

      En el codigo pareciera que te faltó cerrar el tag de enlace (para quienes vayan a copiar directamente el código):
      Mi enlace

      Saludos y felicidades por el blog!!

      Responder a Joel →
    2. Francisco / Hace 6 años /

      @Joel: Gracias Joel, yo hablando de tener cuidado con cerrar las tags y soy el primero que falla 😛

      Gracias! 😀

      Responder a Francisco →
    3. oloman / Hace 6 años /

      Muy buena idea. Y simple… 🙂

      Responder a oloman →
    4. diseño / Hace 6 años /

      por favor, podíais explicar más en profundidad para que se usa? poniendo algún ejemplo? es que los que empezamos lo tenemos más difícil! un saludo!

      Responder a diseño →
    5. Francisco / Hace 6 años /

      @oloman: Es algo que preguntan mucho en BTemplates, ojalá le quite la duda a más de uno.

      @diseño: Sirve solo si tienes un blog con menú de páginas y quieres agregar a dicho menú algo más que los enlaces a las páginas. Como mencionaba arriba, podría ser a una etiqueta o a otro de tus blogs, como no se puede hacer desde el panel, se hace modificando el widget.

      Responder a Francisco →
    6. LMGuillermo / Hace 6 años /

      Muy útil, muchas gracias.

      Responder a LMGuillermo →
    7. Alfredo / Hace 5 años /

      hola, voy a hacer un blog de programacion de microcontroladores y me preguntaba si podrias pasarme el script para poner codigo que tienes, en el que pones tus scripts, para adaptarlo al mio, muchisimas gracias

      Responder a Alfredo →
    8. mikelse / Hace 5 años /

      Hola, justo esto buscaba. gracias
      pero tengo un problema al darle click a una pagina estatica, desaparecen los enlaces que agrege solo se ven los enlaces de las paginas estaticas, hice algo mal? gracias por la ayuda

      Responder a mikelse →
    9. Efren / Hace 5 años /

      Buenas!

      Estoy aplicando este tutorial a un blog, todo ha ido bien hasta el momento que intento hacer desaparecer el list-style… en chrome funciona correctamente pero en firefox siguen los puntitos tipicos de las listas… ni aplicando la etiqueta span…

      Gracias!

      Responder a Efren →
    10. Alvaro Benavides / Hace 5 años /

      Mi problema ahora es que hice esto y tengo una plantilla de las nuevas de blogger y cuando entro a una entrada entonces me sale un loop del menú, es deicr que los enlace que añado se repiten :S como lo resulevo? trate de mover los tags pero luego cuando entro a la entrada no salen son los enlace normales :S

      Responder a Alvaro Benavides →
    11. Alvaro Benavides / Hace 5 años /

      ¡OH!, tarde descubrí que hay que cerciorarse también de que los enlaces estén bajo de la etiqueta si se quieren de últimos. Editese también eso en el post para evitar errores. También esta mal eso de después de porque de ponerlo luego de esa etiqueta se crearía otra lista horizontal con los enlaces añadidos debajo del menú por defecto. Saludos.

      Responder a Alvaro Benavides →
    12. Luis DoHaz / Hace 5 años /

      Amigo como hago para que los enlaces de ese menu se abran en la misma ventana, ya que tengo la opcio de que todos los enlaces (enlaces externos) se abran en otras ventanas, pero estos del menu quiero que se abran en la misma ventana, el codigo es el mismo que tienes arriba, que tengo que agregarle a ese codigo y en que parte, te lo agradeceria de corazon

      Responder a Luis DoHaz →
    13. Alvaro Benavides / Hace 5 años /

      @Luis DoHaz: Hey Luis, coloca esto así a href=”http://www.example.com” target=”_self”, el target Self es lo que hace que se abra en la misma ventana, blank lo hace en una nueva (que es el por defecto).

      Espero entiendas y te haya servido.

      Responder a Alvaro Benavides →
    14. Luis DoHaz / Hace 5 años /

      Gracias Alvaro, ya encontre otra solucion efectiva que es con el “target=”_parent”. De todas formas infinitas gracias

      Responder a Luis DoHaz →
    15. Gèneve / Hace 5 años /

      ¡Hola! Antes de nada muchas gracias, solo que me ha surgido un problemilla …

      Como puedes ver, al tener fondo negro no se ve a simple vista los enlaces.

      ¿Cómo puedo cambiar el color de la fuente?

      Gracias (:

      Responder a Gèneve →
    16. Gèneve / Hace 5 años /

      Ya está solucionado (:

      Responder a Gèneve →
    17. Pipo / Hace 4 años /

      Gracias por el aporte.
      Mi problema era que la plantilla que estoy utilizando (Awesome) parece que no admite el winget “paginas” que es el que pensaba utilizar para crear un menu. Cuando intento colocarlo me indica que ya esta colocado pero no aparece. En la edición html de la plantilla con los artilugios expandidos tampoco aparece ese código que has puesto en el post.
      He utilizado el código que has posteado para pegarlo en un winget html que aparecía en la cabecera, desde Edición de paginas.
      Solucionado. Ya tengo menú y como quería, sin los puntitos delante.
      Lo comento para el que no quiera trastear directamente con el código de la plantilla.
      Un saludo y gracias.

      Responder a Pipo →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad