Statt “Neuere Posts” und “Ältere Posts” Post Titel anzeigen

blogger blogspot
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.

Statt "Neuere Posts" und "Ältere Posts" Post Titel anzeigen

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:

Statt "Neuere Posts" und "Ältere Posts" Post Titel anzeigen

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

<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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); });
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>"); }); });
</script>

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:

Statt "Neuere Posts" und "Ältere Posts" Post Titel anzeigen

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.

Artikel als PDF herunterladen

12 Kommentare:

Miss Zuckerwatte 13. April 2012 um 17:16

Danke für das Tutorial!
So etwas hatte ich schon gesucht! :)

BloggerLatein 13. April 2012 um 18:00

@Miss Zuckerwatte

Und auch gleich erfolgreich umgesetzt...wie man sehen kann :)

Sabine 21. April 2012 um 21:12

Genial, danke ♥
LG Sabine

BloggerLatein 21. April 2012 um 23:13

@Sabine

Vielen Dank und wie man sehen kann, funktioniert es auch bei Deinem Blog. :)

Viele Grüße

Beate 8. Juli 2012 um 18:27

Super danke :)
hat alles geklappt.

Lg Bea
http://beate1236.blogspot.co.at/

Antje 12. Juli 2012 um 21:10

Vielen Dank dafür! Aber noch eine Frage: ich hätte gerne diese Zeile ganz oben auf meiner Seite. Wenn ich das Gadget im Layout verschiebe, verändert sich aber nichts?!
Danke schon mal im Voraus!

BloggerLatein 13. Juli 2012 um 10:43

@Antje

Nein, es wird sich nichts ändern. Die Option zur Anzeige "Ältere Posts", "Startseite" und "Neuere Posts" ist ja noch in der Vorlage (Design) im HTML für einen vordefinierten Bereich (unter den Posts) festgelegt.

Durch den oben genannten/eingefügten Code ändert sich daran auch nichts. Was mit dem eingefügten Code erreicht werden soll, ist die Anzeige von Posttiteln.

Um Deinem Wunsch nachzukommen müsste man grundsätzlich den Code für den definierten Bereich im HTML "verschieben", was aber durch den Aufbau von unterschiedlichsten Vorlagen kein Allgemeinrezept nach sich zieht. Man müsste sich jede Vorlage genau ansehen und es individuell ändern. Dazu muss entsprechend CSS und ggf. der oben gennante Code verändert bzw. angepasst werden.

Da ich noch keine Zeit hatte mir dies genauer anzusehen, gibt es leider auch noch keine Anleitung dazu. Also kann ich Dir keine Empfehlung geben, tut mir leid.

vg

Laura 31. Juli 2012 um 23:09

Hey :) Ich habe mal eine Frage die auch zu dem Thema mit dem 'Älteren Post und Neueren Posts' Links gehört und zwar, Ich habe durch ein anderes Tutorial statt ältere posts bei mir ein '»' und statt neuere posts ein '«' eingesetzt. Das hat bisher auch immer geklappt aber jetzt irgendwie nicht mehr. Habt ihr eine Idee woran das liegen kann?

Liebe Grüße, Ich würde mich über eine Antwort freuen.
http://lassmalchilln.blogspot.de/

BloggerLatein 1. August 2012 um 16:24

@Laura

Bei welchem Blog (müsste man sich mal ansehen) ?

Was klappt nicht mehr..

a) bekommst du ">>" und "<<" nicht mehr angezeigt?
b) bekommst Du die Orginalversion wieder angezeigt?
c) bekommst Du zu viel oder zu wenig angezeigt?
d) oder funktionieren die Links (zum weiterblättern) nicht mehr?

Es gibt mehrere Möglichkeiten, aber es wären doch nur Spekulationen. Sende mal deine Blogadresse.

LG

Glückskicks 11. August 2012 um 21:22

Vielen lieben Dank...
und schon wieder ein sehr nützlicher Tip, der sich prima umsetzen lässt und auch für weniger routinierte User gut zu verstehen ist.

Wär ich nicht schon ein Fan von der Seite, jetzt wär ich es :)

Wer's anschauen möchte, gerne hier... http://glueckskicks.blogspot.de/

LG
Ivonne

Achim 13. September 2012 um 22:09

Danke für den Tip

Bella - herzensüß 8. September 2013 um 17:54

oh...wow...das ging ja flott und sowas von leicht...genau das was ich immer brauche.

Danke euch

Gruß Bella

Mein herzensüßer Blog

Kommentar veröffentlichen