Crear una Tabla de contenido por Categoria en Blogger

Paso 1: Para crear una Tabla de contenido por Etiqueta / Categoria, para las entradas de tu blog en Blogger, copia y pega el siguiente codigo HTML  en una Entrada o Pagina de tu blog, de blogger.


        html
        
            
        
     
<!-- Crear Tabla de contenido -->
<div class="tabla-contenidos">
  <div class="text-tabla">
     <b style="color: white;">Tabla de contenido por Etiqueta / Categoria </b>
  </div>
<div id="tabla-cont">
  <span class="loading">Cargando...</span>
  <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-c8oS6Z316otHEvTNYeVNaO8eADVf7zEVfrmW9flO7zKIjGEwMnQWmHip3JhPpjxGcK3ZBbK4UCmfBymCSYIiLwATz4LAKIB5HXZbJTqFoBJ-ahKtyASLotbiGJR3_w5BxsnbscUyss5bViQmQ3mMIPW8OeWeDcvbQOHbYYiZovU_ZgQNq3PJMHNYgZJ/s677/Tabla%20de%20contenido.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="268" data-original-width="677" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-c8oS6Z316otHEvTNYeVNaO8eADVf7zEVfrmW9flO7zKIjGEwMnQWmHip3JhPpjxGcK3ZBbK4UCmfBymCSYIiLwATz4LAKIB5HXZbJTqFoBJ-ahKtyASLotbiGJR3_w5BxsnbscUyss5bViQmQ3mMIPW8OeWeDcvbQOHbYYiZovU_ZgQNq3PJMHNYgZJ/s600/Tabla%20de%20contenido.png" width="600" /></a></div>
  </div>
</div>

Paso 2: Copiar y pegar el siguiente codigo javascript y luego sustituye la URL del blog blogUrl: "https://practica-blogz.blogspot.com/", // Dirección de su Blog URL


        html
        
            
        
     

<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "https://practica-blogz.blogspot.com/", // Dirección de su Blog URL
    containerId: "tabla-cont",
    activeTab: 1, 
    showDates: false, 
    showSummaries: false,
    numChars: 200, 
    showThumbnails: false, 
    thumbSize: 40, 
    noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", 
    monthNames: [ 
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ],
    newTabLink: true, 
    maxResults: 99999, 
    preload: 0, 
    sortAlphabetically: true, 
    showNew: 7, 
    newText: " - <em style='color:blue;'> Nuevo!</em>" 
};
    
</script>

Paso 3: Agregar los estilos CSS a la pagina o Entrada


        html
        
            
        
     
<style>
  .tabla-contenidos {
    background-color: #130757;
    max-width: 100%;
    border-radius: 12px;
    padding: 16px 24px;
    position: relative;
}
  .text-tabla {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: -.5px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Google Sans,arial,sans-serif;
    letter-spacing: .1px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    text-align: center;
}
  #tabla-cont {
  margin:0 auto;
  background-color:#fff;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#333;
    padding: 14px;
    border-radius: 8px;
}

#tabla-cont .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px Arial,Sans-Serif;
  color:white;
}

#tabla-cont ul,
#tabla-cont ol,
#tabla-cont li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabla-cont .toc-tabs {
  width:30%;
  float:left;
}

#tabla-cont .toc-tabs li a {
  display:block;
  display:inline;
  font:normal bold 12px/28px Arial,Sans-Serif;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#222;
  text-transform:uppercase;
  text-decoration:none;
  padding: 5px 12px;
  cursor:pointer;
}

#tabla-cont .toc-tabs li a:hover {
  background-color:#3f51b5;
  color:white;
}

#tabla-cont .toc-tabs li a.active-tab {
  background-color:#3f51b5;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  border-bottom: 4px solid #000;
}

#tabla-cont .toc-content,
#tabla-cont .divider-layer {
  width:70%;
  float:right;
  background-color:white;
  border-left:5px solid #3f51b5;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#tabla-cont .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}

#tabla-cont .panel {
  position:relative;
  z-index:5;
  font:normal normal 13px Arial,Sans-Serif;
}

