¿Te gustaría que tus artículos de blogger, muestren una tabla de contenidos a tus visitantes y de forma automática?
Si tu respuesta es positiva, haz llegado al lugar correcto.
En este articulo te detallare paso a paso como agregar esta función a tu
blog de blogger de forma muy sencilla y sobre todo, gratis como nos gusta.
Pero antes de empezar, veamos algunos datos básicos:
¿Que es una tabla de contenidos?
La tabla de contenido es una lista organizada de los títulos, y subtítulos,
de un post o articulo de una pagina web. Los lectores al mirar la tabla de
contenidos pueden comprender de inmediato cómo está organizado el post de un
blog y podrán acceder a la información de forma mas fácil y rápida.
¿Para que sirve una tabla de contenidos?
Como ya mencionamos hace un momento, una tablas de contenido ayuda a los
lectores o clientes de nuestro blog o sitio web, tener una idea clara de que
trata cada publicación, y les da la facilidad de llegar al contenido que
estan buscando de forma mas optima.
Tenemos que recordar que un usuario de nuestra web, esta buscando un
contenido en concreto y si le damos las facilidades de encontrar lo que
busca, estará contento y seguirá regresando y consumiendo mas del contenido
que tenemos publicado en nuestra web.
¿Blogger no trae por defecto esta función?
Es una pena que no, realmente seria muy bueno si la plataforma blogger nos
diera la opción con algún widget colocar tablas de contenido de forma
automática en nuestros artículos. En la plataforma Wordpress podemos colocar
esta función de manera sencilla usando o instalando plugins que hacen todo
el trabajo.
Aqui en blogger debemos nosotros mismo hacer algunas configuraciones para
obtener una buena y bonita tabla de contenidos.
Agregar tabla de contenidos en Blogger
Es hora de empezar con la implementación de nuestra tabla de contenidos en
blogger y para eso, debemos seguir estos sencillos pasos:
Primer paso: Lo primero que debemos hacer es ir a nuestro blog en la
sección de plantilla y "EDITAR HTML", y dentro de la etiqueta <head>
</head> colocaremos en siguiente código:
<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>
/*Tabla de contenido | Plugin V2.0 by MyBloggerTricks*/
.mbtTOC2{
border: 1px solid #54b2e9; /*Border*/
border-radius: 5px;
box-shadow: 0px 0px 3px 1px #ddd; /*Sombra*/
background-color: #dbebf5; /*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;
}
.mbtTOC2 li{margin:10px 0; }
.mbtTOC2 li a {
color:#EA1414; /*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 los
colores, los bordes y los diseños CSS al estilo que tu quieras, si no
sabes de códigos es mejor dejarlo como esta.
Tercer paso: Tenemos que buscar la siguiente etiqueta dentro de la
plantilla HTML <data:post.body/>, una vez la encontremos la
seleccionamos y la reemplazamos, por el siguiente código y guardamos:
Ya una vez hecho esto terminamos en la plantilla HTML y estamos listos
para mostrar nuestra tabla de contenidos en las entradas.
Mostrar tabla de contenidos en las entradas
Ahora que ya añadimos los códigos en la plantilla solo debemos colocar el
código de las tablas en cada entrada que deseamos mostrar dicha
herramienta. Y para eso haremos lo siguiente:
Vamos a nuestra entrada y colocamos en vista de HTML, luego introducimos
el siguiente código, donde se mostrara la tabla de contenidos:
<div class="mbtTOC2"> <button>Tabla de contenido
<span>[<a id="Tog"
onclick="mbtToggle2()">Ocultar</a>]</span></button>
<div id="mbtTOC2"></div> </div>
Y para finalizar debemos colocar este pequeño fragmento de código en la
parte final de nuestro post y todo quedara listo:
<script>mbtTOC2();</script>
Nota: Recuerda que para que nuestra tabla de contenidos funciones,
debemos colocar correctamente los títulos y subtítulos en nuestra
redacción, de lo contrario, no funcionara correctamente la tabla de
contenidos.
Ahora cuéntanos en los comentarios si te esta guía te funciono, o si
tienes algún error, cual es ese error que no te deja completar el
proceso.
