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&max-results=500&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!