#tabla-cont .panel li a {
    display: block;
   display:inline;
    position: relative;
    font-weight: bold ;
    font-size: 14px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    padding: 5px 9px;
    color: #222;
}

    #tabla-cont .panel  li {
  padding: 3px 8px;
}
  
  #tabla-cont .panel  li a:hover {
  background-color:#0f0a42;
  color:white;
  padding: 7px 12px;
}
  
#tabla-cont .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:13px;

  color:#666;
  float:right;
}

#tabla-cont .panel li .summary {
  display:block;
 
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #3f51b5;
  overflow:hidden;
}

#tabla-cont .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding: 5px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}

#tabla-cont .panel li:nth-child(even) {
}

#tabla-cont .panel li a:hover,
#tabla-cont .panel li a:focus,
#tabla-cont .panel li a:hover time,
#tabla-cont .panel li.bold a {
box-shadow: 5px 5px 25px 0px rgb(46 61 73 / 20%);
    border-radius: 0.375rem;
    transition: all 0.3s ease;
  outline:none;
}

#tabla-cont .panel li.bold a:hover,
#tabla-cont .panel li.bold a:hover time {
  background-color:#222;
}

@media (max-width:700px) {

  #tabla-cont .toc-tabs,
  #tabla-cont .toc-content {
    float:left;
    width:100%;
    display:block;
  }
  #tabla-cont .toc-tabs li {
    display:inline;
    float:left;
  }

  #tabla-cont .toc-content {
    border:none;
  }
  #tabla-cont .divider-layer,
  #tabla-cont .panel li time {
    display:none;
  }
}
</style>

Paso 4: Agregar el CDN o el código javascript para la estructuración y creación de la tabla de contenido:


        html
        
            
        
     
<!-- CDN tabla-cont.js -->
<script src="https://cdn.statically.io/gh/Ayudadeblogger/tabla-contenido/main/tabla-cont.js" type="text/javascript"></script>


        html
        
            
        
     
 <!-- Codigo JS tabla-cont.js -->
<script type="text/javascript">
var tabbedTOC_defaults = {
	blogUrl: "https://www.ayudadeblogger.com/", // Blog URL
	containerId: "tabla-cont", // Recipiente ID
	activeTab: 1, // El índice de pestaña activa predeterminado (predeterminado: la primera pestaña)
	showDates: false, // true para mostrar la fecha de publicación
	showSummaries: false, // true para mostrar los resúmenes de las publicaciones
	numChars: 200, // Número de caracteres de resumen
	showThumbnails: false, // True para mostrar las miniaturas de las publicaciones (no recomendado)
	thumbSize: 40, // Thumbnail size - Tamaño de miniatura
	noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // No thumbnail URL
	monthNames: [ // Array of month names - Matriz de nombres de meses
		"Januari",
		"Februari",
		"Maret",
		"April",
		"Mei",
		"Juni",
		"Juli",
		"Agustus",
		"September",
		"Oktober",
		"November",
		"Desember"
	],
	newTabLink: true, // Open link in new window?
	maxResults: 99999, // Maximum posts result
	preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
	sortAlphabetically: true, // `false` to sort posts by date
	showNew: false, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
	newText: " - <em style='color:red;'>Baru!</em>" // HTML for the "New!" text
};

for (var i in tabbedTOC_defaults) {
	tabbedTOC_defaults[i] = (typeof(tabbedTOC[i]) !== undefined && typeof(tabbedTOC[i]) !== 'undefined') ? tabbedTOC[i] : tabbedTOC_defaults[i];
}

function clickTab(pos) {
	var a = document.getElementById(tabbedTOC_defaults.containerId),
		b = a.getElementsByTagName('ol'),
		c = a.getElementsByTagName('ul')[0],
		d = c.getElementsByTagName('a');
	for (var t = 0; t < b.length; t++) {
		b[t].style.display = "none";
		b[parseInt(pos, 10)].style.display = "block";
	}
	for (var u = 0; u < d.length; u++) {
		d[u].className = "";
		d[parseInt(pos, 10)].className = "active-tab";
	}
}

