Be KreaTief

[BLOGGER] Linear Archive on Static Page ✤✤

Ich weiss ja nicht, wie es euch geht, aber ich mag das Archiv-Gadget einfach nicht. Anfangs habe ich es benutzt, aber ich war immer total eifersüchtig auf Oliver's Archiv (Dort ist übrigens jeder Link klickenswert!) und irgendwann hab ich ihn einfach mal gefragt, wie er das macht.
Die Lösung nennt sich JavaScript, der Grundgedanke extrem simpel.
In jeden Blogger-Blog ist ein RSS-Feed integriert, der sich wie folgt aufbaut
DEINESEITE.blogspot.com/feeds/posts/default
Mithilfe des JavaScript liest man die Titel und den Link aus und stellt sie in einer Liste dar.

Was ihr also tut ist folgendes.
Neue Seite hinzufügen.

I don't know about you, but I hate the archive widget of blogger. At the beginning I used tit, but I was always envious about Oliver's Archive (where actually each post is worth clicking - but it's in German only) and at some point I just asked him, how he did this.
The solution is called JavaScript, the thought behind it extremely simple.
In each blogger blog a RSS feed is integrated which you can see if you enter this URL
YOURSITE.blogspot.com/feeds/posts/default
The script reads the titles and links and displays them in a list.

So, what you're gonna do is this.

Add a new static page.




Dort wechselt ihr ins HTML und fügt einen div-container ein.

There you go into the HTML and add a div-container.


<div id="listemup">
Loading...
</div>

Wie ihr seht hab ich noch ein loading eingefügt, wenn ihr eine Menge Posts habt, kann das schon eine Weile dauern, bis die alle geladen sind, der Text steht dann dort.

Direkt darunter fügt ihr dieses JavaScript ein, wobei ihr YOURSITE durch den Teil eurer URL einfügt, die vor .blogspot folgt.

I added a content. If you have a lot of posts there is gonna be a few seconds of waiting time until everything is displayed, in the meantime the content of the container is shown and telling your visitors something is acutally coming.

Underneath the container you are gonna add the script, making sure to replace YOURSITE with the part of your blog URL before .blogspot.


<script>
function listemall(json){
var listhis='<ul class="unstyled">';
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+='</ul>';
document.getElementById('listemup').innerHTML=listhis;
}
</script>

<script src="http://YOURUSITE.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json&amp;callback=listemall"></script>

Dann veröffentlichen.

Publish




Und ihr habt euer Lineares Archiv :D

And your Archive Page is done. :D
edit

6 comments:

  1. Geht das dann prinzipiell auch mit den Labels? Also das man die oben in die Seitenleiste einfasst?

    ReplyDelete
  2. Myri, du hattest doch mal ein Tutorial für diese Datumsblasen, oder? :D

    ReplyDelete
  3. Sehr gut, es hat funktioniert :) Und wie füge ich dahinter noch das Datum ein, so wie du es hast? :)
    Liebst
    http://mnply.blogspot.de/

    ReplyDelete
    Replies
    1. Das ist ein etwas anderer Weg. Hab das Tutorial dazu irgendwo gefunden, weiss leider nicht mehr wo. ich such's und wenn ich es wiedergefunden habe, dann verlink ich's hier. :)

      Delete
  4. Leider ist es mir nicht gelungen - das Archiv wird nicht angezeigt. Was habe ich falsch gemacht? Oder klappt es mit dem alten Blogger-Layout nicht?

    http://mein-waldgarten.blogspot.de/p/loading.html

    Viele Grüße
    Sara

    ReplyDelete
    Replies
    1. Hallo Sara
      Die Seite wird mir als nicht existent angezeigt. Hast du sie inzwischen gelöscht?
      Grüsse
      Myri

      Delete

Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+

Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered