Tipps & Tutorials, tutorial

Seitennavigation mit Zahlen

Guten Tag ihr Lieben!
Heute zeige ich euch, wie man eine Seitennavigation mit Seitenzahlen auf seinem Blog einfügen kann. Auf gut deutsch, wir ersetzen heute “Neuere Posts/Startseite/Ältere Posts” mit Seitenzahlen. Für Blogger mit bestimmten Blogthemen und vielen Seiten kann das gut nützlich sein. Also, los geht’s!
1. Geht auf Dashboard und wechselt zu Layout.
2. Fügt einen HTML/Javascript Gadget ein.
3. Lässt den Titel frei. Fügt im zweiten Box diesen Code ein:
<style type='text/css'>
#blog-pager{
height: 28px;
padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {
text-decoration:underline;
font-size: 16px;
text-align: center;
}
.showpageNum a {
font-size:16px;
text-decoration:none;
border: 1px solid #cccccc;
margin:0 5px;
padding:5px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
font-size:16px;
text-decoration:none;
border: 1px solid #cccccc;
background: #216FD9;
margin:0 5px;
padding:5px;
color:#ffffff;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 5px;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:5px;
}
.showpage a:hover {
text-decoration:none;
background: #cccccc;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
</style>
<script style='text/javascript'>var pageCount=7;
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>
4. Personalisieren.
 
Spielt an den Farben des Erscheinungsbild herum. Speichert am besten davor und öffnet das Gadget erneut, nachdem ihr es an den Layoutende gezogen habt. Hier die Erklärung der wichtigsten ID’s und Klassen:
#blog-pager{
Der Style des gesamten Pagers. Beinhaltet hauptsächlich Abstände und Höhe.
}
.showpageNum a {
So sehen die Seitenzahlen aus. Hier lassen sich u.a. Schriftgröße (font-size) und Umrandung (border) ändern.
}
.showpageNum a:hover {
Hier lässt sich das Aussehen der Seitenzahlen ändern, wenn man mit der Maus herüber fährt, u.a. Umrandung (border) und Hintergrundfarbe (background-color).
}
.showpagePoint {
Hiermit wird die aktuelle Seitenzahl abgehoben. Hauptsächlich durch die Umrandung (border), die Hintergrundfarbe (background) und die Schriftfarbe (color).
}
.showpage a {
Hier kann man, wenn man das möchte, noch das Aussehen des “Next”-Links ändern.
}
.showpage a:hover {
Und hier lässt sich das Aussehen des “Next”-Links ändern, wenn man mit der Maus herüber fährt.
}
 
pageCount=7; Ändert die Zahl, um die Anzahl der Posts pro Seite zu bestimmen.

var displayPageNum=5; Ändert die Zahl, um die Anzahl der Seitenzahlen (ohne die aktuelle) in der Navigation zu ändern.

5. Speichern und fertig! 🙂

15 Comments

  1. patrizia

    10. March 2013 at 13:20

    Etwas kompliziert, ich mach das sonst bei den Widgetvorlagen im HTML Menü.

  2. MissBlueberrymuffin

    10. March 2013 at 13:55

    Für nächsten Sonntag wünsche ich mir "Eine Startseite für den Blog – Möglichkeiten" 🙂

  3. Felise

    10. March 2013 at 14:38

    Hat sehr gut geklappt bei mir, ich hätte nur noch eine Frage. Wie kann man denn dieses Pages (x) löschen?

  4. Sophie

    10. March 2013 at 15:20

    Eine Startseite für den Blog – Möglichkeiten.
    Wünsche ich mir fürs nächste Mal.

  5. Anonym

    10. March 2013 at 17:24

    Gut zu wissen, vielleicht probier ich das mal aus…

  6. Totentänzer Mädchen

    10. March 2013 at 20:11

    Danke für das Tut.
    Werde es gleich mal ausprobieren 🙂
    Für kommenden Sonntag würd ich mir die Nr.1 wünschen.
    Macht weiter so mit eurem tollen Blog,
    ihr helft mir echt oft mit dem Blogdesign weiter.
    Liebe Grüße,
    Franziska

    http://www.poisendiaries.blogspot.com

  7. Jennifer Jäger

    11. March 2013 at 10:24

    Vielen lieben Dank! 🙂
    Hat mir sehr weitergeholfen …
    JenniferJäger.com

  8. Julia

    11. March 2013 at 12:21

    Hey 😉

    ab jetzt kann man wieder beim "Best of Blog"- März teilnehmen!
    Würde mich freuen wenn du mit machen würdest :

    http://momentoftime11.blogspot.de/2013/03/best-of-blog-auswertung-lauft.html

    lg
    xoxo
    Julia

  9. copy.cat

    29. March 2013 at 23:17

    Hey, also ich hab momentan auch noch das Problem, dass am Anfang dieses Pages steht. Wie bekommt man das denn weg?

    Lg

    http://justanothercopycat.blogspot.de

    1. Mira Ho

      30. March 2013 at 22:01

      Setz unter .showpageOf { folgendes ein:

      visibility: hidden;

      dann ist es nicht mehr sichtbar 🙂

    2. copy.cat

      30. March 2013 at 22:17

      Ahhh, sehr cool! Vielen lieben Dank, hat super geklappt 🙂

  10. Svana Alea

    9. April 2013 at 11:37

    Hat bei mir super geklappt, jetzt hab ich ein Minima Template und auf einmal geht das nicht mehr…? Weiß jemand was ich da machen kann? :/

    lg

  11. Profatus

    9. April 2013 at 22:15

    Einfach, schnell und effektiv. Super, danke!

  12. Diana Emilia

    13. May 2013 at 23:03

    Leider geht es bei mir nicht!?
    Es erscheint alles weiß.. bzw. nichts tut sich…, woran könnte das liegen?

  13. Sabrina Mohr

    16. June 2013 at 21:32

    Vielen lieben Dank. Das hat mir sehr weitergeholfen! 🙂

    LG, Sabrina
    http://happiness-is-the-only-rule.blogspot.de/

Leave a Reply