En este artículo te mostraré cómo crear accesos directos a los títulos y subtítulos de tus entradas en Blogger a través de la implementación de una tabla de contenidos. Esto se hace con la finalidad de mejorar un poco la experiencia de navegación de los usuarios en nuestro blog.
¿Qué es una tabla de contenidos?
Las tablas de contenidos sirven para ayudar al lector a encontrar rápidamente la información que está buscando. Estas, por lo general, se ubican al principio de cada artículo, debajo del primer párrafo, y contienen una lista ordenada con todos los temas que se hablarán.
¿Cuándo debo utilizar una tabla de contenidos?
Yo te recomiendo utilizar una tabla de contenidos cuando escribas un artículo extenso y muy elaborado en el que se puede conseguir mucha información. La idea es que nuestros lectores no se aburran tratando de leer todo el artículo para al final darse cuenta de que la información que buscaban solo era un par de líneas.
Si tu artículo es corto y no tiene muchos títulos y subtítulos, no vale la pena crear tabla de contenidos.
Insertar una tabla de contenidos en Blogger
Muchos piensan que en Blogger no se puede crear tabla de contenidos fácilmente, pero hoy les demostraré todo lo contrario. Les mostraré cómo crear una tabla de contenido automática y 100% profesional.
➽ PASO 1: Ingresa a Blogger y busca la secció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 monetizatutiempoblog.blogspot.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: Ahora vamos a darle un toque profesional a nuestra tabla, así que tienen que buscar en su plantilla ]]></b:skin> y pegarán en la parte superior el siguiente código CSS.
/*Tabla de contenido | Plugin V2.0 by monetizatutiempoblog.blogspot.com */
.mbtTOC2{
border: 1px solid #8e8e8e; /*Border*/
border-radius: 5px;
box-shadow: 0px 0px 3px 1px #ddd; /*Sombra*/
background-color: #f1f1f1; /*Color de fondo*/
margin: 30px auto;
padding: 20px 10px;
font-family: Oswald, arial;
display: block;
width: 100%; /*Ancho*/
}
.mbtTOC2 button{
background:transparent;
font-family:oswald, arial; font-size:22px;
position:relative;
outline:none;
border:none;
color:#2E2E2E;
padding:0 0 0 15px;
}
.mbtTOC2 button a {
color:#FF0313;
padding:0px 2px;
cursor:pointer;
}
.mbtTOC2 button a:hover{
text-decoration:underline;
}
.mbtTOC2 button span {
font-size:15px; margin:0px 10px;color: red;
}
.mbtTOC2 li{margin:10px 0; }
.mbtTOC2 li:before{color:red; }
.mbtTOC2 li a {
color: #000; /*Color del titulo principal*/
text-decoration:none;
font-size:20px;
}
.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{
color:#040404;
font-size:17px;
}
.mbtTOC2 .point3, .mbtTOC2 .point2{
padding: 0px 0px 0px 24px;
}
.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
IMPORTANTE: Puedes editar como quieras el estilo de tu tabla; para facilitarte las cosas, te dejé indicado cuál es la función de cada código, así podrás editarlo a tu gusto.
➽ PASO 3: Para dejar todo listo en tu plantilla, debes buscar lo siguiente <data:post.body/> y sustituirlo por el código a continuación.
<div id="post-toc"><data:post.body/></div>Es probable que consigas más de un <data:post.body/> sí; si ese es tu caso, debes reemplazar el código en cada uno de ellos.
➽ PASO 4: Con esto ya tu blog estaría configurado y listo para mostrar las tablas de contenido en los artículos que tú prefieras. No olvides guardar los cambios.
¿Cómo mostrar una tabla de contenido en mis entradas?
Para que tus entradas puedan mostrar la tabla de contenidos, es importante que coloques los siguientes códigos dentro de tus artículos.
➽ CÓDIGO 1: Es importante que entres a tu artículo en la vista de edición HTML. Este código debes colocarlo justo debajo del párrafo donde quieres que aparezca la tabla de contenido.
<div class="mbtTOC2">
<button>Tabla de contenido <span>[<a id="Tog" onclick="mbtToggle2()">Ocultar</a>]</span></button>
<div id="mbtTOC2"></div>
</div>➽CÓDIGO 2: Este código tienes que colocarlo al final del artículo. Es importante que sea el último código de tu entrada; de lo contrario, podría generarte problemas.
<script>mbtTOC2();</script>Si todo sale bien, la tabla de contenido debería mostrar una lista ordenada de todos tus títulos y subtítulos. Por último, no olvides actualizar los cambios en tu entrada.
¡Ayuda! La tabla de contenido no muestra mis títulos.
Si la tabla de contenidos no está mostrando tus títulos ni subtítulos, debes asegurarte de que los H2 y H3 estén bien colocados dentro de tu blog. Ingresa a la vista HTML de tus artículos y verifica que los encabezados tengan la siguiente estructura:
<h2 style="text-align: left;">NOMBRE DEL TITULO</h2>
<h3 style="text-align: left;">NOMBRE DEL SUBTITULO</h3>
Tanto la etiqueta H de apertura como la etiqueta H de cierre deben estar en la misma línea de código.
¿Qué te ha parecido esta información!
Este artículo es totalmente honesto y con la idea central de que todo el que quiera implementar una tabla de contenidos en Blogger puede hacerlo sin ningún problema, siempre aconsejándolos. ¿Qué opinas de mi artículo? Si te gustó mi artículo, te invito a compartirlo en tus redes sociales preferidas para ayudarme a aportar valor a todo el que quiera aprender y siempre mostrar información de calidad.
