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.
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:
<div class=’jump-link’>
<a expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’><data:post.jumpText/></a>
</div>
</b:if>
(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 + "#more"’ 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.
<img border='0' src='hier deine Bild-URL einfügen'/>
<b:if cond=’data:post.hasJumpLink’>
<div class=’jump-link’>
<a expr:href=’data:post.url + "#more"’ 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.
<b:if cond=’data:post.hasJumpLink’>
<div class=’jump-link’>
<a expr:href=’data:post.url + "#more"’ 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/
Nikki N.
26. January 2013 at 20:46wow echt klasse, dann kann ich morgen direkt rumbasteln 😉
Anonym
27. January 2013 at 12:01cool, vielen Dank!
Emell
27. January 2013 at 23:33Das ist super klasse ! Dankeschön!!
Habs direkt eingebaut 😉
Anonym
28. January 2013 at 21:27Toll! 🙂
Maddy
16. February 2013 at 12:56Ich danke dir 🙂
Bin total begeistert wie viel man selbst ohne große html Kenntnisse machen kann.
Johanna Tewes
17. February 2013 at 16:52Danke für euer liebes Feedback!
Lisa Tihanyi
26. March 2013 at 20:55Super! So ein Bildchen hab ich gleich bei mir im Blog eingebaut. Danke für das tolle Tutorial!
Gränni Sew
5. July 2013 at 12:05die 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 ♥ ♥ ♥
Johanna Tewes
10. July 2013 at 10:21Vielleicht hilft dir das schon weiter: http://www.lovemira.de/category/tipps-tutorials/2013/06/suchen-finden-mit-dem-neuem-html-editor.html
Wortwanderin
6. January 2014 at 15:04In 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!
Jackie K
16. January 2016 at 14:28An welcher Stelle muss man das /img ergänzen?
cherryphil
16. March 2014 at 15:17Wahnsinn! 1000 Dank!
Hilal Yildiz
1. April 2014 at 18:25Richtig tolles Tutorial, aber bei mir ist das einfach viel zu klein :/ Wie kriege ich das größer?
Kisses,
Hilal ♥ von http://nisahilalyildiz.blogspot.com
eline marielle
27. June 2014 at 9:32Heeeeeeeeeeeeeeeeeel erg bedankt!
http://elineeee.blogspot.com/
Anonym
19. August 2014 at 13:09Vielen 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
Books Reading
26. October 2014 at 16:39Klasse, hat super geklappt! Danke!
LG Anna
mondoligure
21. December 2014 at 13:28Danke 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???
Mandys Bücherecke
6. May 2015 at 18:43Huhu, 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
Anonym
28. June 2015 at 0:28Wie bekommt man das denn hin, wenn man nur den Text zentrieren möchte, wo kommt dann der Code hin?
LiyahGoesHollywood
13. August 2015 at 8:17hey 🙂
bei mir funktioniert der gesamte jump break überhaupt nicht 🙁
Kannst du mir vllt helfen?
Danke!
xoxo, L.
—————-
LiyahGoesHollywood.blogspot.com
marie justinger
15. October 2015 at 20:58heey 🙂
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
Alexandra
14. November 2015 at 14:44ja ich glaube das liegt einfach an der neuern Version 🙂
Du siehst doch den kompletten HTML-Code und alles?
Cara
4. December 2015 at 17:29schö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:(
Cara
4. December 2015 at 17:32schö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:(
Lilly Stolpe
19. February 2017 at 19:36Und was muss ich tun, wenn ich ein Bild mit einem Programm selbst gemacht habe? Weil, dazu gibt es ja keinen Bildcode.