Cómo añadir una tabla de contenidos en Blogger

Una tabla de contenidos es un apartado donde se pueden visualizar de forma ordenada una lista de todos los temas o subtemas que se hablarán en un página. Es utilizada para que el lector tenga una mejor apreciación acerca de los puntos a tratar, de la misma forma, podemos hacer que el lector salte al tema que más le interese mediante un enlace dentro de la misma página.

Dichas tablas se encuentran a menudo en artículos de wikipedia, libros electrónicos, archivos pdf, etc. Mayormente se colocan después de la introducción.

En esta ocasión crearemos una tabla de contenidos con un genial efecto deslizante utilizando jQuery y Javascript proporcionado por Arlina Design. Puedes ver el resultado pulsando en este enlace.


Te puede interesar: Cómo personalizar botones con CSS


Tabla de contenidos en Blogger

Nos dirigimos a Plantilla > Editar HTML. Presionamos CTRL+F, buscamos la etiqueta <head> y pegamos lo siguiente:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style type='text/css'> 
/* CSS Table of Contents */ 
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px} #toc_list{font-weight:700;cursor:pointer;margin:10px 0} #toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none} #toc_list svg{vertical-align:middle} #toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em} #toc ol li:before{left:-2em} #toc li a{color:#222} #toc li a:hover{color:#1e90ff} #toc{display:grid} .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s} .back_tocontent:hover{background:#2d3436;color:#fff} :target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

Si ya tienes el jQuery instalado en tu plantilla, no hace falta que pegues el código resaltado.

Ahora añadiremos la función que logra el efecto deslizante, para eso buscamos </body>, y justo arriba pegamos:

<script type='text/javascript'>  
//<![CDATA[
  $(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})}); 
//]]>  
</script>

Guardamos los cambios y listo.

Ahora, el siguiente código es el de la tabla de contenido, para agregarlo abrimos la Edición HTML de nuestra entrada, copiamos y pegamos lo siguiente:

<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0"> Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
</div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Subencabezados 1">Soy el subencabezado 1</a></li>
<li><a href="#toc_2" title="Subencabezados 2">Soy el subencabezado 2</a></li>
<li><a href="#toc_3" title="Subencabezados 3">Soy el subencabezado 3</a></li>
<li><a href="#toc_4" title="Subencabezados 4">Soy el subencabezado 4</a></li>
<li><a href="#toc_5" title="Subencabezados 5">Soy el subencabezado 5</a></li>
</ol>
</div>
</div>

Deberás cambiar los Subencabezados de acuerdo al orden que se encuentran en tu entrada.

Ahora, nos ubicamos en en los títulos de tus subencabezados que añadiste en tu artículo, y le agregamos un identificador con el valor «#toc_num«, donde num es uno de los valores del anterior código.

Por ejemplo. El HTML de tu subencabezado es de la siguiente manera:

<h3> Soy el subencabezado 1 </h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. has been…

Si le agregamos el identificador al subencabezado que en este caso es un <h3>, quedaría de la siguiente manera:

<h3 id=»#toc_1«> Soy el subencabezado 1 </h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. has been…

De la misma forma para los siguiente títulos… deberás ponerlos de acuerdo a cómo los ordenaste al principio. Mas o menos de esta manera:

<h3 id=»#toc_1«> Soy el subencabezado 1 </h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. has been…

<h3 id=»#toc_2«> Soy el subencabezado 2 </h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. has been…

<h3 id=»#toc_3«> Soy el subencabezado 3 </h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. has been…

<h3 id=»#toc_4«> Soy el subencabezado 4 </h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. has been…

<h3 id=»#toc_5«> Soy el subencabezado 5 </h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. has been…

Para finalizar agregaremos el botón de «regresar» al final de cada sección. Este paso es opcional, así que si deseas agregarlo deberás pegar lo siguiente:

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Regresar al contenido</div>

En tu editor deberá verse de la siguiente manera:

<h3 id=»#toc_1«> Soy el subencabezado 1 </h3>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. has been…

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Regresar al contenido</div>

Para finalizar, solo te quedaría Publicar tu post y listo.

Recuerda que al cambiar entre la parte visual y el editor html, Blogger por defecto creará un enlace para cada #toc. Por lo que debes asegurarte que el valor del href sea un #toc.

Cualquier duda, no duden en comentar…

Nos leemos.

Deja un comentario

Share via
Copy link