Seiten Navigation für Blogger

Bei den Standarteinstellungen von Blogger sieht die Page Navigation zu einfach aus. Mit dem Code den ich jetzt geben werde lässt es sich Profosionell und Schick aussehen, wer es mal probieren möchte geht wie folgt:

Bitte vorher eine Sicherung des Templates runterladen falls es doch nicht gefällt.


Dashboard>>>Vorlage>>>HTML bearbeiten>>>Fortfahren>>>Widget-Vorlagen komplett anzeigen (Haken setzen)

(Zum suchen Strg+F drücken und einfügen)
Findet den Code:
</body>

Fügt diesen Code direkt davor ein:
<style type="text/css">
.showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}
.showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoAB324J9MdLR5KbNtIlyMkk1o-EvLMyJYt-ahWJbLTXh8jlGWcj_Lhp0KxAzee5jFz6VruJrXVYv3jiT-JDZER90Kfpet8moUqep1YdiZe6kBf6nMrw1UJjlL0AF8wJRkDqXyUXciNz4J/) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}
.showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}
.showpageOf{float:left;padding-top : 6px;}
.showpageNum a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXKiOZKiQK-dVuaffxidFueBUy_qgZuSrRgMA0pCtnaXpAunR6iSjyS7Yf-ZvJd7Li4XmaScVX6vPESrqxmJPHIx2KlG-GrpT60jY6kQpMYL5cABj7nBuJAnI8RQ6q6CGGgdj8Dj_sD5r/) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}
.showpageNum a:hover {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXKiOZKiQK-dVuaffxidFueBUy_qgZuSrRgMA0pCtnaXpAunR6iSjyS7Yf-ZvJd7Li4XmaScVX6vPESrqxmJPHIx2KlG-GrpT60jY6kQpMYL5cABj7nBuJAnI8RQ6q6CGGgdj8Dj_sD5r/) no-repeat 0 100%;color : #fff;}
.showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXKiOZKiQK-dVuaffxidFueBUy_qgZuSrRgMA0pCtnaXpAunR6iSjyS7Yf-ZvJd7Li4XmaScVX6vPESrqxmJPHIx2KlG-GrpT60jY6kQpMYL5cABj7nBuJAnI8RQ6q6CGGgdj8Dj_sD5r/) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}
.showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}
</style>
<script style='text/javascript'>
var pageCount=5;
var displayPageNum=1;
var upPageWord="Previous";
var downPageWord="Next";
</script>
<script type='text/javascript' src="http://bloggerblogwidgets.googlecode.com/files/BeautifulPageNavi.js"/>