Tipps & Tutorials, tutorial

Individuelle Jump Break Linktexte 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/

25 Comments

  1. Nikki N.

    26. January 2013 at 20:46

    wow echt klasse, dann kann ich morgen direkt rumbasteln 😉

  2. Anonym

    27. January 2013 at 12:01

    cool, vielen Dank!

  3. Emell

    27. January 2013 at 23:33

    Das ist super klasse ! Dankeschön!!
    Habs direkt eingebaut 😉

  4. Maddy

    16. February 2013 at 12:56

    Ich danke dir 🙂
    Bin total begeistert wie viel man selbst ohne große html Kenntnisse machen kann.

  5. Johanna Tewes

    17. February 2013 at 16:52

    Danke für euer liebes Feedback!

  6. Lisa Tihanyi

    26. March 2013 at 20:55

    Super! So ein Bildchen hab ich gleich bei mir im Blog eingebaut. Danke für das tolle Tutorial!

  7. Gränni Sew

    5. July 2013 at 12:05

    die vorlage für html ist schon wieder erneuert und man kann nur nach einzelnen widgets suchen. der von die angegebene code wird auch über die suchleiste nicht gefunden. schade! bestimmt ein gutes tuto. vielleicht kannst du es nochmal aktualisieren? wäre sehr lieb ♥ ♥ ♥

  8. Wortwanderin

    6. January 2014 at 15:04

    In Schritt 3 meckert der Editor, dass der Befehl img border='0' src='hier deine Bild-URL einfügen'/ noch geschlossen werden muss. Vielleicht könnt ihr in der Erklärung noch ein /img ergänzen, damit es auch reibungslos für alle klappt 🙂

    Tutorial hat mir sehr geholfen, danke!

    1. Jackie K

      16. January 2016 at 14:28

      An welcher Stelle muss man das /img ergänzen?

  9. Hilal Yildiz

    1. April 2014 at 18:25

    Richtig tolles Tutorial, aber bei mir ist das einfach viel zu klein :/ Wie kriege ich das größer?
    Kisses,
    Hilal ♥ von http://nisahilalyildiz.blogspot.com

  10. Anonym

    19. August 2014 at 13:09

    Vielen dank! Mich hat es immer so gestört, dass der weiterlesen button links ist aber jetzt habe ich es geschafft mir selber einen hübschen zu basteln und ihn jetzt mittig zu haben 🙂

    victoriatheresia.blosgpot.com

  11. Books Reading

    26. October 2014 at 16:39

    Klasse, hat super geklappt! Danke!
    LG Anna

  12. mondoligure

    21. December 2014 at 13:28

    Danke für das Tutorial. Aber wie schaffe ich es, daß der Text zum Jump Break rechts im Anschluß an den Text und nicht in einer neuen Zeile steht???

  13. Mandys Bücherecke

    6. May 2015 at 18:43

    Huhu, ich habe vor Ewigkeiten das schon mal nach deiner Anleitung gemacht, aber nun klappt es mit dem Suchen nicht mehr. Eventuell liet es daran, dass ich keinen Haken bei Widget-Vorlagen komplett anzeigen machen kann. Den finde ich nicht. Ich weuß nicht, was ich noch machen soll. Hast du einen Tipp?
    Liebe Grüße

  14. Anonym

    28. June 2015 at 0:28

    Wie bekommt man das denn hin, wenn man nur den Text zentrieren möchte, wo kommt dann der Code hin?

  15. LiyahGoesHollywood

    13. August 2015 at 8:17

    hey 🙂
    bei mir funktioniert der gesamte jump break überhaupt nicht 🙁
    Kannst du mir vllt helfen?
    Danke!

    xoxo, L.
    —————-
    LiyahGoesHollywood.blogspot.com

  16. marie justinger

    15. October 2015 at 20:58

    heey 🙂
    Bei mir kann ich keine Haken bei Widget-Vorlagen komplett anzeigen machen. Hast du vlt eine Idee woran das liegen könnte?
    Liebe Grüße

    1. Alexandra

      14. November 2015 at 14:44

      ja ich glaube das liegt einfach an der neuern Version 🙂
      Du siehst doch den kompletten HTML-Code und alles?

  17. Cara

    4. December 2015 at 17:29

    schönes tutorial, ich suche schon lange tutorials zum bearbeiten des weiterlesen-links, etc. leider findet es bei mir nie die HTML-Links, also kann ich es leider nicht anwenden:(

  18. Cara

    4. December 2015 at 17:32

    schönes tutorial, ich suche schon lange tutorials zum bearbeiten des weiterlesen-links, etc. leider findet es bei mir nie die HTML-Links, also kann ich es leider nicht anwenden:(

  19. Lilly Stolpe

    19. February 2017 at 19:36

    Und was muss ich tun, wenn ich ein Bild mit einem Programm selbst gemacht habe? Weil, dazu gibt es ja keinen Bildcode.

Leave a Reply