function showTabs(json) {

	var total = parseInt(json.feed.openSearch$totalResults.$t,10),
		c = tabbedTOC_defaults,
		entry = json.feed.entry,
		category = json.feed.category,
		skeleton = "",
		newPosts = [];

	for (var g = 0; g < (c.showNew === true ? 5 : c.showNew); g++) {
		if (g == entry.length) break;
		entry[g].title.$t = entry[g].title.$t + (c.showNew !== false ? c.newText : '');
	}

	entry = c.sortAlphabetically ? entry.sort(function(a,b) {
		return (a.title.$t.localeCompare(b.title.$t));
	}) : entry;
	category = c.sortAlphabetically ? category.sort(function(a,b) {
		return (a.term.localeCompare(b.term));
	}) : category;

	// Build the tabs skeleton
	skeleton = '<span class="divider-layer"></span><ul class="toc-tabs">';
	for (var h = 0, cen = category.length; h < cen; h++) {
		skeleton += '<li class="toc-tab-item-' + h + '"><a href="javascript:clickTab(' + h + ');">' + category[h].term + '</a></li>';
	}
	skeleton += '</ul>';

	// Bulid the tabs contents skeleton
	skeleton += '<div class="toc-content">';
	for (var i = 0, cnt = category.length; i < cnt; i++) {
		skeleton += '<ol class="panel" data-category="' + category[i].term + '"';
		skeleton += (i != (c.activeTab-1)) ? ' style="display:none;"' : '';
		skeleton += '>';
		for (var j = 0; j < total; j++) {
			if (j == entry.length) break;
			var link, entries = entry[j],
				pub = entries.published.$t, // Get the post date
				month = c.monthNames, // Month array from the configuration
				title = entries.title.$t, // Get the post title
				summary = ("summary" in entries && c.showSummaries === true) ? entries.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,c.numChars) + '&hellip;' : '', // Get the post summary
				img = ("media$thumbnail" in entries && c.showThumbnails === true) ? '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="' + entries.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/") + '"/>' : '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="' + c.noThumb.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/") + '"/>', // Get the post thumbnail
				cat = (entries.category) ? entries.category : [], // Post categories
				date = (c.showDates) ? '<time datetime="' + pub + '" title="' + pub + '">' + pub.substring(8,10) + ' ' + month[parseInt(pub.substring(5,7),10)-1] + ' ' + pub.substring(0,4) + '</time>' : ''; // Formated published date
				
			for (var k = 0; k < entries.link.length; k++) {
				if (entries.link[k].rel == 'alternate') {
					link = entries.link[k].href; // Get the post URL
					break;
				}
			}
			for (var l = 0, check = cat.length; l < check; l++) {
				var target = (c.newTabLink) ? ' target="_blank"' : ''; // Open link in new window?
				// Write the list skeleton only if at least one of the post...
				// ... has the same category term with one of the current categories term list
				if (cat[l].term == category[i].term) {
					skeleton += '<li title="' + cat[l].term + '"';
					skeleton += (c.showSummaries) ? ' class="bold"' : '';
					skeleton += '><a href="' + link + '"' + target + '>' + title + date + '</a>'; 
					skeleton += (c.showSummaries) ? '<span class="summary">' + img + summary + '<span style="display:inline;clear:both;"></span></span>' : '';
					skeleton += '</li>';
				}
			}
		}
		skeleton += '</ol>';
	}

	skeleton += '</div>';
	skeleton += '<div style="clear:both;"></div>';
	document.getElementById(c.containerId).innerHTML = skeleton;
	clickTab(c.activeTab-1);

}

(function() {
	var h = document.getElementsByTagName('head')[0],
		s = document.createElement('script');
		s.type = 'text/javascript';
		s.src = tabbedTOC_defaults.blogUrl + '/feeds/posts/summary?alt=json-in-script&max-results=' + tabbedTOC_defaults.maxResults + '&orderby=published&callback=showTabs';
	if (tabbedTOC_defaults.preload !== "onload") {
		setTimeout(function() {
			h.appendChild(s);
		}, tabbedTOC_defaults.preload);
	} else {
		window.onload = function() {
			h.appendChild(s);
		};
	}
})();

</script>

Listo, Guardar la entrada o página del blog, y abrirlo en el navegador para observar la pagina web.

