Tabla de contenido (Sitemap) con pestañas

<style>
#SiteMapBlogger {
width:99%;
margin:0 auto;
background-color:#444; /* Color de la barra lateral */
overflow:hidden;
position:relative;
color:#333
}
#SiteMapBlogger .loadingPosts {
display:block;
padding:5px 10px;
font:normal bold 10px Arial, Sans-Serif;
color:#FFF
}
#SiteMapBlogger ul, #SiteMapBlogger ol, #SiteMapBlogger li {margin:0;padding:0;list-style:none;background:none;}
#SiteMapBlogger .sitemapTabs {width:20%;float:left}
#SiteMapBlogger .sitemapTabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* Color de las etiquetas */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#SiteMapBlogger .sitemapTabs li a:hover {
background-color:#556270; /* Color de fondo de las etiquetas al pasar el cursor */
color:#FFF
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#69D2E7; /* Color de la pestaña activa */
color:#FFF; /* Color del texto de la pestaña activa */
position:relative;
z-index:5;
margin:0 -1px 0 0
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #69D2E7; /* Color del borde que separa las entradas de las etiquetas */
box-sizing:border-box
}
#SiteMapBlogger .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;}
#SiteMapBlogger .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#SiteMapBlogger .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px; /* Tamaño del título de las entradas */
color:#333; /* Color del título de las entradas */
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#SiteMapBlogger .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px; /* Tamaño de la fecha */
color:#DCDCDC; /* Color de la fecha */
float:right
}
#SiteMapBlogger .panel li .sitemapSummary {
display:block;
padding:10px 12px;
font-style:italic;
overflow:hidden
}
#SiteMapBlogger .panel li .sitemapSummary img.sitemapThumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px; /* Ancho del contenedor de las miniaturas */
height:72px; /* Alto del contenedor de las miniaturas */
border:1px solid #dcdcdc; /* Borde de las miniaturas */
}
#SiteMapBlogger .panel li:nth-child(even) {
background-color:#CBDFDE; /* Color de fondo secundario de las entradas */
font-size:10px;
color:#414141 /* Color de texto secundario de las entradas */
}
#SiteMapBlogger .panel li a:hover,#SiteMapBlogger .panel li a:focus, #SiteMapBlogger .panel li a:hover time, #SiteMapBlogger .panel li.bold a {
background-color:#556270; /* Color de fondo del título de las entradas (modo sumario) y color de fondo del título de las entradas al pasar el cursor (modo normal) */
color:#FFF;
outline:none
}
#SiteMapBlogger .panel li.bold a:hover, #SiteMapBlogger .panel li.bold a:hover time {
background-color:#444
}

