Montag, 2. Februar 2009

Blogger-Hacks: Artikel-Zusammenfassung

Auf meiner Wunschliste für das überarbeitete Designs des Blogs stand auch der Punkt, dass ich (je nach Laune und Länge des Beitrags) auf der Hauptseite nur eine Artikelzusammenfassung haben wollte – zumindest für jene Artikel, die eben doch mal länger als üblich sind.
Das erspart dem schnellen Leser das nervige Scrollen und ist der Übersicht der Startseite zuträglich.
Blogger beschreibt auf seinen Hilfeseiten eine Version, die ich auch hier in diesem Blog anwende.
Lest weiter, wenn euch meine zusätzlichen Anmerkungen interessieren …

Wie gesagt, hat Blogger diesen Hack schon dokumentiert. Als ich ihn allerdings in meinem Layout anwenden wollte, hat das nicht gleich auf Anhieb funktioniert. Deswegen hier mal “meine” Variante, die ich mir aus verschiedenen Quellen zusammengesucht habe …
Aber fangen wir mal vorne an :-)
Prinzipiell funktioniert der Trick so, dass man spezielle HTML-Tags in den Artikel einbettet, die bestimmen, welcher Teil des Postings die Zusammenfassung und welcher der Rest ist.
Um diese Funktion nachzurüsten, muss man auch das Blog-Template direkt bearbeiten, da hier die Logik in Form einer Wenn/Dann-Abfrage hinzugefügt werden muss. Da das schnell in die Hose gehen kann, bitte unbedingt vorher ein Backup machen.
Blogger-Template sichern Dazu geht man also auf http://www.blogger.com/ und loggt sich in sein Dashboard ein. Dann klickt man in den oberen Laschen auf Layout und danach auf den Punkt “HTML bearbeiten”, so wie auf dem Bild links zu sehen. Auf dieser Seite, die Zugriff auf das HTML-Template erlaubt, gibt es auch einen Link “Vollständige Vorlage herunterladen”. Das sollte man tun. Und an einem sicheren Platz ablegen, den man auch wiederfindet ;-)
Wenn das geschehen ist, dann können wir uns auf das HTML/CSS-Gemisch stürzen, das Blogger vorschreibt, wie ein Blog aussehen soll. Damit wir an die relevanten Stellen im Quellcode kommen, muss das Häkchen gesetzt werden:
Vorlagen zum Erweitern von Widgets
In meinem Fall habe ich mich dafür entschieden, den entsprechenden Code-Teil vor dem Body einzufügen. Sucht also das Element <div class='post-body'> und fügt die roten Zeilen direkt davor ein.

 <div class='post-header-line-1'/>
   <b:if cond='data:blog.pageType == "item"'>
   <style>.fullpost{display:inline;}</style>
      <b:else/>
      <style>.fullpost{display:none;}</style>
   </b:if>

<div class='post-body'>
Damit wäre die “Logik” erstmal vorhanden. Nun muss man noch den Hinweis bzw. Link hinzufügen, dass der (zu lange) Beitrag woanders weitergeführt wird.
In meinem Blog kann man das auf der Startseite am Wörtchen “Weiter »»” unter jedem Artikel erkennen. wenn man dort drauf klickt, kommt zur entsprechenden Artikelseite und im Falle eines Artikels, der mit einer Zusammenfassung erstellt wurde, gelangt man erst nach dem Klick zum vollständigen Text.
Dazu müssen wir uns nicht weit von der obigen Stelle im Quelltext entfernen, siehe hier:
<div class='post-header-line-1'/>
   <b:if cond='data:blog.pageType == "item"'>
   <style>.fullpost{display:inline;}</style>
      <b:else/>
      <style>.fullpost{display:none;}</style>
   </b:if>
<div class='post-body'>
    <p><data:post.body/>
    <b:if cond='data:blog.pageType != "item"'><br/>
       <a expr:href='data:post.url'>Weiter &#187;&#187;</a>
     </b:if>
</p>
Den ersten Teil haben wir vor dem Body eingefügt und den zweiten Teil inklusive des Wörtchens “Weiter” fügen wir direkt nach dem Body ein. Da soll es ja auch erscheinen: Am Ende der Zusammenfassung bzw. des Postings.
So, das wäre es schon fast! Man sollte jetzt die Vorlage über den Button Vorlage speichern
speichern. Testweise kann man auch auf den Vorschau-Knopf drücken. Wenn die Änderungen alle korrekt im Quelltext platziert wurden, dann sollte sich das Template ohne Probleme speicher lassen. Der einzige Unterschied im Blog sollte ab jetzt das Wörtchen “Weiter” (oder was immer ihr euch ausgesucht habt!) unter jedem Artikel auf der Hauptseite des Blogs stehen.

Mehr ist erstmal nicht ;-)

Der Rest ist dem Autor beim Schreiben seiner Beiträge überlassen. Um Blogger mitzuteilen, welcher Teil des Artikels Zusammenfassung und welcher “Rest” ist, muss man zwei HTML-Tags im Quellcodes des ARTIKELS platzieren. Also beim Schreiben. Alles klar?
Das kann man zum einen in der HTML-Ansicht des Post-Editor auf der Blogger-Webseite machen, oder wie bei mir mit dem Windows Live Writer (WLW).
Hier nochmal das Prinzip:
Das ist meine Zusammenfassung! 
<span class="fullpost">
Das ist der Rest des Artikels.
</span>
Simpel, oder?
Für diesen Artikel geht die Zusammenfassung also bis zu folgendem Teilsatz “… Anmerkungen interessieren …”

So schnell geht das :-)
Einen Wunsch hätte ich noch: Ein Plugin für den WLW, dass diese span-Tags auf Knopfdruck einfügt – das wär’s!

Noch Fragen?

blog comments powered by Disqus

Design von Dicas Blogger, angepasst durch Mario Ruprecht