Como instalar tabla de contenidos en Blogger

Como instalar tabla de contenidos en Blogger

Cuando el texto de un articulo es demasiado extenso lo ideal es colocar al inicio del post un indice de contenido, el cual guía al visitante sobre todo el contenido y le facilita la lectura.

Como implementar una tabla o indice de contenidos en blogger

Lo primero que vamos hacer es darle estilo a la tabla de contenidos con algo de CSS, para lo cual buscamos la etiqueta ]]></b:skin> y antes de ella pegamos el siguiente fragmento de código.


 /*=====================================
= Indice (Table of Contents: TOC)
=====================================*/

/* Spoiler */
.spoiler {
  border: 1px solid #008bbe;
  border-radius: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: rgb(226, 242, 242);
}
.spoiler-toggle {
  font-weight: bold;
  cursor: default;
  padding: 5px;
  font-size: 12px;
  color: #333;
}
.spoiler-text {
  padding: 5px;
}

/* TOC */

#toc {
 list-style: none;
 margin-bottom: 20px;
}
#toc li {
 background: url(https://2.bp.blogspot.com/-8Yjv2SFphvc/WV-FoSnJJyI/AAAAAAAAFBM/MO8HAd35kMkkoB1j7OxHHZwnX3-i0MvywCLcBGAs/s1600/dot.gif) repeat-x bottom left;
 overflow: hidden;
 padding-bottom: 2px;
}
#toc a,
#toc span {
 display: inline-block;
    background: rgb(226, 242, 242);
 position: relative;
 bottom: -4px;
}
#toc a {
 float: right;
 padding: 0 0 3px 2px;
}
#toc span {
 float: left;
 padding: 0 2px 3px 0;
}

#wrapper {
 text-align: left;
 margin: 1em auto;
 width: 80%;
    color: #008bbe;
}
 
 

Como crear una tabla de contenidos para tus post en blogger


tabla-indice-de-contenidos-toc-blogger

Luego añadimos el script que ejecutara la expancion y contracción de la tabla de contenidos en nuestra plantilla de blogger. Buscamos el cierre de head "</head>" y antes de ella pegamos nuestro script.

 
<!-- script spoiler -->
<script type='text/javascript'>
//<![CDATA[

$(function(){
    $('.spoiler-text').hide();
    $('.spoiler-toggle').click(function(){
        $(this).next().animate({height: 'toggle'});
        if ($(this).html() == '[+/-] Ver / Ocultar Indice'){
            $(this).html('[+/-] Ver / Ocultar Indice');
        }
        else{
            $(this).html('[+/-] Ver / Ocultar Indice');
    }
    }); // end spoiler-toggle
}); // end document ready

//]]>
</script>
<!-- script spoiler --> 

Convierte tu blog en una máquina de ventas

Suscríbete y descubre cómo vender productos y servicios a través de tu blogger sin morir en el intento.
  • Multiplica tus ingresos aprovechando al máximo tu blogger.
  • Comienza a generar tráfico cualificado y de interés para tu oferta.
  • Convierte tus visitas en clientes gracias a un blog optimizado.

Tus datos están 100% seguros.

Cómo instalar la tabla de contenidos en blogger

Por ultimo solo debes incrustar el siguiente fragmento de código en la parte superior de tus entradas, así el visitante de tu blog podrá navegar por el contenido de tu post sin problemas o simplemente leer lo que mas le interese de tu indice de contenidos.


<div class="spoiler">
            <div class="spoiler-toggle">[+/-] Ver / Ocultar Indice</div>
            <div class="spoiler-text">
<div id="wrapper">
 <h3>Navigation</h3>
 <ul id="toc">
  <li><span>Introduction</span> <a href="#">Chapter 1</a></li>
  <li><span>Storm clouds looming</span> <a href="#">Chapter 2</a></li>
  <li><span>Sun breaks</span> <a href="#">Chapter 3</a></li>
  <li><span>Lost and confused</span> <a href="#">Chapter 4</a></li>
  <li><span>The pot of gold</span> <a href="#">Chapter 5</a></li>
  <li><span>Nom nom nom</span> <a href="#">Chapter 6</a></li>
 </ul>
 <p>Navegación HTML/CSS increíblemente simple, ligera y válida (Tabla de contenido). <a href="http://www.adaptacionesweb.com/p/indice-de-contenido-toc-prueba.html" title="Indice funcionando al 100%" target="_blank" >Indice funcionando al 100%</a> & <a href="http://5thirtyone.com/archives/776" title="How-to create a Table of Contents Navigation" rel="nofollow" target="_blank" >Fuente</a>.</p>
</div>
</div>
</div>
 
 

Espero que este truco te sea de mucha ayuda a la hora de publicar artículos muy extensos en tu bitácora online blogger, puedes ver como funciona la tabla si clicas en el siguiente enlace.


Si tienes problemas al implementar la tabla de contenidos en tu blogger, no dudes en comentar y con gusto te doy una mano. Por el contrario quieres que yo la implemente por ti porque no tienes tiempo ni quieres hacerlo...solo debes acceder a mi OFERTA LOW COST.

Compártelo con tus amigos. ¡GRACIAS!
Publicado por: Vicente Espinoza

Puedo hacerlo yo para ti, porque no tienes tiempo ni ganas: ¡Contrátame Aquí!
O puedo explicarte como crear un sitio web completamente dinámico sin ser un experto en programación web. ¡Suscríbete Ahora!

Mentoría blogging 1:1 Únete Ya!

¿Necesitas ayuda?