Jump Break / Weiterlesen Funktion {Tutorial}

Es ist wieder einmal Zeit für ein Tutorial! Heute soll es um die Weiterlesen-Funktion beziehungsweise den Jump Break gehen. Ich würde euch gerne einmal genau erklären, was das ist, wie ihr es verwenden und nach euren Vorstellungen gestalten könnt. Also los geht's!

Was ist das überhaupt?

Zuerst einmal: Was ist das? Diese Funktion ist sehr nützlich, wenn ihr lange Posts habt. Denn so wird auf der Startseite der Post nur bis dahin angezeigt, wo ihr diesen Jump Break einfügt. Habt ihr noch keine Einstellungen vorgenommen, so findet ihr statt der Fortsetzung des Posts dort den Text "Weitere Informationen » ". Klickt man auf diesen Link, kommt man zum vollständigen Post. Dies ist vor allem für lange Posts von Vorteil, da diese sonst einfach zu viel Platz einnehmen, oder ihr einfach noch nicht den ganzen Post anzeigen wollt. Einen Spoiler damit zu verdecken ist auch eine gute Möglichkeit. Die Funktion funktioniert jedoch nur auf der Startseite und nicht in der Post-Ansicht.

Wie wird es verwendet?

Wenn man im Post-Editor ist, gibt es oben die Formatierungsleiste. Hier ist ein Ausschnitt davon:

Das markierte Symbol steht für die Jump Break Funktion. Habt ihr den Editor geöffnet, müsst ihr nur zu der Stelle im Post klicken, an der ihr den Jump Break einfügen wollt, und dann auf dieses Symbol klicken.

Es erscheint eine strichlierte Linie, diese kennzeichnet nun euren Jump Break, wo der Post unterteilt wird, deshalb auch der zerrissene Zettel als Symbol.Speichert den Post und veröffentlicht ihn. Auf der Startseite werdet ihr nun den Anfang des Posts sehen und dann steht dort der Text "Weitere Informationen » ". Somit habt ihr die Weiterlesen Funktion erfolgreich eingefügt.

Design

Doch weil der Text ziemlich klein, unauffällig und langweilig ist, wollen wir das ganze einmal aufpeppen. Ich werde euch im folgendem Teil erklären, wie ihr den Text ändern und formatieren könnt oder einfach ein Bild einfügt.

Möglichkeit 1: Nur Text ändern

Dazu geht ihr im Blooger-Dashboard auf: Layout und bearbeitet dann im Main Bereich euer Blogpost-Gadget. Gleich zu Beginn (Zweite Zeile) könnt ihr euren eigenen Text eingeben unter "Linktext der Post-Seite". Speichern, fertig.

Möglichkeit 2: Text formatieren/ Bild einfügen

Wollt ihr das Ganze aber designen, müssen wir uns dem Blog-Design zuwenden. Dazu im Dashboard im Menü auf Design klicken und dann auf HTML bearbeiten.

Im HTML-Editor sucht ihr mit STRG + F nach folgendem Text:

<div class='jump-link'>

Ihr solltet euch nun hier befinden:

Folgenden Text wollen wir nun ersetzten:

<data:post.jumpText>

Diesen Teil löscht ihr einmal raus. An dieser Stelle gibt es jetzt verschiedene Varianten, ihr könnt es so designen, wie ihr wollt!

Text

Als Text nehmen wir jetzt einmal "Weiterlesen". Hier sind einige Designhilfen:

Schriftgröße

<span style="font-size: 20px;">Weiterlesen</span>

Schriftstil

• Fettgedruckt

<b>Weiterlesen</b>

• Kursiv

<i>Weiterlesen</i>

• Untersteichen

<u>Weiterlesen</u>

Ausrichtung
<p align="left">Weiterlesen</p>

Statt left also links könnt ihr auch center für zentriert oder right für rechts verwenden.

Schriftart
<span style="font-family: "arial";">Weiterlesen</span>

Farbe

<span style="color: #adfc03;">Weiterlesen</span>

Bild

Damit ihr ein Bild einfügen könnt, müsst ihr es irgendwo einmal hochgeladen haben, am besten auf eurem Blog selbst. Es geht aber auch, dass ihr das Bild über eine externe Seite, wie zum Beispiel Abload hochlädt. Wichtig ist, das ihr einen Link zu eurem Bild habt. Folgenden Code schreibt ihr nun in die Stelle, wo wir vorher <data:post.jumpText> gelöscht haben. Den Text "Bild Link" ersetzt ihr mit eurer URL.

<img src="Bild Link" />

Fertig!