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

Artículos Relacionados

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

About patriram

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

Leave a Reply

Your email address will not be published. Required fields are marked *