Inhaltsverzeichnis für Blogger (Blogspot) Blogs

Um ein Inhaltsverzeichnis ALLER Blog-Artikel auf einer Seite zu erstellen, gibt es einige Möglichkeiten, die besten in Javascript. Ich mag lieber Javscripte selbst schreiben, aber hier ging es um was "Zügiges". Ich hab noch eins in der Schublade, abder bis das fertig ist, benutze ich dies:

TOC SCRIPT ("Table of Content" = Inhaltsverzeichnis)

Benutzt habe ich jetzt erstmal das hier ...
https://blogcode101.blogspot.com/2017/04/how-to-create-table-of-content-toc-on.html

... und dasselbe ist in einer etwas anderes Style-Variante auch hier beschrieben:
http://myblogsideas.blogspot.com/2015/10/i-make-sitemap-table-of-contents-blog.html

Anleitung weiter unten, noch etwas vorweg:

SICHERHEIT

Wie gesagt - es ist kein eigenes Script, sondern greift auf ein fertiges, kostenloses, externes Script zurück, dass bei storage.googleapis.com gehostet ist. Was das für eine Service ist, wird hier erklärt:

https://www.quora.com/What-is-Storage-googleapis-com:
http://storage.googleapis.com is the service that hosts Google Cloud Storage. You can read about the product information at cloud.google.com/storage.

Obwohl die googleapis Platform in der Vergangenheit von einige Hackern missbraucht wurde, bezeichnet das WebOfTrust den Service inzwischen wieder als sicher. Immerhin. Dennoch wird es gelegentlich gegen was Eigenes ausgetauscht.

Aber für "im Moment" geht das so:

INHALTSVERZEICHNIS FÜR BLOGGER (BLOGSPOT) BLOGS:

# 1. Blogger > Seite erstellen > HTML Modus > Code einfügen:

<div id="bp_toc">Loading TOC. Please wait....</div>
<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/bloggergadgets/blogtoc_orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script>

Unter "Seitenoptionen" noch die Kommentare abschalten, speichern.

# 2. Dann in Blogger > Design > Anpassen >  Erweitert  > CSS hinzufügen:

STYLE 1 (einfache Tabelle mit dunklem Header)

#bp_toc { border: 0px solid #000000; background: #ffffff; padding: 5px;
width:100%; margin-top:10px; }
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee; color: #000; padding-left: 5px; width:43.5%; }
.toc-header-col2 { width:13%; }
.toc-header-col3 { width:43.5%; }
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size:100%; text-decoration:none; }
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:100%; text-decoration:underline; }
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:90%; }

ALTERNATIV: STYLE 2 (sehr schick, mehr Pepp)

<div id="bp_toc">Loading TOC. Please wait....</div>
<script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

<style>
#bp_toc { border: 0px solid #000000;background: #ffffff;  padding: 5px;  width:500px;  margin-top:10px; }
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #fafafc;  color: #000000;  padding-left: 5px;  width:250px; }
.toc-header-col2 {  width:75px; }
.toc-header-col3 {  width:125px; }
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:80%; text-decoration:none; }
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
  font-size:80%; text-decoration:underline; }
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:70%; }

Viel Erfolg!