Numerierte Seiten-Navigation/ Einbau

Um eine numerierte Seiten-Navigation zu erstellen,
benötigt ihr drei Teile:

der 1. Teil kommt in euren HTML-Bereich. Dort sucht ihr im  /* Mobile Abschnitt diese Stelle:
]]></b:skin>
<b:template-skin>


Den unten stehenden Code fügt ihr davor ein!

.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #000000; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #000000; background-color:#000000; } .showpagePoint { color:#ff9900; text-decoration:none; border: 1px solid #000000; background: #000000; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #000000; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#000000;}

Nun geht ihr wieder in euren Design-Bereich und erstellt ein html-Gadget. In dieses Gadget fügt ihr diesen Code ein (2. Teil):

<style type='text/css'>.showpageArea a {text-decoration:none;}.showpageNum a {text-decoration:none;border: 1px solid #ff9900;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 2px solid #ff9900;background-color:#a9e128;}.showpagePoint {color:#a9e128;text-decoration:none;border: 1px solid #ff9900;background: #015782;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #ff9900;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#ffffff;}</style><script style='text/javascript'>var pageCount=10;var displayPageNum=7;var upPageWord="zurück";var downPageWord="vor";</script><script style='text/javascript' src='http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js'></script>

Das Gadget mit dem 2. Teil schiebt ihr im Design-Bereich unter euer Blogpost-Gadget!

Den 3. Teil setzt ihr wieder in ein html-Gadget und schiebt es in ein breites Gadget (siehe Screenshot):

Bild klick zum Vergrößern

3. Teil:
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body></script></b:if></b:if>

Wenn ihr die Farben anpassen wollt, achtet bitte darauf, das die Tags immer geschlossen sind! Welche Farbe was genau macht, müßt ihr selber ausprobieren! ;)

Die Hintegrund-Farbe für dieses Gadget stellt ihr über den Vorlagendesigner/Pager ein!

Viel Spaß dabei!