Crear una tabla de Contenidos Automática para Blogger
Aprende a instalar un sistema de navegación inteligente que mejora tu SEO y la experiencia del usuario de forma profesional.
¿Qué es una tabla de contenidos?
Es una lista de enlaces que encontramos al inicio de cada Post en nuestro blog, generalmente se coloca luego de los párrafos introductorios y les permite a los usuarios navegar por secciones específicas dentro del artículo.
¿Cómo Poner una Tabla de contenidos HTML en Blogger?
Blogger de forma predeterminada no trae ningún gadget que te permita incrustar una tabla de contenidos dentro de tus artículos, por eso es necesario que utilicemos códigos externos tanto HTML, CSS y como JavaScript.
Pasos para la instalación
Paso 1: Ve a Blogger y busca la opción TEMA.
Luego Editar HTML. Una vez allí busca la etiqueta </head> y pega el siguiente código en la parte superior.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by Kirawuan.com
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="Ocultar"):(a.style.display="none",b.innerHTML="Mostrar")}
//]]>
</script>Paso 2: Añadir los códigos CSS.
Busca la línea ]]></b:skin> y pega lo siguiente justo arriba:
.mbtTOC2{border:1px solid #c9daee;border-radius:12px;background:#e8f2fd;margin:24px auto;padding:0;width:100%;max-width:920px;box-sizing:border-box;box-shadow:0 8px 24px rgba(0,0,0,.06);color:#0d1b2a;font-family:Oswald,Arial,sans-serif}
.mbtTOC2 button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;background:#f3f8ff;border:0;border-bottom:1px solid #d5e3f6;color:#0d1b2a;font-size:20px;font-weight:700;letter-spacing:.2px;cursor:pointer;text-align:left}
.mbtTOC2 button span{font-size:13px;color:#cc2130}
.mbtTOC2 button a{color:#cc2130;text-decoration:none}
.mbtTOC2 button a:hover{text-decoration:underline}
#mbtTOC2{padding:12px 16px}
.mbtTOC2 ol{counter-reset:section1;list-style:none;margin:0;padding:0}
.mbtTOC2 li{margin:10px 0}
.mbtTOC2 li a{color:#0a58ca;text-decoration:none;font-size:18px}
.mbtTOC2 li a:hover{text-decoration:underline}
.mbtTOC2 li li{margin:6px 0}
.mbtTOC2 li li a{color:#1f2d3a;font-size:16px}
.mbtTOC2 .point2,.mbtTOC2 .point3{padding-left:20px}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding-right:8px;color:#6b7c93;font-size:14px}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 li li li:before{content:counter(section1) "." counter(section2) "." counter(section3);counter-increment:section3}
#post-toc h1,#post-toc h2,#post-toc h3,#post-toc h4,#post-toc h5,#post-toc h6{scroll-margin-top:80px}
.mbtTOC2 button span{font-size:0}
.mbtTOC2 #Tog{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;line-height:1;padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,#0a67ff,#6a4dff);color:#fff !important;border:1px solid #2a3f6b;text-decoration:none;box-shadow:0 6px 14px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.15);transition:.15s}
.mbtTOC2 #Tog:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.15)}
.mbtTOC2 #Tog:active{transform:translateY(0)}Paso 3: Reemplazo de código
Busca el código: <data:post.body/> en tu plantilla y sustitúyelo por:
<div id="post-toc"><data:post.body/></div>Luego de estos pasos, guarda los cambios en tu plantilla.
Crear o Mostrar tabla en una entrada
Coloca en versión HTML el siguiente código dentro del post (se recomienda después del primer párrafo):
<div class="mbtTOC2">
<button>
Tabla de contenido
<span>[<a id="Tog" onclick="mbtToggle2()" aria-expanded="true">Ocultar</a>]</span>
</button>
<div id="mbtTOC2"></div>
</div>Finalización
Luego, para finalizar, ponemos este código en la parte final de la entrada:
<script>mbtTOC2();</script>¿Prefieres que lo instale yo por ti?
Si no quieres tocar código, puedo instalar la tabla de contenidos y dejarla funcionando en tu blog en minutos.
Escríbeme