Como crear un menu para las Entradas muy Largas o Para Moverse en la Plantilla (Menu para saltar la navegación, “Skip Navigation” link)?


Es aplicable en cualquier plataforma o página Web.

Resultado: (HAZ CLICK EN LOS VINCULOS PARA QUE VEAS COMO FUNCIONA)
Capitulo 1
Capitulo 2
Capitulo 3
Capitulo 4
Capitulo 5

Capitulo 1
Contenido
Capitulo 2
Contenido
Capitulo 3
Contenido
Capitulo 4
Contenido
Capitulo 5
Contenido

Bueno esto es súper simple y creo que les servirá a todos, lo único que deben hacer es darle un nombre a la parte en donde va a saltar la entrada (<a name=”"></a>), y luego la llaman desde arriba (<a href=”#”></a>).

No es mas que un vínculo, que en el momento de hacer click en vez de cargar una nueva página, te lleva a una sección específica ya sea de tu plantilla o de un post en este caso.

Cual es la utilidad de esto, si necesitan por obligación tener una entrada muy larga (los usuarios se aburren rápidamente y no leen todo), con esto, el usuario no tendrá que llegar al final para leer lo que a el le interesa, basta con poner un menú de las secciones en la parte superior de la entrada y listo, el pincha en el vínculo que le importa, y éste lo dirige en forma automática a esta sección. Así pueden hacer grandes entradas, sin aburrir a las visitas. (y esto es mucho mas cómodo que te estén mandando de un post a otro. Yo en el segundo o 3er link me aburro y generalmente termino saliendo de las páginas, a menos que se note que la Web es seria y que la información esta en alguna parte).

Por ejemplo en la entrada en la que explico algunas cosas básicas que deben saber para buscar información en este blog, utilizo este tipo de vinculo de navegación, aquí dejo el ejemplo de como lo hice:


  1. 1.-<a href="#¿Que es un Blog?">¿Que es un Blog?</a>
  2. 2.-<a href="#¿Que diferencia tiene con una Página Web?">¿Que diferencia tiene con una Página Web?</a>
  3. 3.-<a href="#¿Me sirven los Articulos de este Blog si mi blog no es de Blogger o Wordpress?">¿Me sirven los Articulos de este Blog si mi blog no es de Blogger o Wordpress o es solo una web con html?</a>
  4. 4.-<a href="#¿Como encuentro la informacion que necesito en este blog?">¿Como encuentro la informacion que necesito en este blog?</a>
  5.  
  6. <a name="¿Que es un Blog?"><h2>¿Que es un Blog?</h2></a>
  7. blablablablabal blabla blabla blabla blabla
  8.  
  9.  
  10. <a name="¿Que diferencia tiene con una Página Web?"><h2>¿Que diferencia tiene con una Página Web?</h2></a>
  11. blablablablabal blabla blabla blabla blabla
  12.  
  13.  
  14. <a name="¿Me sirven los Articulos de este Blog si mi blog no es de Blogger o Wordpress?"><h2>¿Me sirven los Articulos de este Blog si mi blog no es de Blogger o Wordpress o es solo una Web?</h2></a>
  15. blablablablabal blabla blabla blabla blabla
  16.  
  17.  
  18. <a name="¿Como encuentro la informacion que necesito en este blog?"><h2>¿Como encuentro la informacion que necesito en este blog?</h2></a>
  19. blablablablabal blabla blabla blabla blabla

El h2 corresponde al estilo del título, si ven en la entrada Leer Antes de Navegar, se darán cuenta que cada título tiene el mismo formato de un título de post.

Si te das cuenta lo que esta en rojo es lo que importa y es lo que sirve para diferenciar y dirigir los links de un lugar a otro.

Ahora lo explico en forma general, Lo que deben hacer es tener en cuenta dos partes:
1.- La creación del vínculo que llamará a un lugar específico
2.- El lugar mismo al que se llamará desde arriba debe estar marcado con un nombre que debe ser único.
Entonces, mi vínculo y la parte a la que estoy llamando deberían verse así:

  1. <!--Estos son los vínculos-->
  2. <a href="#Link1">Capitulo 1</a>
  3. <a href="#Link2">Capitulo 2</a>
  4. <a href="#Link3">Capitulo 3</a>
  5. <a href="#Link4">Capitulo 4</a>
  6. <a href="#Link5">Capitulo 5</a>
  7.  
  8. <!--Aquí estan los lugares a los que estoy llamando:-->
  9. <a name="Link1">Capitulo 1</a>
  10. Contenido
  11. <a name="Link2">Capitulo 2</a>
  12. Contenido
  13. <a name="Link3">Capitulo 3</a>
  14. Contenido
  15. <a name="Link4">Capitulo 4</a>
  16. Contenido
  17. <a name="Link5">Capitulo 5</a>
  18. Contenido

Esta utilidad se había mencionado antes, en la entrada Boton Ir Arriba para que la visita no tenga que estar con la rueda del Mouse subiendo a cada rato.
Cada nombre debe ser ÚNICO no pueden haber dos Link1, ese es el único cuidado que deben tener. El resultado de esto es lo que muestro al comienzo de la entrada.
Espero que les guste

4 thoughts on “Como crear un menu para las Entradas muy Largas o Para Moverse en la Plantilla (Menu para saltar la navegación, “Skip Navigation” link)?

  1. solamente te quiero hacer una pregunta??? como haces lo de las secciones y categorias???? es decir lo de arriba de todo a la derecha

    porque yo hago las entradas y me quedan todas en la misma pagina… y otra cosita… el link de gana dinero con tu blog… no funciona me parece…

    saluods y por favor respondeme!

    gracias!

  2. losde100pre
    Lo siento lo de las categorias solamente pueden hacerlo a traves de las labels (etiquetas) en blogger. Mi blog esta alojado en un host propio asi que por eso hay muchas cosas que no se pueden hacer desde una cuenta de blogger.
    A cual link de Gana dinero???
    Si te refieres al del menu de arriba no es un link, es un posicionador, que te lleva justo a la seccion en la columna donde puedes ver como generar dinero con tu blog..
    suerte!!!

  3. Hola! esta pagina es buenisima! tiene mucha ayuda! all right, necesito que me digan como puedo hacer para poner “Leer más” en las entradas de mi blog, porq algunas son muy largas. Probe con muchos códigos pero no lo consigo, ahhh mi blog tiene la plantilla de artilugios!
    Espero su respuesta pronto!
    Gracias!

Deja tu Comentario