@media (max-width:700px) {
#SiteMapBlogger {
background-color:#fff;
border:0 solid #888
}
#SiteMapBlogger .sitemapTabs, #SiteMapBlogger .sitemapContent {
overflow:hidden;
width:auto;
float:none;
display:block
}
#SiteMapBlogger .sitemapTabs li {
display:inline;
float:left
}
#SiteMapBlogger .sitemapTabs li a, #SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#556270;
color:#ccc;
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#CBDFDE;
color:#fff
}
#SiteMapBlogger .sitemapContent {
border:none
}
#SiteMapBlogger .divider-layer, #SiteMapBlogger .panel li time {
display:none
}
}
</style>
<div id="SiteMapBlogger">
<span class="loadingPosts">Cargando entradas...</span></div>
<br />
<script>
var tabbedTOC = {
blogUrl: "http://nombre-de-mi-blog.blogspot.com/",
containerId: "SiteMapBlogger",
activeTab: 1,
showDates: true,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUdg3t5QndWsLryssJdFZSv4wNBotT4P2xv8r0_YHrPzhmNfwFex0a6MjWHh7427NMVRlW8-ZzHtuYk7ROIuwmtU7DV-FHRK8Ck81xoRMe4/s128/imagen.png",
monthNames: ["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 7,
newText: " - <i style='color:red;'>¡Nuevo!</i>"
};
</script>

<script>
/*
* Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
* Free for change but keep the original attribution.
* URL: https://plus.google.com/108949996304093815163 */

function clickTab(e){var t=document.getElementById(tabbedTOC_defaults.containerId),n=t.getElementsByTagName("ol"),r=t.getElementsByTagName("ul")[0],i=r.getElementsByTagName("a");for(var s=0;s<n.length;s++){n[s].style.display="none";n[parseInt(e,10)].style.display="block"}for(var o=0;o<i.length;o++){i[o].className="";i[parseInt(e,10)].className="active-tab"}}function showTabs(e){var t=parseInt(e.feed.openSearch$totalResults.$t,10),n=tabbedTOC_defaults,r=e.feed.entry,i=e.feed.category,s="",o=[];for(var u=0;u<(n.showNew===true?5:n.showNew);u++){if(u==r.length)break;r[u].title.$t=r[u].title.$t+(n.showNew!==false?n.newText:"")}r=n.sortAlphabetically?r.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):r;i=n.sortAlphabetically?i.sort(function(e,t){return e.term.localeCompare(t.term)}):i;s='<span class="divider-layer"></span><ul class="sitemapTabs">';for(var a=0,f=i.length;a<f;a++){s+='<li class="sitemapItem-'+a+'"><a href="javascript:clickTab('+a+');">'+i[a].term+"</a></li>"}s+="</ul>";s+='<div class="sitemapContent">';for(var l=0,c=i.length;l<c;l++){s+='<ol class="panel" data-category="'+i[l].term+'"';s+=l!=n.activeTab-1?' style="display:none;"':"";s+=">";for(var h=0;h<t;h++){if(h==r.length)break;var p,d=r[h],v=d.published.$t,m=n.monthNames,g=d.title.$t,y="summary"in d&&n.showSummaries===true?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,n.numChars)+"…":"",b="media$thumbnail"in d&&n.showThumbnails===true?'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>':'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+n.noThumb.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>',w=d.category?d.category:[],E=n.showDates?'<time datetime="'+v+'" title="'+v+'">'+v.substring(8,10)+" "+m[parseInt(v.substring(5,7),10)-1]+" "+v.substring(0,4)+"</time>":"";for(var S=0;S<d.link.length;S++){if(d.link[S].rel=="alternate"){p=d.link[S].href;break}}for(var x=0,T=w.length;x<T;x++){var N=n.newTabLink?' target="_blank"':"";if(w[x].term==i[l].term){s+='<li title="'+w[x].term+'"';s+=n.showSummaries?' class="bold"':"";s+='><a href="'+p+'"'+N+">"+g+E+"</a>";s+=n.showSummaries?'<span class="sitemapSummary">'+b+y+'<span style="display:block;clear:both;"></span></span>':"";s+="</li>"}}}s+="</ol>"}s+="</div>";s+='<div style="clear:both;"></div>';document.getElementById(n.containerId).innerHTML=s;clickTab(n.activeTab-1)}var tabbedTOC_defaults={blogUrl:"http://www.ciudadblogger",containerId:"SiteMapBlogger",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUdg3t5QndWsLryssJdFZSv4wNBotT4P2xv8r0_YHrPzhmNfwFex0a6MjWHh7427NMVRlW8-ZzHtuYk7ROIuwmtU7DV-FHRK8Ck81xoRMe4/s128/imagen.png",monthNames:["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>¡Nuevo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.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(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()
</script>

activeTab es la pestaña predeterminada
showDates cambiar a false para ocultar la fecha
showSummaries cambiar a true para mostrar resúmenes (sumarios)
numChars número de caracteres en el resumen
showThumbnails cambiar a true para mostrar miniaturas de las entradas
thumbSize tamaño de la miniatura
noThumb miniatura predeterminada para las entradas que no tienen imagen.
monthNames es el nombre de los meses cuando se muestra la fecha
newTabLink cambiar a true para abrir las entradas en una pestaña nueva
sortAlphabetically cambiar a false para ordenar las entradas por fecha
showNew cambiar a false para ocultar el texto "¡Nuevo!" que aparece en las entradas recientes, o define cuántas entradas recientes tendrán ese texto
newText es el texto "¡Nuevo!" de las entradas recientes