Blogger: Cómo Poner una Tabla de Contenido este 2022

Cómo Crear una  Tabla de Contenidos en BLOGGER con Animación de Mostrar y Ocultar

cómo crear una tabla o índice de contenido en blogger / html


Video Explicativo para Colocar un Índice en Blogger



¿Para que funciona una tabla de contenido?

Lo cierto es que la plataforma Blogger es autoadministrable y trae consigo funciones muy buenas en la creación de entradas, sin embargo, no todo es bonito en blogger porque se nos queda corto cuando queremos agregar una mejor experiencia en la navegación para el usuario. 

Una de esas experiencias que podemos agregar a nuestro Blog es un Índice o conocido más bien como tabla de contenido. Esta tabla ayuda al usuario a encontrar un tema en particular que se encuentra dentro del artículo y lo dirige directo al encabezado o párrafo que hemos creado.

Links de Documentos CSS y JavaScript JS de la tabla de contenido

Necesitamos agregar el documento CSS y JS en nuestra plantilla de Blogger para que funcione correctamente antes de publicar una entrada. Para esto debemos añadir el link CSS de la tabla antes del tag </head>

la dirección la puedes reemplazar en donde vayas alojar el documento o lo dejas tal como esta.

link css de tabla de contenido

Luego, ponemos el link de Script antes del tag </body> y Adicional colocamos la función JavaScript para que muestre la animación de la tabla.

js de tabla de contenido

Creando la Tabla de Contenido en Blogger

Cuando estemos redactando nuestra entrada y vayamos a crear la tabla de contenido, entonces, cambiamos de Vista de redacción a Vista en HTML.

Allí colocamos el DIV que llamara nuestra tabla o índice de contenido.

DIV de tabla de contenido

Colocando Identificador en la Tabla de Contenido

Necesitamos agregar un ID(id="nombreunicodeindentificado") en cada lista que queremos dirigir al usuario en la sección en especifico(encabezado, párrafo e imagen). Cada id=" " que coloquemos debe ser único y no debe repetirse el nombre porque no funcionara.

Ya listo nuestra tabla procedemos a colocar un id a un párrafo o h2. Ejemplo: En esta parte se agrego el nombre id="funciondetabla" para que en la tabla se logre reconocer con este identificador.

identificador id para contenido de tabla

Una vez puesto el id, necesitamos copiar la URL completa de nuestra entrada, en mi caso seria: https://www.seoblogariel.online/2021/05/crear-tabla-de-contenido-en-blogger.html

Nos dirigimos al DIV de la tabla de contenido y en la primera lista vamos a colocar el link de la URL completa de nuestra entrada seguido de #nombreID. Quedaría de la siguiente forma:

https://www.seoblogariel.online/2021/05/crear-tabla-de-contenido-en-blogger.html#funciondetabla

Dejamos sin marcar "Abrir este enlace en una ventana nueva" y "Añadir el atributo rel=nofollow".
 

Hacemos este paso con cada lista que queremos colocar identificador para nuestra tabla de contenido.

Conseguir Archivos de tabla de contenido

Para que funcione la tabla de contenido y darle animación de mostrar y ocultar debemos tener los archivos y links que apunten a estos documentos.

Por lo tanto, te dejo los archivos de la tabla para que los puedas conseguir aquí.

Déjame un mensaje.

Publicar un comentario (0)
Artículo Anterior Artículo Siguiente