¿Te gustaría hacer una tabla de contenidos en Blogger? Llegaste al sitio correcto, en este artículo te mostrare como crear una Tabla de Contenidos HTML sencilla pero profesional y lo mejor de todo es que funciona de forma automática. Abajo veras un Ejemplo de lo que lograras con este artículo.
¿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 especificas 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 Java Script.
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 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 es momento de añadir los códigos CSS, busca el siguiente código ]]></b:skin> y arriba de él, pega los siguientes estilos/css:
/*Tabla de contenido | Plugin V2.0 by MonetizaConAbrahan*/
.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}
Si tienes conocimientos básicos de CSS puedes modificar los códigos y darle el estilo que más te guste a tu Índice de Contenidos
Paso 3: ahora debes buscar el código <data:post.body/> y reemplazarlo por <div id="post-toc"><data:post.body/></div>
Eso sería todo por esta parte, ahora falta lo más importarte, hacer que se muestre la Tabla de Contenido en cada entrada de nuestro blog.
Mostar Tabla de Contenido en una Entrada
Lo primero que tienes que hacer es cambiar la vista de edición de tus entradas a Vista HTML allí tendrás que ubicar el lugar donde quieres que aparezca tu Tabla de Contenidos y pegar las siguientes líneas de código:
<div class="mbtTOC2">
<button>Tabla de contenido <span>[<a id="Tog" onclick="mbtToggle2()">Ocultar</a>]</span></button>
<div id="mbtTOC2"></div>
</div>Lo ideal es que coloques este código después de los primeros párrafos introductorios a tu artículo. Por ultimo bajas hasta el final de tu entrada y pegas este código:
<script>mbtTOC2();</script>Eso sería todo, recuerda que todo este proceso debes hacerlo en la vista de edición HTML de tus entradas de Blogger para que pueda surtir efecto. Si todo salió bien debería aparecer un Índice de contenido Profesional como el que viste al inicio de este artículo. De lo contrario entonces mira el siguiente Video Tutorial.
