¿Qué es una tabla de contenidos o Índice?
Las tablas de contenido también conocida por sus siglas en ingles TOC
(Table Of Contents) 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 hablaran.
¿Cuándo debo utilizar un Índice 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 articulo para al final darse cuenta 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 un índice.
Insertar una Tabla de contenidos en Blogger
Muchos piensan que en Blogger no se puede crear una TOC fácilmente pero
hoy les demostrare todo lo contrario. Les mostrare como 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 MyBloggerTricks.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 pegaran en la parte
superior el siguiente código CSS.
/*Tabla de contenido | Plugin V2.0 by MyBloggerTricks*/
.mbtTOC2{
border: 1px solid #8e8e8e; /*Color de Borde*/
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: 50%; /*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 a {
color:#000; /*Color del titulo principal*/
text-decoration:none;
font-size:20px;
text-transform:capitalize;
}
.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 deje indicado cual 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/> si
ese es tu caso debe 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 tu 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.
➽ CODIGO 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>
➽ CODIGO 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 ultimo 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: center;">NOMBRE DEL TITULO</h2>
<h3 style="text-align: center;">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? ¡COMENTA!
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? ¡Coméntame cualquier duda o sugerencia al respecto del tema!
Si te gusto 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 en el mundo del diseño web.