Tutorial: Weiterlesen-Funktion bzw Jump Break im Blog einfügen & gestalten

Dienstag, 21. April 2015

Ihr kennt doch bestimmt alle die Weiterlesen-Funktion eures Blogs, oder? Sie wird erzeugt indem man im Post wann man möchte auf dieses kleine Zeichen klickt:

Sie ist sehr praktisch wenn man einen langen post zB eine Rezension geschrieben hat und nicht möchte das der ganze Post sofort angezeigt wird wenn man auf den Blog geht. Wenn man noch nicht an seinem Blog getan hat sieht das ganze aber so aus:

Was natürlich nicht so schön aussieht. Es ist viel zu klein, unscheinbar und einfach urghs. Desshalb erkläre ich euch heute auch wie ihr das ändern könnt :)

Zu allererst geht ihr in euer HTML und sucht mit der Suchmaschine (STRG + F) nach
<data:post.jumpText/>

Die gelb markierte Stelle (die, nach der ihr gesucht habt), löscht ihr nun einfach raus. Das war der einfache Teil ^^ Ab jetzt ist euch eigentlich keine Grenze gesetzt, ihr könnt machen was ihr wollt.
Als Beispieltext nehmen wir jetzt einfach mal Hier geht es weiter

Wenn ihr eine andere Schriftart wollt :
<span style="font-family: Milonga;">Hier geht es weiter</span>
sucht euch hier einfach eine raus :)

Wenn ihr wollt das die Schriftart größer ist:
<span style="font-size: 12px;">Hier geht es weiter</span>
Statt 12 könnt ihr einfach eure gewünschte Zahl eingeben.

Wenn ihr wollt das die Schriftart fettgedruckt sein soll:
<b>Hier geht es weiter</b>

Wenn sie kursiv sein soll:
<i>Hier geht es weiter</i>

Wenn sie unterstrichen sein soll:
<u>Hier geht es weiter</u>

Wenn sie links, zentriert oder rechts sein soll:
<p align='center'>Hier geht es weiter</p>
Statt center einfach left für links und right für rechts reinschreiben.

Wenn er eine andere Farbe haben soll:
<span style="color: #A69630;">Hier geht es weiter</span>
Sucht euch hier einfach eine Farbe raus und ergänzt sie.

Wenn ihr ein Bild haben wollt ladet es auf abload.de hoch. (am besten ca 200pixel breit)
<img src="EUER BILD" />
und fügt bei EUER 'BILD' den Direktlink eures Bildes von abload ein. Auch ein Bild kann man zentrieren oder nach rechts verschieben, der Code dazu ist oben.

 Und das wars auch schon :) 
Ihr könnt das ganze anpassen wie ihr wollt, es gibt keine Grenzen. Bei Fragen meldet euch einfach :)

