Minima Tutorials, Tipps & Tutorials, tutorial

Eigene “Weiterblättern”-Links

Hier ist endlich mal wieder Neele von vanillebrause 🙂 Heute möchte ich euch zeigen, wie ihr eure “Weiterblättern”-Links selbst gestalten könnt.
Normalerweise sehen die Links zum Blättern meistens so aus:

Ihr könnt nun entweder den Text an sich ändern, also statt “Neuere Posts” zum Beispiel “Vorblättern” und statt “Ältere Posts” zum Beispiel “Zurückblättern” schreiben. Dabei könnt ihr auch das gesamte Erscheinungsbild der unteren Linkleiste ändern, indem ihr es wie hier macht und kleine Herzchengrafiken zwischen den Links einfügt:
Eine andere Möglichkeit wäre, dass ihr den Text durch Grafiken ersetzt, zum Beispiel soetwas:

Code suchen

Zunächst sucht ihr die richtige Stelle im Quellcode eures Blogdesigns, indem ihr in der linken Seitenleiste auf “Vorlage” und anschließend “HTML bearbeiten klickt”. Nun klickt ihr in das Fenster mit dem HTML-Code und drückt “Strg + F” oder bei Mac-Benutzern “cmd + F”, um im Code zu suchen. Nun sucht ihr nach folgender Zeile:
<b:includable id='nextprev'>

Diese klappt ihr anschließend mithilfe des Pfeiles am linken Rand des Editors aus. Es erscheint dieser Code:

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
OPTIONALE GRAFIK LINKS      <span id='blog-pager-newer-link'>      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>OPTIONALE GRAFIK RECHTS  
</b:if>
    <b:if cond='data:olderPageUrl'>
OPTIONALE GRAFIK LINKS      <span id='blog-pager-older-link'>      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>OPTIONALE GRAFIK RECHTS  
</b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div><div class='clear'/>

Code ersetzen

<data:newerPageTitle/> ersetzt ihr durch euren gewünschten Text für die “Neueren Posts”, also zum Beispiel “Weiterblättern”. Ihr könnt auch Grafiken einfügen, indem ihr einfach wie gewohnt den Image-Tag einfügt, also zum Beispiel:

<img src="URLDEINESBILDES" border="0" />

(border=”0″, damit euer Bild im Internet Explorer keinen Rand hat)