Código completo: HTML, CSS, JS. Solo de sustitir la URL del BLOG. blogUrl: "https://practica-blogz.blogspot.com/", // Dirección de su Blog URL


        html
        
            
        
     
<!-- Crear Tabla de contenido -->
<div>
<div class="tabla-contenidos">
  <div class="text-tabla">
     <b style="color: white;">Tabla de contenido por Etiqueta / Categoria </b>
  </div>
<div id="tabla-cont">
  <span class="loading">Cargando...</span>

  <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-c8oS6Z316otHEvTNYeVNaO8eADVf7zEVfrmW9flO7zKIjGEwMnQWmHip3JhPpjxGcK3ZBbK4UCmfBymCSYIiLwATz4LAKIB5HXZbJTqFoBJ-ahKtyASLotbiGJR3_w5BxsnbscUyss5bViQmQ3mMIPW8OeWeDcvbQOHbYYiZovU_ZgQNq3PJMHNYgZJ/s677/Tabla%20de%20contenido.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="268" data-original-width="677" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-c8oS6Z316otHEvTNYeVNaO8eADVf7zEVfrmW9flO7zKIjGEwMnQWmHip3JhPpjxGcK3ZBbK4UCmfBymCSYIiLwATz4LAKIB5HXZbJTqFoBJ-ahKtyASLotbiGJR3_w5BxsnbscUyss5bViQmQ3mMIPW8OeWeDcvbQOHbYYiZovU_ZgQNq3PJMHNYgZJ/s600/Tabla%20de%20contenido.png" width="600" /></a></div>
  
  </div></div>

<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "https://practica-blogz.blogspot.com/", // Dirección de su Blog URL
    containerId: "tabla-cont",
    activeTab: 1, 
    showDates: false, 
    showSummaries: false,
    numChars: 200, 
    showThumbnails: false, 
    thumbSize: 40, 
    noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", 
    monthNames: [ 
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ],
    newTabLink: true, 
    maxResults: 99999, 
    preload: 0, 
    sortAlphabetically: true, 
    showNew: 7, 
    newText: " - <em style='color:blue;'> Nuevo!</em>" 
};
    
</script>

<!-- Codigo JS tabla-cont.js -->
<script type="text/javascript">
var tabbedTOC_defaults = {
	blogUrl: "https://www.ayudadeblogger.com/", // Blog URL
	containerId: "tabla-cont", // Recipiente ID
	activeTab: 1, // El índice de pestaña activa predeterminado (predeterminado: la primera pestaña)
	showDates: false, // true para mostrar la fecha de publicación
	showSummaries: false, // true para mostrar los resúmenes de las publicaciones
	numChars: 200, // Número de caracteres de resumen
	showThumbnails: false, // True para mostrar las miniaturas de las publicaciones (no recomendado)
	thumbSize: 40, // Thumbnail size - Tamaño de miniatura
	noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // No thumbnail URL
	monthNames: [ // Array of month names - Matriz de nombres de meses
		"Januari",
		"Februari",
		"Maret",
		"April",
		"Mei",
		"Juni",
		"Juli",
		"Agustus",
		"September",
		"Oktober",
		"November",
		"Desember"
	],
	newTabLink: true, // Open link in new window?
	maxResults: 99999, // Maximum posts result
	preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
	sortAlphabetically: true, // `false` to sort posts by date
	showNew: false, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
	newText: " - <em style='color:red;'>Baru!</em>" // HTML for the "New!" text
};

for (var i in tabbedTOC_defaults) {
	tabbedTOC_defaults[i] = (typeof(tabbedTOC[i]) !== undefined && typeof(tabbedTOC[i]) !== 'undefined') ? tabbedTOC[i] : tabbedTOC_defaults[i];
}

function clickTab(pos) {
	var a = document.getElementById(tabbedTOC_defaults.containerId),
		b = a.getElementsByTagName('ol'),
		c = a.getElementsByTagName('ul')[0],
		d = c.getElementsByTagName('a');
	for (var t = 0; t < b.length; t++) {
		b[t].style.display = "none";
		b[parseInt(pos, 10)].style.display = "block";
	}
	for (var u = 0; u < d.length; u++) {
		d[u].className = "";
		d[parseInt(pos, 10)].className = "active-tab";
	}
}