Kommentare:

  1. Huhu, tolle Anleitung! Vielleicht kannst du mir ja helfen: bei mir funktioniert das mit JumpBreak nicht?! Immer, wenn ich sie einfüge passiert: NICHTS! Woran könnte das liegen?

    LG, Mary <3
    http://marys-buecherwelten.blogspot.de/

    AntwortenLöschen
  2. Bei mir habe ich das gleiche Problem! Es passiert einfach nichts!!

    AntwortenLöschen
  3. Wow! Vielen lieben Dank für diese tolle Anleitung!
    Nach einigen erfolglosen Versuchen hat es nun endlich geklappt.

    LG Jenny
    http://lullabys-buecherkiste.blogspot.de/

    AntwortenLöschen
  4. Ich habe auch einen Hintergrund bei meinem Jump-link, wie kann ich diesen transparent gestalten? :)

    AntwortenLöschen
    Antworten
    1. Dafür brauchst du GIMP oder andere Programme die Transparente Bilder erstellen können :)

      Löschen
  5. bei mir findet der die Textstelle nicht im HTML

    AntwortenLöschen
    Antworten
    1. Dann such mal nur nach "jumptext" mal sehen ob du dann was findest :)

      Löschen
    2. nein das findet er auch nicht :(

      Löschen
    3. Auch nicht wenn du nur nach jump suchst?
      Wenn du selbst dann noch nichts findest weiß ich auch nicht bescheid. Hast du dir eine Design-Vorlage für deinen Blog aus dem Internet installiert? Das kann manchmal daran liegen, da solche Vorlagen ganz ganz oft keine Codes enthalten die in den normalen Blogger-Vorlagen sind. Dadurch kann man natürlich auch keine Tutorials dazu anwenden.

      Löschen
    4. Hallo Ines,
      bei mir findet sich weit und breit auch kein jump. Meine Vorlage stammt von blogger, meinen Blog gibt es erst seit Juni 2015, also noch nicht so sehr lange. Hast du noch einen Tipp für mich?
      Viele Grüße
      Ina

      Löschen
  6. Oh ich bin dir so dankbar!
    Ich habe heute den gesamten Nachmittag versucht das irgendwie hinzubekommen - habe auf zig Seiten gesucht und ausprobiert und NIE hat es geklappt, ich war echt genervt. Und dann dacht ich mit - okay eine letzte Seite ausprobieren, vielleicht kann die mir weiterhelfen. Und siehe da! Du hast es geschafft! Vielen lieben Danke!!!
    Ganz liebe Gruesse aus Schweden!
    Alexa

    AntwortenLöschen
  7. Ich habe Ewigkeiten nach einer einfachen Anleitung gesucht und jetzt hab ich sie endlich gefunden :D
    Hallelujah, ich hab schon nicht mehr dran geglaubt.
    Vielen, vielen Dank :D

    (Ich hab den Code ein wenig abgewandelt, um mein Bild noch zusätzlich zu zentrieren, aber ohne dich hätte ich es nie geschafft. ^^)

    Liebe Grüße
    Anni-chan

    AntwortenLöschen
    Antworten
    1. Wie man das zentriert steht ebenfalls oben, aber egal :D Freut mich das es geklappt hat! :)

      Löschen
  8. Hallo,
    Erstmal vielen Dank für deine Anleitung. Allerdinghs habe ich ein verwandtes (kleines Problem mit der jump-text Funktion und möchte fragen, ob du vielleicht Rat weißt?

    Fragen:
    1. Wenn ich den jumpbreak in einen Post einfüge, wird der Link darunter mit "Weitere Informationen>>" angezeigt (Standardtext). Hast du einen Tipp wie ich den Linktext für mich anpassen kann?
    2. wie bekommt man den jumpbreak wieder aus dem Text raus, wenn man sich nach dem einfügen dagegen entschieden hat?

    Ich sehe da gerade garnicht durch und die offiziellen Hilfeseiten waren mir leider keine Hilfe, weshalb ich mich nun hoffnungsfroh an dich wende. ;-)

    Liebe Grüsse, Pat

    AntwortenLöschen
    Antworten
    1. Hi du!
      Les das Tutorial nochmal :D Ganz oben steht ja das man nach suchen und diesen löschen soll, denn dieser Code macht das dort "Weitere Informationen>>" steht. Stattdessen fügt du an seiner Stelle den Text ein den du angezeigt haben möchtest, wie das alles klappt steht oben :)

      Wenn du den JumpBreak wieder entfernen möchtest... also in deinem Post wird ja eine graue, dicke Linie dort angezeigt wo später der JumpBreak sitzt. Klicke einfach unter diese Linie auf eine freie Zeile und drücke solange auf den Lösch-Button deiner Tastatur bis er wieder weg ist :)

      Liebe Grüße, ich hoffe ich konnte helfen!

      Löschen
  9. Hallo,
    vielen Dank für das Tutorial! Es hat alles super geklappt. Nur als ich ein paar Stunden später einen neuen Beitrag posten wollte und mir den Blog angeschaut habe, war mein Bild wieder weg. Weißt du vielleicht woran es liegen könnte?

    Liebe Grüße :)

    AntwortenLöschen
    Antworten
    1. Du musst den Jump-Break jedes mal neu in einen Post einfügen :)

      Löschen
    2. Hehe, ja das habe ich. Aber selbst bei den Posts, wo ich den schon eingefügt habe, war es wieder weg. In meinem HTML Code hatte sich das obere "Jump" gelöscht, aber nun geht es wieder :) Danke!

      Löschen
  10. ich habe ein Problem, wenn ich bei meinen Blog auf Continue reading drauf gehe, dann werde ich weiter geleitet aber auf eine Leere seite man sieht nur das Layout und selnbst das ist falsch... hat jemand iene Idee woran das liegt?

    AntwortenLöschen
    Antworten
    1. Hast du versucht einen Link als Jump-Link einzufügen? Kannst du mir mal den Code geben den du als Jump-Link eingefügt hast?

      Löschen