Visuelle Aufbereitung des Jump-Break Links

Wer meinen Artikel zum Thema, “Jump Breaks in Blogger einfügen” gelesen hat, weiß sicherlich schon von was ich spreche. Wer der Meinung ist, dass der Jump-Break Link nicht wirklich auf der Hauptseite unter dem Einleitungstext zum Vollartikel zur Geltung kommt, kann diesen visuell so aufbereiten dass er sehr deutlich hervorsticht. Der Jump-Break Link,

der in der “Default” Version als “Read More” angezeigt wird, kann nicht nur als Text umgeschrieben, sondern auch durch ein Bild/Button ersetzt werden. In diesem Tutorial erfahren Sie, welche Einstellungen Sie am Template vornehmen müssen um Ihren Jump-Break Link visuell aufzubereiten oder den Text zu ändern.

--- “Sehen Sie auch das Video Tutorial ganz am Ende dieses Artikels!” ---

Schritt 1: Überprüfen Ihrer Blog Einstellungen

Gehen Sie zu Ihrem Blogger Dashboard und klicken Sie auf “Vorlage”, dann auf “HTML Bearbeiten”, dann auf “Fortfahren”. Oben Links ist eine kleine Box. Fahren Sie mit der Maus zu der Box und setzen Sie dort einen Haken mit Mausklick in die Box.

Achtung: Bevor Sie am HTML Source Code etwas verändern, sollten Sie immer eine Sicherheitskopie anfertigen. (Dies können Sie am einfachsten indem Sie den kompletten Source Code markieren, kopieren und in Notepad einfügen und mit einem Datum versehen, bevor Sie diesen dann speichern. Der Source Code kann dann im Notfall wieder mit dieser Kopie ersetzt werden)

Auf Ihrer Tastatur vor Ihnen, halten Sie die STRG – Taste gedrückt und drücken Sie auf den Buchstaben “F”. In der oberen rechten Ecke Ihres Bildschirms öffnet sich ein kleines Suchfeld. Kopieren Sie den Text in dieser unteren Box und fügen Sie diesen in das Suchfeld ein:

<b:if cond='data:post.hasJumpLink'>
 
Dieser Code sollte nun in Ihrem Editor orangefarben unterlegt sein.
 
Schritt 2: Einstellungen des Templates ändern
 
Der komplette Code den wir jetzt gemeinsam bearbeiten werden sollte in Ihrem Editor wie folgt aussehen:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

Sollte Ihr Code nicht aussehen wie in der oberen Box sondern so wie in der unteren Box hier, dann kopieren Sie nur die Zeile 3 aus der oberen Box und fügen diese auch in die 3te Zeile in Ihrem Editor ein. 

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Ihr Code sollte nun so aussehen:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

Aufbereitung: (Variante A1): Jump Link – “Read More” Text ändern -

Die einfachste und schnellste Variante ist das Ändern des < Read More > Textes. Alles was Sie machen müssen ist den Text < Read More > durch < Weiterlesen > oder < Den ganzen Artikel lesen > zu ersetzen. Was genau Sie schreiben wollen ist und bleibt Ihnen überlassen solange der Text zwischen den beiden < > Zeichen geschrieben wird.

Ihr Code könnte also so aussehen:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Weiterlesen</a>
</div>
</b:if >

 Klicken Sie auf “Vorlage speichern” und dann auf “Blog anzeigen”.

Aufbereitung: (Variante B1): Jump Link – “Bild” anstelle von “Text” einfügen

In dieser Variante ersetzen wir den Text < Read More > mit einem Bild/Button den Sie so gestalten können , das er zum Beispiel farblich oder in der Form Ihrem Template entspricht. Dazu müssen wir wieder die Zeile 3 ändern, da diese Zeile im Moment den Befehl zum Anzeigen eines Textes und nicht eines Bildes enthält. Ihr Code sollte im Moment noch so aussehen oder schon einen deutschen Text enthalten wenn Sie die Variante A1 bereits als Test durchgeführt haben:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'> Read More </a>
</div>
</b:if >

