So baust du einen „Weiterlesen“-Link bei Blogger ein

- zuletzt aktualisiert am 21. September 2016

Oft wird ja auf der Startseite nicht der ganze Beitrag angezeigt, sondern nur ein paar einleitende Sätze. Wen der ganze Artikel interessiert, der klickt einfach auf „Weiterlesen“. Auf diese Weise kannst du mehrere Posts auf einer Seite unterbringen, ohne dass sie unübersichtlich wird oder die Leser ellenlang scrollen müssen, weil sie manche Einträge vielleicht gar nicht interessieren – praktisch!

Wie du eine solche Weiterlesen-Funktion in Blogger einbaust, erfährst du in diesem Tutorial.

Den Weiterlesen-Link setzen: Jump Break

Beim Verfassen eines Blogposts platzierst du den Cursor an der gewünschten Stelle und klickst dann oben in der Leiste auf den Button namens „Jump Break einfügen“.

Weiterlesen-Link bei Blogger - Tutorial

Dadurch erscheint auf der Starteite deines Blogs ein „Weitere Informationen“-Link. Im Post selber steht dann zuerst der einführende Teil und danach der restliche Text; bei Blogger heißt der übrigens After the Jump.

Weiterlesen-Link bei Blogger - Tutorial

Den Linktext verändern

Wenn du statt des sperrigen „Weitere Informationen“ gerne einen anderen Text dort stehen hättest, kannst du das leicht austauschen: Klicke auf Design » Layout » Blogpost.

In dem sich öffnenden PopUp kannst du oben einen beliebigen Text eingeben.

Weiterlesen-Link bei Blogger - Tutorial

Tipp: wie du siehst, kannst du hier auch verschiedene Symbole verwenden, beispielsweise Pfeile. Ich habe hier mal ein paar dekorative Symbole aufgelistet, du du einfach mit Copy & Paste einfügen kannst: » ⇒ → › • ♣ ♦ ♥ ♠ ◊ ∗

Den schnöden Link in einen schicken Button verwandeln

Als nächstes gehen wir einen Schritt weiter und machen aus dem einfachen Textlink einen hübschen Button. 🙂

Dazu habe ich zunächst das Pfeilzeichen aus dem Linktext gelöscht.
Jetzt kommen einige CSS-Anweisungen ins Spiel: wechsle zu Vorlage » Anpassen » Erweitert » CSS hinzufügen.

.jump-link  a {
     background: #3FB8AF;
     color: #fff;
     letter-spacing: 1px;
     padding: 5px;
     text-transform: uppercase;
     transition: .4s all ease;
}

.jump-link  a:hover {
     background: #008C9E;
     text-decoration: none;
}

Damit geben wir dem Link von oben nach unten eine Hintergrund- und eine Textfarbe, fügen zwischen den Buchstaben ein bisschen Platz ein, verpassen dem Button 5px Innenabstand und lassen den Link in Großbuchstaben anzeigen. Die Transition-Angaben sorgen dafür, dass der Farbwechsel beim Darüberfahren mit der Maus nicht abrupt ist, sondern etwas sanfter. Die hover-Angabe legt dann genau diese andere Hintergrundfarbe fest, und unterstrichen werden soll der Link dann bitte auch nicht.

So sieht’s aus:

eiterlesen-Funktion bei Blogger / Blogspot einbauen

Viel Spaß beim Anpassen! 🙂

