Una tabla de contenido en un blog es una lista estructurada de los temas o secciones principales que se encuentran en un artículo o entrada de blog, junto con los enlaces directos a esas secciones específicas. La tabla de contenido sirve como una guía rápida para los lectores, permitiéndoles navegar fácilmente por el contenido y acceder directamente a las secciones que les interesan.
💹Facilita la navegación: Los lectores pueden saltar directamente a la sección que más les interesa sin tener que desplazarse por todo el artículo.
💹Mejora la legibilidad: Una tabla de contenido ayuda a organizar y estructurar la información, facilitando la comprensión del contenido general del artículo.
💹Aumenta la retención de lectores: Si los lectores pueden encontrar rápidamente la información que están buscando, es más probable que se queden y lean el artículo completo.
💹Beneficia el SEO: Una tabla de contenido bien estructurada con enlaces internos puede mejorar la indexación de las páginas por parte de los motores de búsqueda.
TAMBIÉN PUEDES VER: Descarga y Personaliza: La Guía Completa para instalar Plantillas en Blogger
Como crear una tabla de contenido en Blooger
Crear una tabla de contenido en Blogger es relativamente sencillo. Aquí hay una guía paso a paso:
Accede a tu panel de control de Blogger:
👨💻Ingresa a tu cuenta de Blogger en https://www.blogger.com
👨💻Selecciona el blog para el que deseas agregar la tabla de contenido.
👨💻Luego nos vamos a la Configuración HTML de tu plantilla en General.
- Para ello nos vamos a la pestaña Temas, luego damos en la pestañita que esta a lado de Personalizar.
- Elegimos la opción Editar HTML, al dar clic nos abrirá la plantilla de codigos de nuestro Blog en general. Es aquí donde pegaremos el primero código.
Pegado de código en Plantilla HTML de Blogger
<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>
Añadir el código CSS en la plantilla principal HTML
/*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}
Reemplazando código
<div id="post-toc"><data:post.body/></div>
Crear y Mostrar Tabla o contenido en la entrada
<div class="mbtTOC2"> <button>Tabla de contenido
<span>[<a id="Tog"
onclick="mbtToggle2()">Ocultar</a>]</span></button>
<div id="mbtTOC2"></div> </div>
<script>mbtTOC2();</script>
En términos prácticos, la tabla de contenido suele ubicarse al principio del artículo, justo después de la introducción, para que los lectores puedan acceder fácilmente a ella. También puede incluirse en la barra lateral o en otro lugar visible para garantizar una navegación sencilla. En algunos blogs, la tabla de contenido se genera automáticamente con complementos o funciones específicas del sistema de gestión de contenidos (CMS) que esté utilizando el blog.
TAMBIÉN PUEDES VER
▷ Descarga y Personaliza: La Guía Completa para instalar Plantillas en Blogger
Publicar un comentario