Um Anstelle eines Textes, ein Bild einzufügen, benötigen wir ein Bild, welches gehostet ist und über eine URL verfügt. Im unteren Teil dieses Artikels habe ich Ihnen einige Bild URLs zur freien Verfügung oder zum Testen eingestellt. Wenn Sie jedoch Ihre eigenen Kreationen kostenlos auf einen Host heraufladen wollen, dann lesen Sie meinen Artikel zum Thema: “Kostenlos Bilder für Blog hosten”.

Hier ist der Code den Sie nun kopieren und in Zeile 3 und anstelle von < Read More > durch den Bild Code ersetzen:

<img border="0" src='http://dl.dropbox.com/u/59399859/Buttons/wlone.jpg'/>

So sollte der Button aussehen:

Der gesamte Code sollte nun so wie hier unten aussehen:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<img border="0" src='http://dl.dropbox.com/u/59399859/Buttons/wlone.jpg'/></a>
</div>
</b:if >
 
Klicken Sie auf “Vorlage speichern” und dann auf “Blog anzeigen”.

Aufbereitung: (Variante A2): Jump Link mit “Text” vertikal ausrichten

In Variante A1 haben Sie nur den Text des Jump Links geändert aber nicht dessen Position. Wenn Sie den Jump Link lieber in der Mitte oder Rechts stehen haben wollen, dann gehen Sie wie folgt vor:

Ihr Code sollte so wie in der unteren Box aussehen, allerdings, vielleicht, bereits mit einem anderen Text als Link anstelle von < Read More >:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'> Read More </a>
</div>
</b:if >

Sollten Sie Ihren Jump Link gerne auf der rechten Seite stehen haben wollen dann nehmen Sie folgende Änderung vor: 

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="right">Read More</p></a>
</div>
</b:if >

Kopieren Sie die gelb unterlegte Zeile 3 und fügen Sie diese in Ihrem Editor auch in Zeile 3 ein. Sollten Sie Ihren Text in der Mitte stehen haben wollen, ändern Sie “right” zu “center”. Oder lieber wieder auf der linken Seite, dann ändern Sie “right” zu “left”.

Klicken Sie auf “Vorlage speichern” und dann auf “Blog anzeigen”.

Aufbereitung: (Variante B2): Jump Link mit “Bild” vertikal ausrichten

In Variante B1 haben Sie den Text des Jump Links in ein Bild/Button umgewandelt aber nicht dessen Position. Wenn Sie den Jump Link lieber in der Mitte oder Rechts stehen haben wollen, dann gehen Sie wie folgt vor:

Ihr Code sollte derzeit so wie hier in der unteren Box aussehen und der “Weiterlesen” Button sollte auf der Linken Seite in Ihrem Blog erscheinen.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<img border="0" src='http://dl.dropbox.com/u/59399859/Buttons/wlone.jpg'/></a>
</div>
</b:if >

Wenn Sie diesen Button lieber auf der rechten Seite angezeigt haben wollen, gehen Sie wie folgt vor:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="right"><img border="0" src='http://dl.dropbox.com/u/59399859/Buttons/wlone.jpg'/></p></a>
</div>
</b:if >

Kopieren Sie den gelb unterlegten Code und fügen Sie diesen in Ihrem Editor in Zeile 3 ein und überschreiben Sie damit den Code. Sollten Sie Ihr Bild/Button in der Mitte stehen haben wollen, ändern Sie “right” zu “center”. Oder lieber wieder auf der linken Seite, dann ändern Sie “right” zu “left”.

Klicken Sie auf “Vorlage speichern” und dann auf “Blog anzeigen”.

Und nun wie versprochen ein Paar Buttons als Beispiel zum Testen oder Verwenden.

http://dl.dropbox.com/u/59399859/Buttons/wlone.jpg

http://dl.dropbox.com/u/59399859/Buttons/wltwo.png

http://dl.dropbox.com/u/59399859/Buttons/wlthree.png

http://dl.dropbox.com/u/59399859/Buttons/wlfour.png

Und hier, wie versprochen, das Video Tutorial zum Artikel:

Jump Break Link in Blogger bearbeiten…