Ir al contenido principal

Incluye marcadores o anclas en tus post de #Wordpress #Blogger y #GoogleSites



Es posible que te hayas preguntado alguna vez si es posible incluir marcadores o anclas (anchor link) internas en un post de Blogger, Wordpress o de un Sites de Google. La respuesta es que sí que se puede, aunque el proceso no es para nada intuitivo y nos obliga a seguir unas pautas un tanto engorrosas. No obstante, si alguna persona se ha asustado, que se esté tranquila, porque no es difícil, aunque tediosa.

Como este post va precisamente de marcadores, a través del índice de contenidos que se pone a continuación podréis acceder directamente al tema que os interese, simplemente haciendo click.

Índice de contenidos:


0. Para qué sirven los marcadores o anclas (anchors)


Los marcadores o anclas (en inglés anchor links) son hyperlinks (hiperenlaces o hipervínculos) internos de una página.

En otras palabras, así como un hipervínculo convencional nos lleva a otra página o elemento web externo a la página o post que estemos visitando, los marcadores o anclas nos llevan a una zona diferente de la propia página o post.

Por ejemplo, si hacéis click aquí, os llevará a la zona de bibliografía de esta página, Pero si hacéis click en   Volver al índice os retornará al índice de contenidos de esta web.

En definitiva, los marcadores nos hace la navegación interna de una página o post mucho más cómoda y directa, sin tener que obligar al lector a leerse todo el contenido.

Os invito que utilicéis este sistema cuando escribáis post o página muy largas, como por ejemplo, ésta.

1. Incluir marcadores (anclas) en Blogger

1.1. Con estilos de párrafo

2) Si utilizamos estilos de formato, deberemos escribir lo siguiente (**tener en cuenta que puede tratarse de un h1, h2, h3... ):


<h2 id=”nombredelmarcador” style=”text-align: left;”> Texto a enzalar </h2> 

<h3 id=”nombredelmarcador” style=”text-align: left;”> Texto a enzalar </h3>

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)

1.2. Sin estilo de párrafo (texto normal)

1) Vamos al editor HTML como en el apartado anterior.
2) Sin estilo de párrafo (texto normal), escribimos lo siguiente para crear el marcador (o ancla)

<a id=”nombredelmarcador”> Texto a enlazar </a> 

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)

1.3. Enlazar el marcador

1) Para enlazar el marcador, volveremos al editor visual, seleccionamos la(s) palabra(s) que queramos y escribimos lo siguiente en la dirección URL (como veis, el marcador siempre va precedido de unas almohadillas # ):
NOMBREdetuBLOG.blogspot.com.es/nombre-del-post.html#NOMBREdelMARCADOR

2) Para sacar la dirección de nuestros post tan sólo deberemos ir al menú vertical derecho de blogger, donde se indica el link del post. Peor no os olvidéis de escribir al final de la URL que copiéis  un .html seguirdo de la almohadilla y el nombre del marcador:

NOMBREdetuBLOG.blogspot.com.es/nombre-del-post.html#NOMBREdelMARCADOR

Haceis click encima y os aparecerá el enlace permanente

2. Incluir marcadores (anclas) en WordPress

2.1. Crear el marcador cuando usamos estilos de párrafo

1) Como en el caso de blogger, iremos al editor HTML.
2) Si utilizamos estilos de formato, deberemos escribir lo siguiente:
<h2 id=”nombredelmarcador” style=”text-align: left;”> Texto a enzalar </h2> 

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)


2.2. Crear el marcador cuando NO utilizamos estilos de párrafo (texto normal)

1) Vamos al editor HTML
2) En el caso de no utilizar estilos de párrafo, en el editor HTML escribiremos lo siguiente:

<a id=”nombredelmarcador”> Texto a enlazar </a> 

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)

2.3. Enlazar el marcador

Para enlazar el marcador, volveremos al editor visual, seleccionamos la(s) palabra(s) que queramos y escribimos lo siguiente en la dirección URL (como veis, el marcador siempre va precedido de unas almohadillas # ):
NOMBREdetuPÁGINA.com/nombre-del-post/#NOMBREdelMARCADOR

Fuente: blogtimenow.com/

2.4. Incluir marcadores mediante apps

@Sureyea. nos recomienda dos apps por si no queremos hacer todo el proceso de edición del hml de nuestra página web:
  • Ultimate TinyMCE: un apps que nos permite reconvertir nuestro editor de posts de wordpress en una interface visual e intuitiva. (No lo he probado, pero tiene muy buena pinta).

3. Incluir marcadores (anclas) en Google Sites

3.1. Con la función del índice de contenidos

■ Cuestiones previas

* Todo lo que se explica a continuación ha de hacerse el el modo de edición de la página (click en el icono del lapiz de la parte superior derecha del sites)





1) Para poder utilizar la opción de tabla de contenidos, primeramente deberemos editar nuestra página del sites utilizando los estilos de párrafo (en el menú FORMATO), a saber, cuando pongamos un título aplicarle formato T1 (h1 en html), T2 (h2) etc., tal y como se puede observar en la siguiente imagen:


2) Una vez escrita la página con la utilización de estilos de formato (T1, T2...), crearemos en índice o la tabla de contenidos. 
Para crear el índice iremos al menú INSERTAR > ÍNDICE DE CONTENIDO

3) Nos saldrá un índice automático, al estilo de éste:

■ Crear marcadores con el índice de contenidos

1) Creamos un índice de contenidos

