¿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.
No me funciona :c este es el enlace de mi blog: https://josetutorialespc.blogspot.com/2021/02/atajos-con-el-teclado-para-windows.html espero tu respuesta
ResponderBorrarHola, corrige el CODIGO 2. El que va al final del articulo creado. Tenia un error pero ya lo edite.
BorrarGracias Amigo
ResponderBorrarExcelente articulo mano eres un genio me funciono muy bien en mi blog de prueba. Gracias ahora lo puedo aplicar en mi siguiente blog.
ResponderBorrarNo hay de que amigo.
BorrarHola, cómo estás? Antes que nada te quiero agradecer porque me estás ayudando muchísimo con cada uno de tus artículos. Pero necesito de tu ayuda, acabo de seguir los pasos que nos indicas (no sé de programación), logré insertar la tabla de contenidos pero parte del código se "ve" arriba de la cabecera, soy super nueva en eso. El blog que estoy armando es https://tribudeemprendedoras.blogspot.com/. Me podías ayudar a solucionarlo???
ResponderBorrarHola, acabo de ver tu blog y me di cuenta que personalizaste bastante tu tabla de contenidos, te felicito porque a pesar de ser nueva en esto lograste darle un estilo original.
BorrarNO te preocupes que ya lo pude solucionar! Graciaaassss y abrazos desde Argentina!
ResponderBorrarHola amiga desde Venezuela. Por si no lo has solucionado con el permiso del profe Abraham aquí te tengo la solución en mi blog de prueba, solo de copiar y pegar https://nje-isf.blogspot.com/2021/03/con-este-articulo-intentare-guiarlas-en.html
BorrarEspero que te guste.
ResponderBorrarAbraham Ortiz una pregunta, a mi solo me aparecian algunos de mis títulos en la tabla de contenido, entonces compare la estructura de los h2 que usted menciona y observe que yo los tenia de otra forma, así que lo que hice fue volver a escribirlos y me funciono, entonces me pregunto porque es que el código inicialmente yo lo tenia malo tendra algo que ver el hecho de que muchas veces escribo el contenido en word y despues lo pego en blogger
ResponderBorrarHola José, si esa puede se una de las razones pero por lo general si queremos que la estructura HTML de nuestros artículos quede impecable debemos hacer una limpieza manualmente. Blogger de forma automática a veces coloca códigos de forma innecesaria.
BorrarHola Abraham, quisiera saber cómo haces esos cuadros donde pones los códigos, quisiera poder poner unos en mi blog para frases celebres y que sea mas fácil para el usuario copiarlas.
ResponderBorrarhola en mi caso no se que esta mal que se duplica el contenido de los h2 y h3, se muestra el TOC pero me los duplica y no cuenta 1, 2, 3, solo muestra el numero 1 te dejo el enlace
ResponderBorrarhttps://bit.ly/2OQUuTW
espero me puedas guiar
muchas gracias por tu ayuda
No me sirvió, no me aparecen los títulos.
ResponderBorrarA mi tambien no me agarra y lo he hecho todo bien y nada
BorrarYo ya uso tablas de contenido en mi blog solo que yo empleaba enlaces internos, pero creo que tu método se ve mas fácil lo voy a probar
ResponderBorrarMe aparecen dos número por cada título. Como lo arreglo?
ResponderBorrarSolo con una pregunta: como le hago para que se ajuste a mi pantalla, es que solo se queda en el centro y distorsiona las letras.
ResponderBorrarGracias!!!
muchas gracias por sus consejos han sido muy utiles para mi. en esta ocasión no me aparece el contenido si aparece la tabla de contenido pero no muestra el contenido solo el botón de ocultar. me podrias colaborar wwww.henryhealmont.blogspot.com
ResponderBorrarhttps://henryhealmont.blogspot.com/2021/08/como-leer-partitura-para-guitarra-aprenda-a-leer-partituras-consejos-guia-.html
Borrarhay hay un ejemplo
Hola Abraham ¿tienes algún código para hacer un sitemap profesional?
ResponderBorrarPara que el desplazamiento sea un poco más animado y no salte de golpe hacia el título desde la tabla de contenidos, les recomiendo usar el siguiente código de CSS que puedes colocar dentro de la etiqueta style en el HTML de la entrada donde vaya a agregar la tabla de contenidos, puedes ver el archivo con enlace a google docs
ResponderBorrarhttps://docs.google.com/document/d/14Znmf9d_cizRP68JIV8h6y4tHrDl-eA40V4Wa2iavKI/edit?usp=sharing
Puedes verlo en acción, en el artículo de mi nuevo blog.
https://zonatvbox-store.blogspot.com/2021/09/que-debes-tener-en-cuenta-cuando-vayas.html
Si le das a cualquier ítem de la tabla de contenidos este te llevará hasta el contenido con una animación como si hicieras scroll con el mouse.
Espero que les sirva.. Saludos desde Colombia.
hermano que buen contenido
ResponderBorrarHola estoy empezando mi blog, no se como conseguir vistas me ayeda, pasen por mi blog por favor, CLIC AQUI, https://blogdeciudadesdelatecnologia.blogspot.com/
ResponderBorrarProbado y anda perfecto Abraham, ya le aplique mis modificaciones, así que gracias por compartirlo!
ResponderBorrar