Halaman Navigasi Blogspot dan Contohnya

Gini caranya: 
1. Login ke Blogger Dashboard lalu ke Layout > Edit Html  
2. Jangan mencentang ‘Expand Widget Templates’  
3. Lalu cari kode berikut  ]]<>/b:skin>; lalu kopikan kode di bawah dan pastekan  diatas kode tersebut

<span style="font-weight: bold;"></span>.showpageArea a {<br> text-decoration:underline;<br> }<br> .showpageNum a {<br> text-decoration:none;<br> border: 1px solid #cccccc;<br> margin:0 3px;<br> padding:3px;<br> }<br> .showpageNum a:hover {<br> border: 1px solid #cccccc;<br> background-color:#cccccc;<br> }<br> .showpagePoint {<br> color:#333;<br> text-decoration:none;<br> border: 1px solid #cccccc;<br> background: #cccccc;<br> margin:0 3px;<br> padding:3px;<br> }<br> .showpageOf {<br> text-decoration:none;<br> padding:3px;<br> margin: 0 3px 0 0;<br> }<br> .showpage a {<br> text-decoration:none;<br> border: 1px solid #cccccc;<br> padding:3px;<br> }<br> .showpage a:hover {<br> text-decoration:none;<br> }<br> .showpageNum a:link,.showpage a:link {<br> text-decoration:none;<br> color:#333333;<br> }

4. Cari kode ini copy dan pastekan code dibawah tepat di atas kode ini

<!--Page Navigation Starts--><br><b:if cond='data:blog.pageType != "item"'><br><b:if cond='data:blog.pageType != "static_page"'><br><script type='text/javascript'><br>var pageCount=5;<br>var displayPageNum=5;<br>var upPageWord ='Previous';<br>var downPageWord ='Next';<br></script><br><script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/><br></b:if><br></b:if><br><!--Page Navigation Ends -->
Kode-kode di atas ada yang bisa dirubah:

var pageCount=5;
Kode ini untuk menampilkan jumlah posting yang akan ditampilkan di halaman blog

var displayPageNum=5;
Kode ini untuk menampilkan angka yang akan tampil pada halaman blog

var upPageWord ='Previous';
var downPageWord ='Next';
Dua kode diatas adalah teks yang akan tampil pada halaman Previous (sebelumnya) dan Next (selanjutnya)
5. Simpan dan Lihat Hasilnya


MACAM - MACAM 
1.<span style="font-weight: bold;"></span>.showpageArea {<br> font-family:verdana,arial,helvetica;<br> color: #000;<br> font-size:11px;<br> margin:10px;<br> }<br> <br> .showpageArea a {<br> color: #000;<br> text-shadow:0 1px 2px #fff;<br> font-weight: 700;<br> }<br> <br> .showpageNum a {<br> padding: 3px 8px;<br> margin:0 4px;<br> text-decoration: none;<br> border:1px solid #999;<br> -webkit-border-radius:3px;-moz-border-radius:3px;<br> background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;<br> }<br> <br> .showpageNum a:hover {<br> border:1px solid #888;<br> background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;<br> }<br> <br> .showpageOf{<br> margin:0 8px 0 0;<br> }<br> <br> .showpagePoint {<br> color:#fff;<br> text-shadow:0 1px 2px #333;<br> padding: 3px 8px;<br> margin: 2px;<br> font-weight: 700;<br> -webkit-border-radius:3px;-moz-border-radius:3px;<br> border:1px solid #999;<br> background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;<br> text-decoration: none;<br> }<br> ]]></b:skin>

2.<span style="font-weight: bold;"></span>.showpageArea {<br> font-family:verdana,arial,helvetica;<br> color: #000;<br> font-size:11px;<br> margin:10px;<br> }<br> <br> .showpageArea a {<br> color: #000;<br> text-shadow:0 1px 2px #fff;<br> font-weight: 700;<br> }<br> <br> .showpageNum a {<br> padding: 3px 8px;<br> margin:0 4px;<br> text-decoration: none;<br> border:1px solid #919106;<br> -webkit-border-radius:3px;-moz-border-radius:3px;<br> background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -50px repeat-x;<br> }<br> <br> .showpageNum a:hover {<br> border:1px solid #aeae0a;<br> background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -25px repeat-x;<br> }<br> <br> .showpageOf{<br> margin:0 8px 0 0;<br> }<br> <br> .showpagePoint {<br> color:#fff;<br> text-shadow:0 1px 2px #333;<br> padding: 3px 8px;<br> margin: 2px;<br> font-weight: 700;<br> -webkit-border-radius:3px;-moz-border-radius:3px;<br> border:1px solid #919106;<br> background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 0 repeat-x;<br> text-decoration: none;<br> }<br> ]]></b:skin>

3. <span style="font-weight: bold;"></span>.showpageArea {<br> font-family:verdana,arial,helvetica;<br> color: #000;<br> font-size:11px;<br> margin:10px;<br> }<br> <br> .showpageArea a {<br> color: #000;<br> text-shadow:0 1px 2px #fff;<br> font-weight: 700;<br> }<br> <br> .showpageNum a {<br> padding: 3px 8px;<br> margin:0 4px;<br> text-decoration: none;<br> border:1px solid #919106;<br> -webkit-border-radius:3px;-moz-border-radius:3px;<br> background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -50px repeat-x;<br> }<br> <br> .showpageNum a:hover {<br> border:1px solid #aeae0a;<br> background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -25px repeat-x;<br> }<br> <br> .showpageOf{<br> margin:0 8px 0 0;<br> }<br> <br> .showpagePoint {<br> color:#fff;<br> text-shadow:0 1px 2px #333;<br> padding: 3px 8px;<br> margin: 2px;<br> font-weight: 700;<br> -webkit-border-radius:3px;-moz-border-radius:3px;<br> border:1px solid #919106;<br> background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 0 repeat-x;<br> text-decoration: none;<br> }<br> ]]></b:skin>

4..showpageArea {<br> font-family:verdana,arial,helvetica;<br> color: #000;<br> font-size:11px;<br> margin:10px;<br> }<br> <br> .showpageArea a {<br> color: #fff;<br> }<br> <br> .showpageNum a {<br> padding: 3px 8px;<br> margin:0 4px;<br> text-decoration: none;<br> background: #363636 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -25px repeat-x;<br> }<br> <br> .showpageNum a:hover {<br> background: #044697 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -50px repeat-x;<br> }<br> <br> .showpagePoint {<br> color:#fff;<br> padding: 3px 8px;<br> margin: 2px;<br> font-weight: 700;<br> background: #e30000 url(whttp://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 0 repeat-x;<br> text-decoration: none;<br> }<br> <br> .showpageOf{<br> margin:0 8px 0 0;<br> }<br> ]]></b:skin><span style="font-weight: bold;"></span>

5.<span style="font-weight: bold;"></span>.showpageArea {<br> font-family:verdana,arial,helvetica;<br> color: #000;<br> font-size:11px;<br> margin:10px;<br> }<br> <br> .showpageArea a {<br> color: #fff;<br> }<br> <br> .showpageNum a {<br> padding: 3px 4px;<br> margin:0 4px;<br> text-decoration: none;<br> border-top:2px solid #000;<br> border-left:1px solid #000;<br> border-right:1px solid #000;<br> border-bottom:1px solid #000;<br> background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -25px repeat-x;<br> }<br> <br> .showpageNum a:hover {<br> border-top:2px solid #999;<br> border-left:1px solid #999;<br> border-right:1px solid #999;<br> border-bottom:1px solid #999;<br> background: #999 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 -50px repeat-x;<br> }<br> <br> .showpagePoint {<br> color:#fff;<br> padding: 3px 8px;<br> margin: 2px;<br> font-weight: 700;<br> border-top:2px solid #000;<br> border-left:1px solid #000;<br> border-right:1px solid #000;<br> border-bottom:1px solid #000;<br> background: #000 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp4.jpg) 0 0 repeat-x;<br> text-decoration: none;<br> }<br> <br> .showpageOf{<br> margin:0 8px 0 0;<br> }<br> ]]></b:skin>

 6. <span style="font-weight: bold;"></span>.showpageArea {<br> font-family:verdana,arial,helvetica;<br> color: #000;<br> font-size:11px;<br> margin:10px;<br> }<br> <br> .showpageArea a {<br> color: #fff;<br> }<br> <br> .showpageNum a {<br> padding: 3px 8px;<br> margin:0 4px;<br> text-decoration: none;<br> background: #333 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -50px repeat-x;<br> }<br> <br> .showpageNum a:hover {<br> background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -25px repeat-x;<br> }<br> <br> .showpagePoint {<br> color:#fff;<br> padding: 3px 8px;<br> margin: 2px;<br> font-weight: 700;<br> background: #06a2b9 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 0 repeat-x;<br> text-decoration: none;<br> }<br> <br> .showpageOf{<br> margin:0 8px 0 0;<br> }<br> ]]></b:skin>

  7.<span style="font-weight: bold;"></span>.showpageArea a {<br>text-decoration:underline;<br>}<br>.showpageNum a {<br>text-decoration:none;<br>border: 1px solid #cccccc;<br>margin:0 3px;<br>padding:3px;<br>}<br>.showpageNum a:hover {<br>border: 1px solid #cccccc;<br>background-color:#cccccc;<br>}<br>.showpagePoint {<br>color:#333;<br>text-decoration:none;<br>border: 1px solid #cccccc;<br>background: #cccccc;<br>margin:0 3px;<br>padding:3px;<br>}<br>.showpageOf {<br>text-decoration:none;<br>padding:3px;<br>margin: 0 3px 0 0;<br>}<br>.showpage a {<br>text-decoration:none;<br>border: 1px solid #cccccc;<br>padding:3px;<br>}<br>.showpage a:hover {<br>text-decoration:none;<br>}<br>.showpageNum a:link,.showpage a:link {<br>text-decoration:none;<br>color:#333333;<br>}<br>]]></b:skin>