Para crear una Tabla de contenido por Etiqueta / Categoria, para las entradas de tu blog en Blogger, copia y pega el siguiente codigo en una Entrada o Pagina de tu blog, de blogger. Luego sustituye la blogUrl: por el de tu Página Web. blogUrl: "https://practica-blogz.blogspot.com/" = Dirección de su Blog URL. Posteriormente Guardar cambio y Listo. Luego Agregar el enlace al menu de tu preferencia
<!-- 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) + '…' : '', // 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>
Tags
Codigo-Personalizado