Crear una Tabla de contenido por ETIQUETA

Milton Rodriguez Lopez 1/08/2025

Para crear una tabla de contenido o Indice del contenido por etiquetas debes seguir los siguientes pasos. 

Paso 1: Abrir Blogger y Crear una página estática o Entrada con el nombre Indice o Tabla de contenido.

Paso 2: Abrir Vista HTML, y agregar el código: HTML, CSS, JS.

Paso 2.1: Agregar el código: HTML


        
html

        

            
        

     
<!-- Código HTML -->
  <h3>Índice del contenido:  </h3>
<div class="bloading">   <span class="loading">Cargando...</span>  </div>
<div id="feed"></div>

Paso 2.2: Agregar el código: CSS 


        
html

        

            
        

     
 <!-- Código CSS -->
<style>
  div.bsitemap {font-family: arial; width: 99%; border: 1px solid #ccc; background: #ecedeef1; margin: 0;padding: 0; } 
  /* Botones */
  div.boton > a {display: block; font-size: 20x; font-weight: 600; text-transform: uppercase; line-height: 1.6; text-decoration: none; background: #333435; color: #fff; margin: 2px 0px; padding:3px 5px; border-radius: 10px; }
  /* Menu desplegable */
 div.boton ul, div.boton ul>li {list-style-type: none; margin: 0;padding: 0 20px;}  
 div.boton ul li > a {display: inline-block; width: 95%; font-size: 17px; font-weight: 300; text-transform: none; line-height:1.6; color:#181616;  padding: 2px 5px; }
  
/* Símbolo elemento no desplegable */
div.bsitemap .boton a:before {content: "\261B\00A0";width: 28px; display: inline-block; vertical-align: top;}
/* Símbolo elemento desplegable cerrado */
div.bsitemap .desplegable a:before {content: "\25BA\00A0"; color: #e5e917; }
/* Símbolo elemento desplegable abierto */
div.bsitemap .desplegable.activa > a:before {content: "\25BC\00A0"; color: #ec0e06; text-decoration-color: #ec0e06; }
div.bsitemap .desplegable ul li a:before, .desplegable.activa ul li a:before {content: none;}
div.bsitemap ul {display:none;}
div.bsitemap ul a {padding-left: 40px;}
div.bsitemap div li a:hover {font-size: 19px; background: #0f0338; color: #e5e917; text-decoration-color: #08a703; }
/* Estilo marca NUEVO (último mes) */
.bnuevo {color: red;font-style: italic;font-weight: bold;}
.bnuevo:after {content:" Nuevo";margin-left: 10px;padding: 2px 8px;color: white;background:red;font-style: italic;font-weight: bold;font-size: 80%;border-radius: 4px;}
/* Símbolo animado cargador */
.bloading {display: block;width: 80px;height: 80px;margin: 10px auto;font-size: 10px;text-align: center;border-width: 30px;border-radius: 50%;-webkit-animation: spin 1s linear infinite;animation: spin 1s linear infinite;border-style: double;border-color: #666 transparent;}
.bloading:before {content: "CARGANDO";font-weight: bold;line-height: 80px;color: #990000;}
@-webkit-keyframes spin {100% {-webkit-transform: rotate(359deg);}}
@keyframes spin {100% {transform: rotate(359deg);}}
</style>

Paso 2.3: Agregar el codigo de la libreria externa de Javascript. 


        
html

        

            
        

     
 <!-- Libreria externa necesaria para que funcione -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Paso 2.4: Agregar el codigo Javascript personalizado y sustituir la URL, con el de su blog. // Dirección de su Blog URL


        
html

        

            
        

     
 <!-- Código javascript -->
<script type='text/javascript'>  // Parámetros configurables
	// Dirección de su Blog URL
  var feed = 'https://desarrolloweb-parte1.blogspot.com/feeds/posts/default';
  // Etiquetas a  excluir del índice  
  var exclusion = ['etiqueta1','etiqueta2','X-Topic','etc'];
  var cajasalida = $('#feed'); // Nombre caja para insertar posts
$( document ).ready(function() { 
  var postsxfeed = 150; // Tope entradas que admite el feed
  // Parte ejecución
  var leermaximo = 10000; // Máximo de entradas a leer/mostrar
  var posts = new Array();
  $.getJSON(feed + '?alt=json&callback=?').done(function(data) {
    var longfeed = parseInt(data.feed.openSearch$totalResults.$t);
    if (leermaximo < longfeed) {
      longfeed = leermaximo;
    }
    if (Math.ceil(longfeed / postsxfeed) < 2) {postsxfeed = longfeed-1;}
    var peticiones = Math.ceil(longfeed / postsxfeed);
    var ajax = [];
    for (i = 0; i < peticiones; i++) {
        ajax.push(leerfeeds(i));
    }

    function leerfeeds(id) {
      var startindex = (i * postsxfeed) + 1;
      var maxresults = postsxfeed;
      if (i == (peticiones - 1)) {
        maxresults = leermaximo - (postsxfeed * i);
      }
      var url = feed + '?orderby=published&start-index=' + startindex + '&max-results=' + maxresults + '&alt=json&callback=?';
      return $.getJSON(url);
    }
    $.when.apply($, ajax).done(function(data) {
      var obj = [];
      var orden = 0;
      for (var i = 0; i < arguments.length; i++) {
        obj.push(arguments[i][0]);
      }
      for (i = 0; i < arguments.length; i++) {
        $.each(
          obj[i].feed.entry || [],
          function(i, e) {
            var etiquetas = [];
            if (e.category) {
              for (var k = 0; k < e.category.length; k++) {
                var incluir = true;
                for (var x = 0; x < exclusion.length; x++) {
                  if (e.category[k].term == exclusion[x]) {
                    incluir = false;
                    break;
                  }
                }
                if (incluir) {
                  posts[orden] = new Array();
                  // Etiquetas [x][0]
                  posts[orden][0] = e.category[k].term;
                  // Fecha [x][1]
                  posts[orden][1] = new Date(e.published.$t || Date.now());
                  // Titulo [x][2]
                  posts[orden][2] = (e.title.$t || '');
                  // Link [x][3]
                  posts[orden][3] = (e.link || []).slice(-1)[0].href;
                  orden++;
                }
              }
            } else {
                  posts[orden] = new Array();
              posts[orden][0] = 'Varios';
              posts[orden][1] = new Date(e.published.$t || Date.now());
              posts[orden][2] = (e.title.$t || '');
              posts[orden][3] = (e.link || []).slice(-1)[0].href;
              orden++;
            }
          });
      }
      posts.sort(function(a, b) {
        // Ordenar ETIQUETA A-Z
        if (a[0] > b[0]) return 1;
        if (a[0] < b[0]) return -1;
        // Ordenar ETIQUETA Z-A
        //if (a[0] > b[0]) return -1;
        //if (a[0] < b[0]) return 1;
        // Ordenar POST por titulo A-Z
        if (a[2] > b[2]) return 1;
        if (a[2] < b[2]) return -1;
        // Ordenar POST por titulo Z-A
        //if (a[2] > b[2]) return -1;
        //if (a[2] < b[2]) return 1;
        // Ordenar POST por fecha Reciente-Antigua
        //if (a[1] < b[1]) return 1;
        //if (a[1] > b[1]) return -1;
        return 0;
      });
      var actual = '';
      var anterior = '';
      var salida = '';
      var cierre = '';
      cajasalida.append('<div class="bsitemap"></div>');
      for (var j = 0; j < posts.length; j++) {
        actual = posts[j][0];
        if (j > 0) {
          anterior = posts[j - 1][0];
          cierre = '</ul></div>';
        }
        // Etiqueta / lista
        if (actual != anterior) {
          salida += cierre + '<div class="boton"><a href="javascript:void();">' + posts[j][0] + '</a><ul>';
        }
        var timestamp = new Date().getTime() - (30 * 24 * 60 * 60 * 1000);
        if (timestamp <= posts[j][1]) {
          clase = 'bnuevo';
        } else {
          clase = 'bantiguo';
        }
        salida += '<li><a class="' + clase + '" href="' + posts[j][3] + '">' + posts[j][2] + '</a></li>';
      }
      salida += '</ul></div>';
      $('.bloading').remove();
      $('div.bsitemap').append(salida);
      $('div.bsitemap div.boton:has(ul)').addClass('desplegable');
      $('div.bsitemap > div.boton a').click(function() {
        var comprobar = $(this).next();
        $('div.bsitemap div.boton').removeClass('activa');
        $(this).closest('div.boton').addClass('activa');
        if ((comprobar.is('ul')) && (comprobar.is(':visible'))) {
          $(this).closest('div.boton').removeClass('activa');
          comprobar.slideUp('normal');
        }
        if ((comprobar.is('ul')) && (!comprobar.is(':visible'))) {
          $('div.bsitemap ul:visible').slideUp('normal');
          comprobar.slideDown('normal')
        }
      });
    });
  });
    });
</script>


CÓDIGO COMPLETO: HTML, CSS, JS. Solo de crear la página INDICE-Contenido, copiar, pegar y sustituir la URL, con el de su blog. // Dirección de su Blog URL


        
html

        

            
        

     
 <!-- HTML -->
<div class="bloading"></div>
<div id="feed"></div> 

<!-- CSS -->
<style>
  div.bsitemap {font-family: arial; width: 99%; border: 1px solid #ccc; background: #ecedeef1; margin: 0;padding: 0; } 
  /* Botones */
  div.boton > a {display: block; font-size: 20x; font-weight: 600; text-transform: uppercase; line-height: 1.6; text-decoration: none; background: #333435; color: #fff; margin: 2px 0px; padding:3px 5px; border-radius: 10px; }
  /* Menu desplegable */
 div.boton ul, div.boton ul>li {list-style-type: none; margin: 0;padding: 0 20px;}  
 div.boton ul li > a {display: inline-block; width: 95%; font-size: 17px; font-weight: 300; text-transform: none; line-height:1.6; color:#181616;  padding: 2px 5px; }
  
/* Símbolo elemento no desplegable */
div.bsitemap .boton a:before {content: "\261B\00A0";width: 28px; display: inline-block; vertical-align: top;}
/* Símbolo elemento desplegable cerrado */
div.bsitemap .desplegable a:before {content: "\25BA\00A0"; color: #e5e917; }
/* Símbolo elemento desplegable abierto */
div.bsitemap .desplegable.activa > a:before {content: "\25BC\00A0"; color: #ec0e06; text-decoration-color: #ec0e06; }
div.bsitemap .desplegable ul li a:before, .desplegable.activa ul li a:before {content: none;}
div.bsitemap ul {display:none;}
div.bsitemap ul a {padding-left: 40px;}
div.bsitemap div li a:hover {font-size: 19px; background: #0f0338; color: #e5e917; text-decoration-color: #08a703; }
/* Estilo marca NUEVO (último mes) */
.bnuevo {color: red;font-style: italic;font-weight: bold;}
.bnuevo:after {content:" Nuevo";margin-left: 10px;padding: 2px 8px;color: white;background:red;font-style: italic;font-weight: bold;font-size: 80%;border-radius: 4px;}
/* Símbolo animado cargador */
.bloading {display: block;width: 80px;height: 80px;margin: 10px auto;font-size: 10px;text-align: center;border-width: 30px;border-radius: 50%;-webkit-animation: spin 1s linear infinite;animation: spin 1s linear infinite;border-style: double;border-color: #666 transparent;}
.bloading:before {content: "CARGANDO";font-weight: bold;line-height: 80px;color: #990000;}
@-webkit-keyframes spin {100% {-webkit-transform: rotate(359deg);}}
@keyframes spin {100% {transform: rotate(359deg);}}
</style>


<!-- Libreria externa necesaria para que funcione -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- javascript -->
<script type='text/javascript'>
  // Parámetros configurables
  var feed = 'https://desarrolloweb-parte1.blogspot.com/feeds/posts/default';
  // Etiquetas a  excluir del índice  
  var exclusion = ['etiqueta1','etiqueta2','X-Topic','etc'];
  var cajasalida = $('#feed'); // Nombre caja para insertar posts
$( document ).ready(function() { 
  var postsxfeed = 150; // Tope entradas que admite el feed
  // Parte ejecución
  var leermaximo = 10000; // Máximo de entradas a leer/mostrar
  var posts = new Array();
  $.getJSON(feed + '?alt=json&callback=?').done(function(data) {
    var longfeed = parseInt(data.feed.openSearch$totalResults.$t);
    if (leermaximo < longfeed) {
      longfeed = leermaximo;
    }
    if (Math.ceil(longfeed / postsxfeed) < 2) {postsxfeed = longfeed-1;}
    var peticiones = Math.ceil(longfeed / postsxfeed);
    var ajax = [];
    for (i = 0; i < peticiones; i++) {
        ajax.push(leerfeeds(i));
    }

    function leerfeeds(id) {
      var startindex = (i * postsxfeed) + 1;
      var maxresults = postsxfeed;
      if (i == (peticiones - 1)) {
        maxresults = leermaximo - (postsxfeed * i);
      }
      var url = feed + '?orderby=published&start-index=' + startindex + '&max-results=' + maxresults + '&alt=json&callback=?';
      return $.getJSON(url);
    }
    $.when.apply($, ajax).done(function(data) {
      var obj = [];
      var orden = 0;
      for (var i = 0; i < arguments.length; i++) {
        obj.push(arguments[i][0]);
      }
      for (i = 0; i < arguments.length; i++) {
        $.each(
          obj[i].feed.entry || [],
          function(i, e) {
            var etiquetas = [];
            if (e.category) {
              for (var k = 0; k < e.category.length; k++) {
                var incluir = true;
                for (var x = 0; x < exclusion.length; x++) {
                  if (e.category[k].term == exclusion[x]) {
                    incluir = false;
                    break;
                  }
                }
                if (incluir) {
                  posts[orden] = new Array();
                  // Etiquetas [x][0]
                  posts[orden][0] = e.category[k].term;
                  // Fecha [x][1]
                  posts[orden][1] = new Date(e.published.$t || Date.now());
                  // Titulo [x][2]
                  posts[orden][2] = (e.title.$t || '');
                  // Link [x][3]
                  posts[orden][3] = (e.link || []).slice(-1)[0].href;
                  orden++;
                }
              }
            } else {
                  posts[orden] = new Array();
              posts[orden][0] = 'Varios';
              posts[orden][1] = new Date(e.published.$t || Date.now());
              posts[orden][2] = (e.title.$t || '');
              posts[orden][3] = (e.link || []).slice(-1)[0].href;
              orden++;
            }
          });
      }
      posts.sort(function(a, b) {
        // Ordenar ETIQUETA A-Z
        if (a[0] > b[0]) return 1;
        if (a[0] < b[0]) return -1;
        // Ordenar ETIQUETA Z-A
        //if (a[0] > b[0]) return -1;
        //if (a[0] < b[0]) return 1;
        // Ordenar POST por titulo A-Z
        if (a[2] > b[2]) return 1;
        if (a[2] < b[2]) return -1;
        // Ordenar POST por titulo Z-A
        //if (a[2] > b[2]) return -1;
        //if (a[2] < b[2]) return 1;
        // Ordenar POST por fecha Reciente-Antigua
        //if (a[1] < b[1]) return 1;
        //if (a[1] > b[1]) return -1;
        return 0;
      });
      var actual = '';
      var anterior = '';
      var salida = '';
      var cierre = '';
      cajasalida.append('<div class="bsitemap"></div>');
      for (var j = 0; j < posts.length; j++) {
        actual = posts[j][0];
        if (j > 0) {
          anterior = posts[j - 1][0];
          cierre = '</ul></div>';
        }
        // Etiqueta / lista
        if (actual != anterior) {
          salida += cierre + '<div class="boton"><a href="javascript:void();">' + posts[j][0] + '</a><ul>';
        }
        var timestamp = new Date().getTime() - (30 * 24 * 60 * 60 * 1000);
        if (timestamp <= posts[j][1]) {
          clase = 'bnuevo';
        } else {
          clase = 'bantiguo';
        }
        salida += '<li><a class="' + clase + '" href="' + posts[j][3] + '">' + posts[j][2] + '</a></li>';
      }
      salida += '</ul></div>';
      $('.bloading').remove();
      $('div.bsitemap').append(salida);
      $('div.bsitemap div.boton:has(ul)').addClass('desplegable');
      $('div.bsitemap > div.boton a').click(function() {
        var comprobar = $(this).next();
        $('div.bsitemap div.boton').removeClass('activa');
        $(this).closest('div.boton').addClass('activa');
        if ((comprobar.is('ul')) && (comprobar.is(':visible'))) {
          $(this).closest('div.boton').removeClass('activa');
          comprobar.slideUp('normal');
        }
        if ((comprobar.is('ul')) && (!comprobar.is(':visible'))) {
          $('div.bsitemap ul:visible').slideUp('normal');
          comprobar.slideDown('normal')
        }
      });
    });
  });
    });
</script>
Tags: