Individuelle Jump Break Links einfügen ♥♥

Ahoi, mein Name ist Johanna und auf meinem Kunstblog Art Armada findet ihr viele geniale Arbeiten von jungen kreativen Köpfen, die mich inspiriert und zum Staunen gebracht haben. Da mein Blog dementsprechend viele Bilder enthält, hatte ich bei manchen Posts das Problem, dass der klassische Jump Break Link mit einem langweiligen „Weiterlesen“ nach dem Posteintrag einfach untergegangen ist.  

Deshalb verrate ich euch in diesem Tutorial, wie man Jump Break Links individueller gestalten kann. Mira hatte euch ja hier schon gezeigt, wie man einen solchen „Weiterlesen-Link“ allgemein in einen Post einfügt. Jetzt geht es darum, wie ihr den „Weiterlesen“-Text ändern oder den Jump Break Link durch selbst gestaltete Bilder oder Buttons ersetzen könnt, sodass er zu einem echten Hingucker wird.

Schritt 1

Achtung, HTML-Vorlage schön brav abspeichern, bevor ihr sie bearbeitet!
Danach startet ihr unter Design >> Vorlage >> HTML bearbeiten und setzt einen Haken bei Widget-Vorlagen komplett anzeigen.

Dann sucht ihr mit der F3 Taste nach: <b:if cond='data:post.hasJumpLink'>

Der Code, den wir bearbeiten müssen, sieht dann ungefähr so aus:

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

Schritt  2

Um den Linktext zu ändern, ersetzt ihr <data:post.jumpText/> (oben blau markiert) durch: Read More oder mehr Bilder oder was ihr dort stehen haben möchtet. 

 Der Code dazu sieht dann so aus:
 <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Read More</a>
      </div>
    </b:if>

Lasst euch das Ergebnis in der Vorschau anzeigen und wenn ihr zufrieden seid, klickt ihr auf >> Vorlage speichern >> Blog anzeigen.

Schritt  3

Wenn ihr anstelle des Textes einen Button oder ein Bild einfügen wollt, dann ersetzt ihr Read More durch den entsprechenden Bildcode: <img border='0' src='hier deine Bild-URL einfügen'/>

Der ganze Code sieht dann so aus:
  <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img border='0' src='hier deine Bild-URL einfügen'/></a>
      </div>
    </b:if>

Danach wieder auf >>Vorlage speichern klicken und >> Blog anzeigen lassen.

Schritt 4

Soll der Button oder der Jump Link Text an einer anderen Stelle unter dem Posttext platziert werden, ergänzt ihr außerdem vor dem Bildcode noch:

<p align='center'> (wenn ihr ihn mittig haben wollt).

<p align='right'> (wenn ihr ihn rechts haben wollt).

<p align='left'> (wenn ihr ihn links haben wollt).

und direkt dahinter ein: </p>

Das sieht dann z. B. so aus:
 <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><p align='center'><img border='0' src='hier deine Bild-URL einfügen'/></p></a>
      </div>
    </b:if>

FERTIG. 

Tipp: Einen Button-Generator findet ihr hier: http://jirox.net/AsButtonGen/