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 :)


29 Kommentare

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

    AntwortenLöschen
  2. uhh das muss ich auch mal versuchen, das ist doch wesentlich hübscher und origineller ;) 1000 dank viele Grüße Anina

    AntwortenLöschen
  3. uhh das muss ich auch mal versuchen, das ist doch wesentlich hübscher und origineller ;) 1000 dank viele Grüße Anina

    AntwortenLöschen
  4. Super Tutorial, danke :)
    Hast du vielleicht einen Tipp, wo man solche hübschen Grafiken kostenlos bekommen kann?

    Liebe Grüße
    Elske

    AntwortenLöschen
    Antworten
    1. Sorry, aber solche Grafiken hab ich noch nirgends entdeckt ;)

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

    AntwortenLöschen
    Antworten
    1. 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! ^^

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

    AntwortenLöschen
  7. wieso finde ich die stelle nicht :S

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

    AntwortenLöschen
    Antworten
    1. 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 :)

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

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

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

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

      Löschen
    2. Dieser Kommentar wurde vom Autor entfernt.

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

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

    AntwortenLöschen
    Antworten
    1. Hab's doch hinbekommen :)
      Vielen Dank für das Tutorial :D

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

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

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

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

      Löschen
  17. Bei mir wird plötzlich weder Post noch sonstiges angezeigt nur mein Header :O Was habe ich falsch gemacht?? Hiiiilfe :)

    AntwortenLöschen
  18. ah perfekt dankeschön! sehr hilfreicher Artikel :)

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

    http://vanillascouture.blogspot.com

    AntwortenLöschen
  20. Also das klingt alles sehr einfach nur gehe ich auf "html bearbeiten" und suche - kommt findet es nicht... was nun?

    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!