Dienstag, 8. Mai 2012

Feed-Artikel-Liste als Archiv-Seite

Heute möchten wir uns mit der Frage beschäftigen, wie man bei Blogger (Blogspot) eine extra Archiv-Seite anlegen kann, die eine nummerierte Artikel-Liste ausgibt – bzw. auch eine nicht nummerierte Artikel-Liste.

Zum einen werde ich euch zeigen, wie ihr einfach eine Titelliste erstellen könnt und zum anderen auch, wie ihr eine Liste mit vorangestelltem Datum erstellen könnt.

Natürlich habe ich nicht vor sämtliche Artikel von Hand einzupflegen.


Daher soll die Umsetzung der Artikel-Liste mittels des Blogger JSON-Feeds erfolgen. JSON steht für "JavaScript Object Notation" und ist damit ein Feed-Format für Javascript. Unter anderem werden die dynamischen Ansichten von Blogger in diesem Format bereitgestellt.


Übersicht:
  1. Neue leere Seite erstellen
  2. Nummerierte Artikel-Liste erstellen
  3. Nummerierte Artikel-Liste mit Datum erstellen
  4. Anzahl der anzuzeigenden Artikel anpassen
  5. Artikel-Liste - ohne Nummerierung - mit Aufzählungspunkten erstellen
  6. Artikel-Archiv in Aktion


1. Neue leere Seite erstellen

Egal für welche Variante wir uns entscheiden, wir müssen zunächst eine neue leere Seite erstellen, dazu gehen wir in der Blog-Verwaltung auf den Reiter: "Seiten" und erstellen eine neue leere Seite.
Im Anschluss müssen wir noch links oben auf "Html" klicken und anschließend können wir uns dem HTML-Code widmen.


2. Artikel-Liste mit Nummerierung erstellen

Um lediglich eine nummerierte Aufstellung aller Artikel zu erhalten, müssen wir nun den nachfolgenden HTML-Code einfügen:
<!-- Artikel-Liste Start http://bloggerfragen.blogspot.com/ --> <div id='listes'>
<script type='text/javascript'>
 function listemall(json){
 var listhis='<ol>';
 for(var i=0; i<json.feed.entry.length; i++){
 var posttitle=json.feed.entry[i].title.$t;
 for(var k = 0; k < json.feed.entry[i].link.length; k++){
 if (json.feed.entry[i].link[k].rel == 'alternate') {
 var postlink = json.feed.entry[i].link[k].href;  }  }
 listhis+='<li><a href="'+postlink+'">'+posttitle+'</a></li>';  }
 listhis+='</ol>';
 document.getElementById('listes').innerHTML=listhis;  } </script>
<script                             
 src="/feeds/posts/default?max-results=500&alt=json&callback=listemall"></script></div> <ul><li><a href="http://bloggerfragen.blogspot.de/2012/05/blogger-artikel-liste-als-archiv-seite.html">Eigenes Artikel-Archiv erstellen</a></li></ul> <!-- Artikel-Liste Ende http://bloggerfragen.blogspot.com/ -->

Schon ist die nummerierte Artikel-Liste fertig und wir können sie als Archiv-Seite veröffentlichen und verwenden.
Das sieht dann, beispielsweise bei mir, so aus:
Bild: Zeigt eine nummerierte Liste der letzten Artikel, Posts.


3. Artikel-Liste mit Nummerierung und Datum erstellen

Manch einer mag in seiner Artikel-Liste auch gerne das Datum sehen, wann der Artikel veröffentlich wurde. Auch dafür haben wir eine Lösung, dazu müssen wir einfach den nachfolgend angepassten HTML-Code einfügen:
<!-- Artikel-Liste Start http://bloggerfragen.blogspot.com/ --> <div id='listes'>
<script type='text/javascript'>
 function listemall(json){
 var listhis='<ol>';
 for(var i=0; i<json.feed.entry.length; i++){
 var posttitle=json.feed.entry[i].title.$t;
 var postdate=json.feed.entry[i].published.$t.substring(0,10);  for(var k = 0; k < json.feed.entry[i].link.length; k++){
 if (json.feed.entry[i].link[k].rel == 'alternate') {
 var postlink = json.feed.entry[i].link[k].href;  }  }
 listhis+='<li><a href="'+postlink+'">'+postdate+'</a> &nbsp;  <a href="'+postlink+'">'+posttitle+'</a></li>';  }
 listhis+='</ol>';
 document.getElementById('listes').innerHTML=listhis;  } </script>
<script                                
 src="/feeds/posts/default?max-results=500&alt=json&callback=listemall"></script></div> <ul><li><a href="http://bloggerfragen.blogspot.de/2012/05/blogger-artikel-liste-als-archiv-seite.html">Eigenes Artikel-Archiv erstellen</a></li></ul> <!-- Artikel-Liste Ende http://bloggerfragen.blogspot.com/ -->

Schon haben wir eine nummerierte Artikel-Liste mir vorangestelltem Datum.


4. Anzahl der anzuzeigenden Artikel anpassen


Die orange hinterlegte Zahl legt fest, wie viele Artikel in der Liste angezeigt werden und kann nach Belieben angepasst werden. 


5. Artikel-Liste - ohne Nummerierung - mit Aufzählungspunkten

Wen uns die Nummerierung der Artikel-Liste nicht gefällt, können wir dies ändern, indem wir die rot hinterlegten: "ol" durch "ul" ersetzen. Im Ergebnis wird dadurch die Nummerierung durch Aufzählungspunkte ersetzt.
Das sieht dann, beispielsweise bei mir, so aus:
Bild: Zeigt eine Liste der letzten Artikel / Posts, ohne Nummerierung, stattdessen mit Aufzählungspunkten.


6. Artikel-Archiv in Aktion

Auf der Bloggerfragen-Archiv-Seite findest du ein funktionierendes Archiv mit Nummerierung ohne Datum.

Auf einem anderen Blog, kannst du dir ein funktionierendes Archiv mit Datum und Nummerierung ansehen.

Ich hoffe meine kleine Anleitung hat dir weitergeholfen, falls es nicht funktionieren sollte, du Fragen, Wünsche oder Anregungen hast, darfst du mir gerne einen Kommentar hinterlassen oder mir eine Nachricht über mein Kontaktformular schicken.

Kommentare:

  1. Hallo Danke,

    es funktioniert.
    Und wenn ich jetzt noch das entsprechende Datum des Artikel einfügen möchte - wie kann ich das machen.

    Gruß
    Manfred

    AntwortenLöschen
  2. Von mir auch ein Danke.

    Es hat gleich funktioniert.

    AntwortenLöschen
  3. Gibt es auch die Möglichkeit mehrere Seiten anzeigen zu lassen?
    So wird die Liste schnell sehr lang.

    LG Christine

    AntwortenLöschen
  4. Hallo,
    vielen Dank für deine tolle Anleitungen!
    Ich habe noch eine Frage, vielleicht kannst du mir weiterhelfen. Ich möchte in meinem Foodblog ein Verzeichnis erstellen. Im Prinzip wäre es so eine Art Archiv aber ich habe gesehen, dass die neueren Blogs inzw. Verzeichnisse mit Vorschaubild haben.
    Ich weiß nicht ob ich hier ein Link posten darf, falls nicht dann bitte einfach entfernen.

    Also so eine Gliederung wie auf dieser Seite möchte ich auch erstellen, aber wie?
    http://momentmal-blog.blogspot.de/p/design_28.html

    Liebe Grüße,
    Natalia

    AntwortenLöschen