Jump Break: Post-Ausschnitt mit Weiterlese-Link

Break = Unterbrechung
Jump = Sprung

Hat man in einem Blogspot-Blog einen Jump-Break in einen Post eingebaut, dann wird der Post auf der Startseite und in Label-Ansichten nur bis dahin angezeigt, wo der Break steht. An der Unterbrechungsstelle steht dabei ein Link zum Weiterlesen. Klickt man auf ihn, wird der Post komplett geöffnet, aber nicht von oben an angezeigt; denn man springt direkt zum Rest-Text, also unter den Text, der schon angezeigt wurde.

---

Hergestellt wird der Jump-Break im Verfassen-Modus des Blogger-Editors per Klick auf das Symbol des zerrissenen Papiers.

Alternativ kann man ihn dadurch herstellen, dass man im HTML-Modus des Blogger-Editors selbst an der entsprechenden Stelle das Folgende einträgt:

<!--more-->

Das Programm macht aus dem <!--more-->, das im HTML-Modus des Post-Editors steht, automatisch sowohl einen Link, der unter den Post-Ausschnitt gesetzt wird als auch einen Anker im geöffneten Post. Die Codes dazu sieht man nur im Quelltext.

• Link-Code unter Post-Ausschnitt:
  
  <div class="jump-link">
<a title="POSTTITEL" href="POSTADRESSE">
Weitere Informationen »
</a>
</div>
  und darauf folgt der Post-Footer


• Anker-Code im geöffneten Post:
  
  <a name="more"></a>
  und darauf folgt das <hr />, wenn man eines hinter <!--more--> gesetzt hatte

Mögliche Änderungen

Link umbenennen

Standardmäßig ist der Titel des Links zum Weiterlesen "Weitere Informationen »". Das kann man unter Layout > Blogposts > Optionen für Hauptseite > Linktext der Post-Seite jedoch ändern, wenn man will. Falls man dabei versehentlich das » überschreibt, kann man statt dessen » eintragen; denn daraus wird dann ein solches Zeichen.

Link umgestalten

Damit auf den ersten Blick deutlich wird, dass der Post noch weitergeht, muss man, je nach Design, den Weiterlese-Link eventuell deutlicher hervorheben. Das kann man mit Kommandos, die man unter Vorlage > Anpassen > Erweitert > CSS hinzufügen einträgt.

Ich habe hier beispielsweise die folgenden Kommandos für den Link im Einsatz:

/* JUMP-LINK */
.jump-link {
margin:25px 0px 25px 0px;
}
.jump-link a {
-moz-box-shadow:0px 0px 1px #005CB8 inset;
-webkit-box-shadow:0px 0px 1px #005CB8 inset;
box-shadow:0px 0px 1px #005CB8 inset;
border:1px dotted #ffffff;
border-radius:5px;
background:#DFEAF5;
padding:5px;
font-weight:bold;
}
.jump-link a:hover {
text-decoration:none;
}

Linkziel ändern

Der Sprung auf den Anfang des Rest-Textes kann irritieren. Zum einen, weil man vielleicht gleich auf den Weiterlese-Link geklickt hatte, ohne den ersten Teil vollständig gelesen zu haben, zum anderen, weil das Gehirn besser arbeitet, wenn es stets Bezugspunkte hat, die nach dem Sprung auf den Rest-Text aber fehlen, weil man das, was darüber steht, nicht sieht. Spontan weiß man deshalb vielleicht nicht, wo man denn nun ist und was man gerade gelesen hatte.

Durch eine Änderung unter "HTML bearbeiten" kann man verhindern, dass der Weiterlese-Link dafür sorgt, dass man auf den Rest-Text springt. Der Link führt dann, genau wie der Post-Titel-Link, zum Anfang des Posts. Anleitung siehe "Weiterführende Links" unten.

Markieren, wo der Rest-Text beginnt

Im dann komplett geöffneten und von oben an angezeigten Post hilft einem eine Markierung, wie etwa eine waagerechte Linie, um gleich zu sehen, bis wo man den Text schon gesehen hatte und wo es weiter geht. Für eine Linie muss man im HTML-Modus des Blogger-Editors hinter das <!--more--> ein <hr /> setzen.

Wenn man will, kann man die Linie auch individueller gestalten. Dazu muss man unter Vorlage > Anpassen > Erweitert > CSS hinzufügen ein entsprechendes Kommando für sie eintragen. Ich habe hier beispielsweise das Folgende im Einsatz:

a[name*="more"] + hr {
margin:15px 0px;
border-top:5px dotted #000000;
color: transparent;
}

Die Zeichen vor dem hr sorgen dafür, dass nicht jedes hr so gestaltet wird, sondern nur ganz speziell das, das direkt auf den Anker folgt, der im geöffneten Post an der Stelle steht, wo im Post-HTML das <!--more--> steht. (Zu dem Anker wird normalerweise gesprungen, wenn man das unter "HTML bearbeiten" nicht geändert hat.) So kann man an anderen Stellen das <hr /> weiterhin für Standardlinien nutzen.

In dem Kommando habe ich die eigentliche Linie durchsichtig gemacht und statt dessen eine obere Rahmenlinie eingesetzt, weil man die freier gestalten kann.

Setzt man den Jump-Break grundsätzlich nach sehr wenig Text, reicht es aber, wenn man den Post von oben an sehen kann, um orientiert zu sein, eine Linie ist dann nicht nötig.

Weiterführende Links

• Jump-Break-Sprungziel ändern Web | Mobil
• selfhtml.wiki: Nachbarselektor

Ute Ziemes, sg.utez.de, 26.06.2014, Änderung: 2016-02-05