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/

27 Kommentare

  1. wow echt klasse, dann kann ich morgen direkt rumbasteln ;)

    AntwortenLöschen
  2. Das ist super klasse ! Dankeschön!!
    Habs direkt eingebaut ;)

    AntwortenLöschen
  3. Ich danke dir :)
    Bin total begeistert wie viel man selbst ohne große html Kenntnisse machen kann.

    AntwortenLöschen
  4. Dieser Kommentar wurde vom Autor entfernt.

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

    AntwortenLöschen
  6. 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 ♥ ♥ ♥

    AntwortenLöschen
    Antworten
    1. Vielleicht hilft dir das schon weiter: http://www.copypastelove.org/2013/06/suchen-finden-mit-dem-neuem-html-editor.html

      Löschen
  7. 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!

    AntwortenLöschen
    Antworten
    1. An welcher Stelle muss man das /img ergänzen?

      Löschen
  8. 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

    AntwortenLöschen
  9. Heeeeeeeeeeeeeeeeeel erg bedankt!

    http://elineeee.blogspot.com/

    AntwortenLöschen
  10. 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

    AntwortenLöschen
  11. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  12. Klasse, hat super geklappt! Danke!
    LG Anna

    AntwortenLöschen
  13. 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???

    AntwortenLöschen
  14. 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

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

    AntwortenLöschen
  16. hey :-)
    bei mir funktioniert der gesamte jump break überhaupt nicht :-(
    Kannst du mir vllt helfen?
    Danke!

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

    AntwortenLöschen
  17. 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

    AntwortenLöschen
    Antworten
    1. ja ich glaube das liegt einfach an der neuern Version :)
      Du siehst doch den kompletten HTML-Code und alles?

      Löschen
  18. 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:(

    AntwortenLöschen
  19. 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:(

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

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!