BloggerLatein

Kann man bei Blogger Blogspot statt “Neuere Posts” und “Ältere Posts” auch Post Titel anzeigen lassen? Wie kann man statt “Neuere Posts” einen Post Titel bei Blogger Blogspot anzeigen lassen? Wie kann man statt “Ältere Posts” einen Post Titel bei Blogger Blogspot anzeigen lassen?

Vorweg noch einiges zum Aufbau eines Blogger Blogspot Blogs: schreibt und veröffentlicht man in seinem Blog Posts erscheinen diese in der Regel auf der Blog-Startseite. Der zuletzt veröffentlichte Post (also der aktuellste Post) befindet sich immer an erster Stelle.

Per Einstellung kann festgelegt werden, wie viele Posts auf der Startseite angezeigt werden sollen. Möchte man aber weitere Posts lesen wird eine Navigation notwendig, um durch den Blog zu stöbern.

Diese Navigation bietet Blogger von Haus aus an. Rechts findet sich der Link “Ältere Posts” und über diesen gelangt man dann bis zum letzten Post (welcher auch der allererste Post  ist, der im Blog veröffentlicht wurde). Sind keine weiteren Posts verfügbar, wird der Link “Ältere Posts” auch nicht mehr angezeigt. In der Mitte wird der Link “Startseite” angezeigt. Weil auf der Startseite des Blogs die neuesten Posts angezeigt werden, findet sich dort auch nicht der Link “Neuere Posts”. Dieser Link wird erst angezeigt, wenn man sich nicht mehr auf der Starseite des Blogs befindet und “zurück” zu den neueren Posts navigiert. Für die Kategorie (Label) Seiten ist das Schema ähnlich.

Dem ein oder anderen Blogger ist diese Ansicht vielleicht schon über, man möchte mal etwas anderes ausprobieren oder man hat schon auf anderen Blogs bewundert, dass dort Post Titel zum Navigieren durch den Blog genutzt werden.

Aber auch für Blogger Blogspot Blogs ist es möglich, die Links “Neuere Posts” und “Ältere Posts” mit Post Titeln zu ersetzten. Das Schema ist nicht schwer zu verstehen. Statt “Ältere Posts” wird dann immer der nächste Titel des Posts angezeigt zu dem man auch sonst navigieren würde. Statt “Neuere Posts” wird ebenso der Titel des Posts angezeigt zu dem man auch sonst navigieren würde. Die Struktur des Blogs bleibt also gleich, nur das Design wird etwas verändert und sieht dann so aus:

Um einen Einbau des Codes auch für Anfänger so leicht wie möglich zu machen, wurde dieser so zusammengestellt, dass er sich schnell und leicht über das Gadget HTML/JavaScript hinzufügen lässt. Wie bei jedem hinzugefügten Gadget welches auf ein Javascript zugreift, kann sich die Ladezeit etwas verzögern.

Da es sich um ein Gadget handelt, welches nicht in der Seitenbar angezeigt werden soll, kann man es im unteren Bereich (unter Blogposts) “anlegen”.

Gadget für HTML/JavaScript in der alten Blogger Oberfläche hinzufügen

• bei blogger.com einloggen und entsprechenden Blog aufsuchen
• Design >> Seitenelemente >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code einfügen >> Speichern

Gadget für HTML/JavaScript in der neuen Blogger Oberfläche hinzufügen

• bei blogger.com einloggen und entsprechenden Blog aufsuchen
• Layout >> Gadget hinzufügen >> HTML/JavaScript auswählen und den Code einfügen >> Speichern

Code zur Anzeige von Post Titeln

Nach dem Speichern den Blog neu laden und statt “Ältere Posts” und “Neuere Posts” sollten nun Post Titel angezeigt werden.

Beim Testen funktionierte es für alle Standard Template Vorlagen von Blogger Blogspot.

Man sollte sich auch noch anschauen, wie sehr lange Post Titel dargestellt werden. Eventuell könnten Änderungen der Schriftgröße und der für die Post Titel zur Verfügung stehenden Breite erforderlich sein.

Das Design der angezeigten Post Titel

Im oben angeführten Code gibt es auch einen Teil, der für das Design “zuständig ist”, welcher  die ersten Zeilen betrifft und  verändert werden kann:

<style type="text/css">
#blog-pager-newer-link {font-size:85%; width:220px; text-align:left; line-height:2em; height:8em;}
#blog-pager-older-link {font-size:85%; width:220px; text-align:right; line-height:2em; height:8em;}
.home-link {font-size:85%; line-height:2em;height:8em;}
</style>

• #blog-pager-newer-link – steht für den Link “Neuere Posts” auf der linken Seite (siehe 1. Bild).
• #blog-pager-older-link – steht für den Link “Ältere Posts” auf der rechten Seite (siehe 1. Bild).
• .home-link – ist der Link “Startseite” und kann bei Bedarf auch ganz ausgeblendet werden:
  .home-link {display:none;}
• font-size:85%; – ist die prozentuale Schriftgröße für alle 3 Links. Möchte man die Schriftgröße für die angezeigten Post Titel kleiner haben, muss man einen Wert unter 85 einstellen. Soll die Schrift größer werden, kann man auch Werte über 100 für alle 3 Links einstellen.
• width:220px; – die Breite, die zur Anzeige für den Post Titel zur Verfügung steht. Nutzt man eine Vorlage mit einer größeren Postbreite, kann man diesen Wert erhöhen. Hat man eine Template Vorlage, die nur eine sehr schmale Postbreite hat kann man diesen Wert unter 220 festlegen.
• line-height:2em; – bestimmt die Zeilenhöhe. Vergrößert man die Schrift weit über 100% kann es notwendig werden, auch die Größe 2 etwas zu erhöhen (sonst könnten 2 Textzeilen eines Post Titels ineinander verlaufen).
• height:8em; – ist die Gesamthöhe für die anzuzeigenden Posttitel. Vergrößert man die Schrift weit über 100%, kann es notwendig werden, die Zeilenhöhe (line-height:2em) zu vergrößern und infolge dessen könnte insgesamt mehr Höhe für die Post Titel nötig werden und die Zahl 8 könnte nach Bedarf erhöht werden.

Abschließend noch ein Beispiel:

So sieht die Darstellung längerer Post Titel aus. Der obige Code wurde verwendet und für alle 3 Links wurde nur die Schriftgröße auf 95% geändert.