function showTabs(json) {

	var total = parseInt(json.feed.openSearch$totalResults.$t,10),
		c = tabbedTOC_defaults,
		entry = json.feed.entry,
		category = json.feed.category,
		skeleton = "",
		newPosts = [];

	for (var g = 0; g < (c.showNew === true ? 5 : c.showNew); g++) {
		if (g == entry.length) break;
		entry[g].title.$t = entry[g].title.$t + (c.showNew !== false ? c.newText : '');
	}

	entry = c.sortAlphabetically ? entry.sort(function(a,b) {
		return (a.title.$t.localeCompare(b.title.$t));
	}) : entry;
	category = c.sortAlphabetically ? category.sort(function(a,b) {
		return (a.term.localeCompare(b.term));
	}) : category;

	// Build the tabs skeleton
	skeleton = '<span class="divider-layer"></span><ul class="toc-tabs">';
	for (var h = 0, cen = category.length; h < cen; h++) {
		skeleton += '<li class="toc-tab-item-' + h + '"><a href="javascript:clickTab(' + h + ');">' + category[h].term + '</a></li>';
	}
	skeleton += '</ul>';

	// Bulid the tabs contents skeleton
	skeleton += '<div class="toc-content">';
	for (var i = 0, cnt = category.length; i < cnt; i++) {
		skeleton += '<ol class="panel" data-category="' + category[i].term + '"';
		skeleton += (i != (c.activeTab-1)) ? ' style="display:none;"' : '';
		skeleton += '>';
		for (var j = 0; j < total; j++) {
			if (j == entry.length) break;
			var link, entries = entry[j],
				pub = entries.published.$t, // Get the post date
				month = c.monthNames, // Month array from the configuration
				title = entries.title.$t, // Get the post title
				summary = ("summary" in entries && c.showSummaries === true) ? entries.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,c.numChars) + '&hellip;' : '', // Get the post summary
				img = ("media$thumbnail" in entries && c.showThumbnails === true) ? '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="' + entries.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/") + '"/>' : '<img class="thumbnail" style="width:'+c.thumbSize+'px;height:'+c.thumbSize+'px;" alt="" src="' + c.noThumb.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/") + '"/>', // Get the post thumbnail
				cat = (entries.category) ? entries.category : [], // Post categories
				date = (c.showDates) ? '<time datetime="' + pub + '" title="' + pub + '">' + pub.substring(8,10) + ' ' + month[parseInt(pub.substring(5,7),10)-1] + ' ' + pub.substring(0,4) + '</time>' : ''; // Formated published date
				
			for (var k = 0; k < entries.link.length; k++) {
				if (entries.link[k].rel == 'alternate') {
					link = entries.link[k].href; // Get the post URL
					break;
				}
			}
			for (var l = 0, check = cat.length; l < check; l++) {
				var target = (c.newTabLink) ? ' target="_blank"' : ''; // Open link in new window?
				// Write the list skeleton only if at least one of the post...
				// ... has the same category term with one of the current categories term list
				if (cat[l].term == category[i].term) {
					skeleton += '<li title="' + cat[l].term + '"';
					skeleton += (c.showSummaries) ? ' class="bold"' : '';
					skeleton += '><a href="' + link + '"' + target + '>' + title + date + '</a>'; 
					skeleton += (c.showSummaries) ? '<span class="summary">' + img + summary + '<span style="display:inline;clear:both;"></span></span>' : '';
					skeleton += '</li>';
				}
			}
		}
		skeleton += '</ol>';
	}

	skeleton += '</div>';
	skeleton += '<div style="clear:both;"></div>';
	document.getElementById(c.containerId).innerHTML = skeleton;
	clickTab(c.activeTab-1);

}

(function() {
	var h = document.getElementsByTagName('head')[0],
		s = document.createElement('script');
		s.type = 'text/javascript';
		s.src = tabbedTOC_defaults.blogUrl + '/feeds/posts/summary?alt=json-in-script&max-results=' + tabbedTOC_defaults.maxResults + '&orderby=published&callback=showTabs';
	if (tabbedTOC_defaults.preload !== "onload") {
		setTimeout(function() {
			h.appendChild(s);
		}, tabbedTOC_defaults.preload);
	} else {
		window.onload = function() {
			h.appendChild(s);
		};
	}
})();