Genau dasselbe könnt ihr mit <data:olderPageTitle/> (“Ältere Posts”) und <data:homeMsg/> (Startseite) machen.
Wenn euch der Abstand zwischen den Links stört, löscht ihr einfach die Orange markierten Codebausteine.
Wenn ihr kleine Grafiken zwischen den Links einfügen wollt, macht ihr das an den Lila markierten Stellen. (Je nachdem, ob man bei euch auf der linken oder rechten Seite weiterblättert / zurückblättert, müsst ihr die Grafiken entweder links oder rechts von dem jeweiligen Link einfügen.

Ich hoffe, euch hat mein Tutorial gefallen.
Fragen könnt ihr gerne in den Kommentaren stellen 🙂

28 Comments

  1. LovisiLeni

    24. September 2013 at 17:54

    Genial! Hab ich letztens in einem anderen Tutorial gelesen (allerdings auf Englisch) und da hats nicht funktioniert. Nach eurer Beschreibung klappts! DANKE 🙂

  2. FairyFaraway

    25. September 2013 at 7:52

    uhh das muss ich auch mal versuchen, das ist doch wesentlich hübscher und origineller 😉 1000 dank viele Grüße Anina

  3. FairyFaraway

    25. September 2013 at 7:52

    uhh das muss ich auch mal versuchen, das ist doch wesentlich hübscher und origineller 😉 1000 dank viele Grüße Anina

  4. Elske

    27. September 2013 at 17:23

    Super Tutorial, danke 🙂
    Hast du vielleicht einen Tipp, wo man solche hübschen Grafiken kostenlos bekommen kann?

    Liebe Grüße
    Elske

    1. neele ♥

      2. October 2013 at 10:01

      Sorry, aber solche Grafiken hab ich noch nirgends entdeckt 😉

  5. Sarah Morgan

    30. September 2013 at 9:03

    Huhu, ich würde das sehr gerne auch machen, doch leider finde ich die Zeile überhaupt nicht. Weder mit Suche noch manuell. Hast du eventuell einen tipp?

    1. Sarah Morgan

      30. September 2013 at 15:27

      Hat sich erledigt ^^ irgendwie funktioniert die suchfunktion bei mir einfach nicht mehr. Habs nochmal manuell gesucht und auch gefunden 😉 Danke für das tolle Tut! ^^

  6. Josie Papaya

    13. October 2013 at 14:08

    Bei mir verschwinden Links, wenn ich neue Titel diesen gebe!
    Hab ich was falsch gemacht?
    Könntest du nochmal ein Beispiel einfügen?

    LG Josie

  7. Sibelle Fox

    4. November 2013 at 8:09

    wieso finde ich die stelle nicht :S

  8. Jana

    13. November 2013 at 18:39

    Ich bekomme es einfach nicht hin, dass der Home-Link auf der Startseite mittig ist. Da fehlt ja dann quasi das linke Bild, aber wenn ich was ändere ist es auf den folgenden Seiten nicht mehr richtig :/
    Habt ihr einen Tipp wie man das ändern kann?

    1. Jana

      17. November 2013 at 4:10

      Hab deinen Kommentar gerade entdeckt 😉
      Nein leider nicht. (Ist nicht bei 'Lichtmalerei'; der andere Blog ist noch nicht öffentlich). Das Home schiebt sich einfach immer ein bisschen rüber. Ich frage mich gerade warum es bei meinen anderen Blogs klappt ^^ Wahrscheinlich weil ich da nur Text-Links habe… Komisch. Kann man da irgendwie tricksen? 😉 Ansonsten frag ich nochmal wenn der Blog offen ist 🙂

  9. Jana

    16. November 2013 at 18:52

    Hallo! Erstmal vielen Dank für das tolle und übersichtliche Tutorial!!
    Ich hab ein kleines Problem, und zwar zeigt es bei mir die eingefügten Grafiken nicht an… ö.ö
    Liegt das vielleicht daran, dass ich die falsche URL angebe? Wie kann ich denn die richtige URL bekommen?

    Liebe Grüße ♥

  10. Meltem

    1. December 2013 at 8:14

    Ich wollte wie oben beschrieben den Abstand weg machen, doch jetzt ist bei mir alles weg, ich hab es wieder eingefügt doch auf meinem Blog ist immer noch kein Älterer Post- bzw Neuerer Post-Pfeil zu finden.
    Ich hab davor auch nichts gesichert und weiß nun nicht mehr weiter, sollte ich eine neue Vorlage hochladen?
    rebellausprinzip.blogspot.de

  11. Julia Stars

    22. December 2013 at 21:13

    Bei mir funktioniert das nicht. Auf einmal wird gar nichts mehr angezeigt von Älterer Post oder so. Was muss ich da genau ersetzen und wie? Müssen die Haken an der Seite erhalten bleiben oder nicht? Und was ist mit dem data:?

    1. Claro de luna

      30. December 2013 at 15:46

      Wenn ich komplett entferne und dafür img src="mit meinem Bild." border="0" / einfüge, dann passiert leider gar nichts 🙁

      Ich muss auch was falsch machen.

      Selbst mit Weiterblättern funktioniert es nicht.

  12. Tuğçe Dokuz

    19. January 2014 at 18:15

    wie macht man das mit den herzen?:)

  13. herzballon

    1. February 2014 at 21:35

    Hey 🙂
    Ich habe das ganze jetzt mal ausprobiert, aber es klappt nicht ganz, wie ich das gerne hätte.
    Statt des Textes möchte ich gerne Bildern einfügen. Mein Problem ist nun, dass nur das Bild für die Startseite angezeigt wird. Die Bilder für ältere und neuere Posts sind nicht zu sehen. Weißt du vielleicht woran das liegt? Die Abstände zwischen den Bildern habe ich bereits entfernt 🙂
    Anneke ♥

  14. FullmoonShadow

    27. April 2014 at 17:53

    Bei mir hat sich das leider total verschoben.
    Die einzelnen Links sind nicht an der richtigen Stelle, habe ich das Gefühl…
    Na ja, ich probiere mal noch ein bisschen herum… 🙁

    Grüße
    Moony

    1. FullmoonShadow

      27. April 2014 at 18:00

      Hab's doch hinbekommen 🙂
      Vielen Dank für das Tutorial 😀

  15. TraumLilie von Traumweltbuch

    27. May 2014 at 15:34

    Hey,
    ich hab alles so gemacht, wies im Tutorial beschrieben ist aber wenn ich das so übernehme, dann zeigt er das im Blog nicht an. Die Schaltflächen sind dann einfach weg, wenn ich das umbenenne. Nehme ich wieder den alten Code, ist alles wieder so wie es war. Könnt ihr mir da weiter helfen?

    Grüße,
    TraumLilie

  16. Anonym

    27. June 2014 at 21:35

    Hilfe, Hilfe, Hilfe!! o:
    Ich habe alles befolgt, doch jetzt sind meine Links KOMPLETT weg o_O.
    In der Mitte steht noch "Startseite", doch die Links die ich mit "Weiterblättern" beschriftet habe, sind futsch. So kann man die älteren Post's auch nicht mehr ansehen … Vedammt. Wisst Ihr da eine Lösung?
    http://fascilius.blogspot.de/

  17. Manon

    2. September 2014 at 12:25

    Nach einigem Rumspielen muss ich auf einen Fehler hinweisen: die lila Stellen müssen hinter span stehen und nicht außen. Also:

    FALSCH:

    data:blabla/>
    OPTIONALE GRAFIK RECHTS

    RICHTIG:

    data:blabla/> OPTIONALE GRAFIK RECHTS

    Dasselbe gilt für newerPage Title. OPTIONALE GRAFIK RECHTS <*a *class blabla>

    Ich hoffe ich konnte hiermit auch andere helfen. Sternchen und Leerzeichen natürlich nicht übernehmen, aber anders wollte der Kommentar nicht veröffentlichen…

    1. Manon

      2. September 2014 at 12:30

      grr…

      Noch mal: richtig ist so: data: blabla GRAFIK span und nicht span GRAFIK & span id blog-pager-newer-link GRAFIK a class blog-pager-newer-link

      Jedenfalls funzt das bei mir so.

  18. Julia

    8. October 2014 at 13:49

    Bei mir wird plötzlich weder Post noch sonstiges angezeigt nur mein Header :O Was habe ich falsch gemacht?? Hiiiilfe 🙂

  19. Anonym

    25. December 2014 at 22:11

    ah perfekt dankeschön! sehr hilfreicher Artikel 🙂

  20. Sabrina Bella

    16. July 2015 at 20:23

    Hilfe! Jetzt ist alles noch schlimmer geworden. Vorher stand unten noch Startseite und jetzt ist auch das weg.

    http://vanillascouture.blogspot.com

  21. Anonym

    5. June 2016 at 10:34

    Also das klingt alles sehr einfach nur gehe ich auf "html bearbeiten" und suche – kommt findet es nicht… was nun?

Leave a Reply