-->
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 --> 


Códigos HTML 100% Optimizados

Suscríbete y recibe directamente en tu email, los mejores códigos HTML que necesitas para editar tu página web.








He leído y estoy de acuerdo con la Política de Privacidad


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="https://legal.site3cero.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.




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!

Programa Mentoría 1&1 Únete Ya!

Comentarios: