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

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

Meograph: crear historias multimedia

Meograph es una herramienta que nos permite crear una historia, combinando diferentes momentos organizados en una línea de tiempo, en los que podemos introducir mapas, narraciones escritas o en audio, vídeos de Youtube, imágenes y enlaces.  Su manejo es muy sencillo. Primero debemos registrarnos, a través de Facebook o con nuestra cuenta de correo. Una vez dentro, clicamos en el botón “Create a Meograph” para ir añadiendo los distintos "momentos" a nuestro montaje. Antes de comenzar nuestra historia podemos elegir, desde nuestro ordenador, una imagen que acompañe al título elegido  (podemos hacerlo también después, pues nos permite editarlo cuando queramos)   Comenzamos a crear pulsando "+Add a moment". De manera opcional podemos incluir una introducción y una conclusión, que acompañen a la historia y que tendrán que ser únicamente una narración en audio (no da opción para texto) Esto se efectuará pulsando en la palabra “Narration” que aparece bajo

Evaluar con rúbricas en Google Classroom

  Hace unos meses, Google implementó una funcionalidad en Google Classroom muy interesante tanto para el profesorado como para el alumnado: la evaluación de las tareas mediante guías de evaluación . Vamos, lo que toda la vida se ha conocido como evaluación por rúbricas . Es un proceso muy sencillo, que vamos a detallar a continuación, y que además facilita la compartición de las rúbricas con otros docentes de una forma rápida. Lo primero que tenemos que saber es que las guías de evaluación o rúbricas se pueden utilizar en dos clases de tareas: - Tareas - Tareas por cuestionario Una vez que comenzamos a crear la tarea, tenemos que darle un título y una descripción para que se active el botón de guías de evaluación. Además, elegiremos la puntación total para que el propio Classroom calcule la calificación sobre esa puntuación. Cuando se activa el botón de las guías, podemos optar por crear una nueva rúbrica, reutilizar una que hayamos creado anteriormente o importar la rúbrica de una ho