2) Una vez creado, salimos del modo de edición.
Nnos situamos sobre el elemento elegido para ser marcador y hacemos click con e botón derecho del ratón y copiamos el link/enlace:


3) Volvemos al modo de edición.
Nos situamos sobre el elemento deseado y hacemos click en el icono para agregar un enlace:


4) pegamos el enlace del paso 2, que tendrá una forma así:
https://sites.google.com/site/NOMBREdelSITES/home/NOMBREsdelaPÁGINA#TOC-NOMBREMARCADOR


3.2. Creando un marcador en cualquier lugar del texto

Al igual que hemos hecho en el caso de Blogger y WordPress, si queremos incluir un marcador interno dentro del texto de nuetsro sites, tendremos que ir al editor HTML e incluir las siguientes etiquetas HTML sobre la(s) palabra(s) deseadas:

 <a name="nombredelmarcador"> Texto a enlazar </a>. 

4. Bibliografía









Comentarios

  1. Muy completo, no me había planteado utilizarlo con Google Sites, pero veo que puede tener mucha utilidad

    ResponderEliminar
  2. Me alegra que te animes a utilizarlo Javier.

    ResponderEliminar
  3. No tenía ni idea de que podía hacerse. Muchas gracias por la explicación, Alazne y el curro que hay detrás, porque sí es un poco engorroso, sí.
    Un abrazo

    ResponderEliminar
  4. Muchas gracias por el post, está muy currado, pero tengo que decir que con plantilla de vistas dinámicas de blogger no he conseguido, creo que no es posible con estas plantillas.
    Un saludo!

    ResponderEliminar
  5. Una gran entrada que me ha resuelto el problema que tenía. Gracias.

    ResponderEliminar
  6. Me alegra mucho que lo hayas podrido lograr Iván.
    En cuanto a ti Luciano, no, en plantillas dinémicas no deja :'(

    ResponderEliminar
  7. Muy buena nota Alazne te agradezco que la compartas con nosotros, creo que tiene mucha aplicación.

    ResponderEliminar
  8. sobre todo viene fetén para google sites y wordpress, en blogger, según con qué plantillas da problemas, Franco

    ResponderEliminar
  9. Genial para mi wordpress, muchas gracias!

    ResponderEliminar
  10. En la actual versión de GoogleSites no consigo usarlo...

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Fin del proyecto "En la nube TIC"

  Llegó el día del “hasta siempre”… Nunca pensé en este momento, en cómo despedir un proyecto que ha estado tan presente en la última década de nuestras vida. 10 años es mucho tiempo para cualquier proyecto educativo colaborativo, y llega un momento en el que distintas circunstancias nos hacen pensar que es el momento de cerrar una etapa, de decir adiós. Y este momento ya está aquí. “En la nube TIC” llega a su fin. Solo se me ocurre dar las gracias a todos aquellos que nos siguieron artículo a artículo, a los que nos animaron y a los que pusieron su cariño en celebrarlo una y otra vez. Pero sobre todo quiero dar las gracias a esos maravillosos docentes que, sin pedir nada a cambio, lo dieron todo para ayudar a muchos de sus compañeros, les conocieran o no. Han derrochado esa generosidad de la que se nutrió la web 2.0 y la revolución tecnológica en la educación en sus inicios, y que tanto echamos de menos últimamente. Quiero dar las gracias y mostrar mi admiración y respeto a todos los

WordWall: Crea juegos online en minutos.

  ¡Hooooola a todos! Qué penita me está dando publicar estas últimas entradas en el blog EnlanubeTIC. Ver cómo se va apagando un proyecto tan bonito está costando...  Pero vamos a intentar que las entradas que nos quedan sean lo más útiles posible para otros profes, que es lo que siempre hemos pretendido. Hoy vamos a hablar de Wordwall , una web    británica que nos ofrece la posibilidad de crear fantásticos juegos online a los que nuestros alumnos pueden jugar desde sus tabletas, móviles, portátiles...  Hay tres características que me encantan de Wordwall: Lo rápido y sencillo que es crear un juego (simplemente crear listas de conceptos y ya). El aspecto gráfico del juego que se genera (incluso puedes cambiar el tipo de juego con la misma lista). Las estadísticas que obtienes de las puntuaciones que alcanzan tus alumnos. Aquí tenéis un par de ejemplos de juegos que he creado para mis “minions”: Y en este tutorial se puede ver lo súper sencillo que es crear y compartir un j

Fluky.io: Tu "ruleta de la fortuna" personalizada

¡Hoooola a todos! Hacía mucho que no escribía una entrada en la nube TIC, y ya tenía ganas. Hemos hablado de tantas herramientas, que ya casi no quedan sin repetir… En esta ocasión voy a presentaros una web suuuuuúper sencilla y en mi opinión muy práctica: Fluky.io . Son muchas las ocasiones en las que queremos hacer una elección aleatoria en clase (otras muchas nos interesa que la elección parezca aleatoria, pero no lo sea, jeje). Varios de los programas o apps que utilizamos en el aula tienen alguna opción que nos permite hacerlo: el software de la pizarra digital (Notebook, Active Inspire…), webs como ClassDojo, o la app que utilizamos como "cuaderno del profesor” (Additio, iDoceo, CuadernoProfesor…) por ejemplo. Pero esta que os presento hoy hace sencilla, exclusiva y perfectamente eso: elecciones aleatorias. Sin registros ni cosas raras. Cuando entras en fluky.io , solo tienes que pulsar el botón “START” y aparecerá una barra a la izquierda en la que pu