Anuncio

Cómo Crear índice de contenido [Hipervínculos dentro de un mismo post]

Cómo Crear índice de contenido [Hipervínculos dentro de un mismo post]

0

√ćndice de contenido en Blogger 2020

¡Bienvenido! En este articulo te ense√Īar√© a crear √≠ndices de contenido dentro de tu post de Blogger. Al inicio parecer√° complejo, pero con el tiempo notar√°s que es una herramienta f√°cil y que vale la pena si es recurrente que tus art√≠culos contengan subtemas o categor√≠as.

Haremos un índice como el que mostraremos a continuación.



Antes de comenzar a realizar tu √≠ndice, te recomendamos ya tener preparado tu post y por √ļltimo, realizar tu √≠ndice, de lo contrario, estar√≠as agregando temas que puede que no uses o modificando el √≠ndice de acuerdo a las futuras necesitas. Recuerda ser SEO-Eficiente.

Comencemos

Supongamos que ya tenemos nuestro post completo, y los t√≠tulos y subtitulos los tengo con las etiquetas de Titulo y subtitulo de Blogger (H2 y H3) 

Titulo 1

Subtitulo 1

Titulo 2

Subtitulo 2

Titulo 3

Subtitulo 3



Ahora lo que necesitamos es crear "id" a cada uno de los títulos y subtitulo dentro del código HTML del articulo. El "id" como su nombre lo índica, es un identificador que funciona solamente dentro de nuestro post.

Para colocarlo lo primero que necesitamos es ingresar a nuestro editor de post e ir a la esquina superior derecha, en la sección "Vista HTML"

Como usar la Vista HTML en Blogger

Nos daremos cuenta que la organización está en cero, si lo puntuamos del uno al diez. Lo que requerimos es seleccionar el icono de "Organizar vista" en la esquina superior izquierda.

Cómo ordenar la vista HTML en Blogger

Ahora necesitamos buscar nuestros códigos con los títulos y subtitulos. Si agregaste tus títulos con el "Formato de párrafo" de Blogger los encontrarás porque se encuentran encerrados por código H1,H2,H3,etc

Ejemplo:

<h3> Mi titulo bestial </h3>

Si, en caso de que no ocupases el "Formato de p√°rrafo" lo √ļnico que necesitas hacer es seleccionar tu t√≠tulo, seleccionar en el modo de edici√≥n de Blogger el formato de p√°rrafo y escoger si es t√≠tulo, subtitulo, t√≠tulo secundario, etc.

Usar Formato de P√°rrafo en Blogger

Ahora sí. Nuestros títulos en el código deberán aparecer así

      <h2 style="clear: both; text-align: center;">Titulo 1</h2>
    
      <h3 style="clear: both; text-align: center;">Subtitulo 1</h3>
    
      <h2 style="clear: both; text-align: center;">Titulo 2</h2>
    
      <h3 style="clear: both; text-align: center;">Subtitulo 2</h3>
    
      <h2 style="clear: both; text-align: center;">Titulo 3</h2>
    
      <h3 style="clear: both; text-align: center;">Subtitulo 3</h3>
    

Despu√©s de "hX" (La X es el n√ļmero que tiene el t√≠tulo, suele ser 2,3 o 4) colocaremos el id de cada subtitulo con un espacio y id="Mi-id-1". Es recomendable colocar un t√≠tulo que recuerdes o de manera secuencial y ocupando guiones en vez de espacio, si es necesario.

        <h2 id="Mi-id-1"  style="clear: both; text-align:
        center;">Titulo 1</h2>
      
        <h3 id="Mi-id-2" style="clear: both; text-align:
        center;">Subtitulo 1</h3>
      
        <h2 id="Mi-id-3" style="clear: both; text-align: center;">Titulo
        2</h2>
      
        <h3 id="Mi-id-4" style="clear: both; text-align:
        center;">Subtitulo 2</h3>
      
        <h2 id="Mi-id-5" style="clear: both; text-align: center;">Titulo
        3</h2>
      
        <h3 id="Mi-id-6" style="clear: both; text-align:
        center;">Subtitulo 3</h3>
      
  

Las comillas y los espacios entre propiedades es necesario para que funcione correctamente el c√≥digo. Si hiciste los pasos correctamente no deber√≠a de haber ning√ļn problema
 
Ahora si, casi por terminar agregaremos el texto al inicio con el modo "Lista en vi√Īeta", como un √≠ndice de cualquier ensayo.


Usar lista de vi√Īetas en Blogger

Ahora seleccionaremos uno por uno. Comenzaremos con el Titulo 1.
Lo seleccionamos y seleccionamos en "Crear/Editar URL" en la sección de vínculo de Blogger.

Como crear un hipervinculo en Blogger

Ahora tenemos que recordar que en mi caso, al primer titulo le coloque de id "Mi-id-1" por lo cual colocaremos ese mismo nombre en el recuadro de "URL a la cu√°l vincular" solo que con un gato al inicio, como se muestra en la imagen

¿Por qu√© un gato? Es un procedimiento HTML que declara que debe seguir un id. En CSS por ejemplo, se usan gatos, puntos, espacios, nombres claves, en fin, un mundo gigantesco.

Como agregar hipervinculo a un id Blogger

Y así progresivamente, agregando el id a cada título que hayas creado.
Al inicio puede ser tedioso, pero el lector agradecerá enormemente que tengas un índice y poder ir a lo que más le interesa en tu articulo.


Notas


  • Si tu post contiene menos de tres temas o es el texto es inferior a 400 caracteres, es mejor que el lector descubra los temas por si solos, no le tomar√° tiempo y accesible la informaci√≥n.

  • Tener titulos y subtitulos con el Formato de p√°rrafo ayuda a la est√©tica de tu p√°gina y estructuraci√≥n de la misma. Lo creas o no, los index de google y bing detectan y eval√ļan todo esto.

  • Si gustas aprender m√°s tips de Blogger con optimizaciones SEO, te invito a echar un vistazo a mi secci√≥n "SEOBlogger" aqu√≠ abajo.



Te agradezco que hayas le√≠do mi post y que te haya sido √ļtil
Un saludo. iKevinLuna

Tal vez te interesen estas entradas

No hay comentarios

Anuncio