</script>
  
<!--CDN tabla-cont.js
	<script src="https://cdn.statically.io/gh/Ayudadeblogger/tabla-contenido/main/tabla-cont.js" type="text/javascript"></script>
--> 
  
<style>
  .tabla-contenidos {
    background-color: #130757;
    max-width: 100%;
    border-radius: 12px;
    padding: 16px 24px;
    position: relative;
}
  .text-tabla {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: -.5px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Google Sans,arial,sans-serif;
    letter-spacing: .1px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    text-align: center;
}
  #tabla-cont {
  margin:0 auto;
  background-color:#fff;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#333;
    padding: 14px;
    border-radius: 8px;
}

#tabla-cont .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px Arial,Sans-Serif;
  color:white;
}

#tabla-cont ul,
#tabla-cont ol,
#tabla-cont li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabla-cont .toc-tabs {
  width:30%;
  float:left;
}

#tabla-cont .toc-tabs li a {
  display:block;
  display:inline;
  font:normal bold 12px/28px Arial,Sans-Serif;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#222;
  text-transform:uppercase;
  text-decoration:none;
  padding: 5px 12px;
  cursor:pointer;
}

#tabla-cont .toc-tabs li a:hover {
  background-color:#3f51b5;
  color:white;
}

#tabla-cont .toc-tabs li a.active-tab {
  background-color:#3f51b5;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  border-bottom: 4px solid #000;
}

#tabla-cont .toc-content,
#tabla-cont .divider-layer {
  width:70%;
  float:right;
  background-color:white;
  border-left:5px solid #3f51b5;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#tabla-cont .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}

#tabla-cont .panel {
  position:relative;
  z-index:5;
  font:normal normal 13px Arial,Sans-Serif;
}

#tabla-cont .panel li a {
    display: block;
   display:inline;
    position: relative;
    font-weight: bold ;
    font-size: 14px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    padding: 5px 9px;
    color: #222;
}

    #tabla-cont .panel  li {
  padding: 3px 8px;
}
  
  #tabla-cont .panel  li a:hover {
  background-color:#0f0a42;
  color:white;
  padding: 7px 12px;
}
  
#tabla-cont .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:13px;

  color:#666;
  float:right;
}

#tabla-cont .panel li .summary {
  display:block;
 
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #3f51b5;
  overflow:hidden;
}

#tabla-cont .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding: 5px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}

#tabla-cont .panel li:nth-child(even) {
}

#tabla-cont .panel li a:hover,
#tabla-cont .panel li a:focus,
#tabla-cont .panel li a:hover time,
#tabla-cont .panel li.bold a {
box-shadow: 5px 5px 25px 0px rgb(46 61 73 / 20%);
    border-radius: 0.375rem;
    transition: all 0.3s ease;
  outline:none;
}

#tabla-cont .panel li.bold a:hover,
#tabla-cont .panel li.bold a:hover time {
  background-color:#222;
}

@media (max-width:700px) {

  #tabla-cont .toc-tabs,
  #tabla-cont .toc-content {
    float:left;
    width:100%;
    display:block;
  }
  #tabla-cont .toc-tabs li {
    display:inline;
    float:left;
  }

  #tabla-cont .toc-content {
    border:none;
  }
  #tabla-cont .divider-layer,
  #tabla-cont .panel li time {
    display:none;
  }
}
</style>
</div>

Blogs Webs

Crear una Tabla de contenido por Categoria en Blogger

Tags

Categories

Páginas publicadas

Random Posts

Tag Post-list

Popular Posts

Temario: Blog en Blogger

Blogger- Estructura básica de un Blog

Blogger Markup Language (BML)

Menu Footer Widget

Blogs Webs

Crear una Tabla de contenido por Categoria en Blogger

Entradas que pueden interesarte

Social Plugin

Tags

Categories

Páginas publicadas

Random Posts

Tag Post-list

Popular Posts

Temario: Blog en Blogger

Blogger- Estructura básica de un Blog

Blogger Markup Language (BML)

Menu Footer Widget