Klick um zu Tweeten

    Kommentare

  1. Nina M. am 13. Juli 2013 um 17:40:

    Ah cool, ich hab mich schon gefragt, wie ich das hässliche Ding zum Weiterklicken irgendwie hübscher machen kann. Dank dir weiß ich jetzt wie ich das machen kann. 🙂
    Danke! Deine Tutorials sind wirklich sehr hilfreich.
    Liebe Grüßchen,
    Nina

    • Anne am 13. Juli 2013 um 18:42:

      Gern geschehen! 🙂
      Momentan tippe ich an einem Fotografie-Tutorial, das wird vermutlich im Laufe der nächsten Woche online gehen. 🙂

  2. Phinphin am 20. Juli 2013 um 9:10:

    Schönes Tutorial.
    Bei manchen heißt es übrigens nicht:

    „.jump-link a {“
    sondern
    „a.readmore {“

    Liebe Grüße

  3. Regina am 6. August 2013 um 18:25:

    Gibt es eine Möglichkeit den Weiterlesen-Button von der linken Seite auf die rechte zu verschieben?

  4. OktoberKind am 8. November 2013 um 10:17:

    Aaah, ich danke dir!! Ich versuche das seit fast 2 Jahren zu ändern und habe nie rausgefunden, wie. Endlich hab ich diesen doofen Originaltext weggekriegt!

    LG, OktoberKind 🙂

  5. Anja am 3. März 2015 um 22:23:

    Hey, ich habe deinen Code angewendet und ich hätte noch zwei kleine Veränderungswünsche, bei denen du mir hoffentlich weiterhelfen kannst. Die Ecken des Buttons sind momentan sehr spitz, kann man die ein ganz klein wenig abrunden? Außerdem klebt der Button wirklich komplett am Inhalt dran und ich hätte zwischen dem Inhalt und dem Button gerne etwas mehr Abstand. Mit margin-top habe ich es schon probiert, da verändert sich leider nichts 🙁 Liebe Grüße, Anja

  6. Jassi am 8. Mai 2015 um 12:23:

    Ich finde das Tutorial total klasse! Ich habe allerdings ein Problem. Ich möchte die Möglichkeit „Weiterlesen“ über einen Auto Read more einfügen. Das habe ich auch gemacht. Nur weiß ich nicht wie ich da diesen langweiligen Text in einen Button umwandle geschweige denn wo ich die CSS einfügen muss..
    Kannst du mir helfen? Ich bin am Verzweifeln 🙁

    http://www.jasminjuin.blogspot.de

    • Anne am 8. Mai 2015 um 13:18:

      Hallo Jassi,
      indem du dem Link eine Hintergrundfarbe gibst und ihn durch Padding (Innenabstand) etwas größer machst, bekommst du das Button-Feeling hin. 🙂

      Bei dir wäre das also beispielsweise:

      
      a.more {
        color: #fff; // weiße Schrift
        background: #000; // schwarzer Hintergrund
        text-decoration: none; // keine Unterstreichung
        padding: 10px; // Inennabstand
        display: inline-block; // als Inline-Blockelement anzeigen (benötigt für Außenabstand)
      }

      Wo du das CSS bei Blogger einfügst, habe ich hier beschrieben: http://neontrauma.de/bloggen/coding-love/html-css-grundlagen-teil-2.php

      Liebe Grüße
      Anne

  7. Ladylike0 am 30. Juli 2015 um 22:45:

    Das hat mir ungemein weitergeholfen! Toller Post und Dankeschön! ♥
    Liebe Grüße
    Lady ♥

  8. Hauntedcupcake am 19. Dezember 2015 um 13:34:

    Hallo

    Tolles Tutorial, hast mir damit sehr geholfen!

    Nun hätte ich zwei Fragen dazu:
    1. würde ich im Button gerne die Schrift ändern. Ich hab mich da schon schlau gemacht und herausgefunden, dass der Code dazu
    „font-family: ‚Josefin Sans‘;“ wäre (für meine Schriftart), nur schaffe ich es nicht, dies in den .jump-link einzubauen, dass er auch funktioniert. Kannst du mir da helfen?

    2. Top wäre natürlich, wenn ich anstelle des Textes da ein Bild einbauen könnte, wo zB „Read more“ draufsteht, also damit man das Bild anklicken kann und nicht den Text. Weisst du, wie ich das meine? Und wenn ja, wie kann ich das als Noob bewerkstelligen?

    Liebe Grüsse
    Katy

    • Anne am 21. Dezember 2015 um 8:12:

      Hallo Katy! 🙂

      Mh, ich habe gerade mal bei dir im Blog geschaut – dein „Weiterlesen“-Link verwendet schon Josefin Sans als Schriftart, wie alles auf deiner Seite. 🙂

      Wenn du anstelle des Texts ein Bild verwenden möchtest, baust du in das HTML deines Layouts einfach den passenden Code ein:

      1. Lade dein gewünschtes Bild hoch und kopier dir die URL (bspw. „http://dein-blog.de/dein-bild.jpg“
      2. Geh auf Vorlage –> HTML bearbeiten
      3. Such nach „jump-link“ – das wird an genau einer Stelle verwendet (mit Strg+F kannst du den ganzen Quellcode einfach durchsuchen)
      4. Die Stelle müsste so aussehen: <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/ ></a>
        </div>
      5. Anstelle des Platzhalters für den „Weiterlesen“-Text bauen wir da jetzt das Bild ein:
        <data:post.jumpText/> ersetzt du durch:
        <img src="http://dein-blog.de/dein-bild.jpg" alt="Weiterlesen" />

      Voilà! 🙂
      Ich hoffe, das hilft dir weiter? 🙂

  9. Luxi am 14. Januar 2016 um 21:06:

    Hallo,

    ich bin so froh dieses kleine und einfache Tutorial gefunden zu haben bei dir. Habe mein Blog erst seit gestern und habe verzweifelt nach dem Weiterlesen Knopf gesucht. *lach* Habe dein CSS Code noch ein wenig angepasst nur habe ich die Schriftgröße von dem Weiterlesen nicht ändern können. /: Die gängigen CSS-Anweisungen (laut Google) für die Schriftgröße haben nicht geklappt, vielleicht geht es auch allgemein nicht bei Blogger/Blogspot.

    Liebe Grüße Luxi

  10. Jassii am 16. Januar 2016 um 18:41:

    Hey,
    wie mache ich denn einen CSS Befehl auch für den Weiterlesen link wenn ich den gerne mittig etwas größer und in dieser farbe bc6ab6 und in der Schriftart Dancing Script haben möchte ?

    Wäre Super wenn du mir helfen könntest. Danke

    • Anne am 17. Januar 2016 um 8:41:

      Hallo Jassii,

      also:

      Wir sagen erstmal dem Block, der den „Weiterlesen“-Link beinhaltet, dass sein Inhalt zentriert sein soll:

      .jump-link {
         text-align: center;
      }

      Dann kommt der Link selber an die Reihe:

      .jump-link  a {
      color: #bc6ab6;
      font-size: 16px;
      font-family: 'Dancing Script', cursive;
      }

      Mit dem Wert der font-size für die Schriftgröße kannst du natürlich herumspielen, bis es für dich passt.
      Guck am besten auch mal hier, da habe ich die Grundlagen von der Schriftgestaltung mit HTML & CSS erklärt: http://neontrauma.de/bloggen/schriftgestaltung-mit-html-css.php

      🙂

  11. kathiduck am 11. Februar 2016 um 0:03:

    Hey,

    ich bin gerade durch Zufall auf deine Seite gestoßen, als ich nach Hilfe für das Einbauen eines Weiterlesen Links gesucht habe und ich bin bei dir absolut fündig geworden. Dank deiner tollen Erklärung habe ich alles gleich auf Anhieb verstanden und konnte erst einen Button und dann ein Bild als Weiterlesen-Button einbauen. Vielen lieben Dank für diesen tollen Beitrag!!!! 🙂

    LG,
    Kathi

  12. Sophie am 27. März 2016 um 15:39:

    Ich habe ien Problem. Und zwar wird mir nichts angeziegt wenn ich auf den Button drücke. Mein Layoit ist dann nur verschoben. Die rechte Sidebar ist dann auf der Linken Seite und mit wird kein Text angezeigt.
    vielleicht spinnt mein Pc auch nur aber könntest du mal schauen und mit helfen, falls es bei dir auch so ist?

    http://justinesophie.blogspot.de/

    • Anne am 29. März 2016 um 4:46:

      Hallo Sophie,

      mh, bei dir im Blog finde ich gerade keinen „Weiterlesen“-Link.
      Generell kann es aber sein, dass du ein so spezielles Template verwendest, dass diese Standard-Lösung nicht ganz einwandfrei funktioniert. Guck mal hier, da hat jemand dieses Problem mitsamt Lösung beschrieben: http://www.bloggercandy.com/faqs-how-to/jump-break-not-working/

      Ich hoffe, das hilft dir weiter? 🙂

      Liebe Grüße
      Anne

  13. Caro am 24. Mai 2016 um 21:48:

    Danke du hast mir unglaublich weitergeholfen!! 🙂

    Liebe Grüße

    getyourinspo.blogspot.de

  14. Patricia am 8. Juni 2016 um 15:12:

    Hallo meine Liebe,
    weißt Du zufällig wie man den „Read More Button“ ich habe im HTML ein Bild anstelle des Textes eingefügt (den man bei meinem Desktop Layout aber nicht braucht bzw. sieht. Für meine mobile Ansicht würde ich aber gerne diesen Button sichtbar machen, dort ist aber nur die Standard Blogger Version zu sehen. Also meine Frage ist, wenn ja wo im Code man den Mobilen Button ändern kann.

    Liebste Grüße aus Berlin, deine Patricia

  15. Katharina am 13. September 2016 um 14:04:

    Hallo
    die Anleitung ist wirklich super toll und endlich mal verständlich. 😉
    aber bei mir klappt es nicht, der ganze Text wird trotzdem angezeigt

  16. Julia von Brandis am 11. Januar 2017 um 18:46:

    Großartig toll!!!
    Danke dir von Herzen!
    Liebste Grüße von Julia

  17. Susanne am 11. April 2017 um 12:25:

    Hallo Anne,
    ich habe mir vor zwei Tagen vorgenommen meinen Blog ein bisschen anzupassen, was Sidebar und Buttons angeht und habe mich an deine hilfreichen Anleitungen erinnert.
    Der „Weiterlesen“-Button ist das erste das ich jetzt geändert habe und es hat super funktioniert! Danke schön für die tolle Anleitung!

    Liebe Grüße
    Susanne

  18. Pascale am 28. Mai 2017 um 17:23:

    Vielen vielen Dank für deine Hilfe! ♥

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.