Membuat Nagivation Halaman Bernomor untuk Blogger

Posting ini menjelaskan cara menambahkan widget navigasi halaman bernomor ke blogger (blogspot) blog:
Apa yang dimaksud dengan Navigasi Halaman bernomor?
Dalam blogger, secara default, Anda melihat link NewPosts (Posting lebih baru)  , Home, dan Older Posts (Posting Lebih Baru) dekat bagian bawah halaman posting blog anda, ini berguna bagi pengunjung blog Anda untuk menavigasi ke pesan lainnya dari blog Anda. seperti gambar ini:  

<<NewPosts | Home | Older Posts>>

Tambahkan  kode css berikut DI ATAS ]]></b:skin>

.showpageArea{padding:10px;background:#fff} .showpageArea a{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;<span class="IL_AD" id="IL_AD2">text-decoration</span>:none}<br /> .showpageNum a{font-weight:<span class="IL_AD" id="IL_AD9">bold</span>;color:#ca1717;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px <span class="IL_AD" id="IL_AD5">solid</span> #fff;background:#fff;}<br /> .showpageNum a:hover{color:#fff;background: #ca1717;<br /> filter: progid:DXImageTransform.<span class="IL_AD" id="IL_AD8">Microsoft</span>.gradient(startColorstr='#fff', endColorstr='#ca1717');<br /> background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));<br /> background: -moz-linear-gradient(top, #fff, #ca1717);text-shadow:0px 2px 2px #00a;border:1px solid #ddd;}<br /> .showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #ddd;background: #ca1717;<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');<br /> background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));<br /> background: -moz-linear-gradient(top, #fff, #ca1717);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}<br /> .totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}<br /> .showpage a{padding:1px 8px; margin:0 2px;border:1px solid #ddd;background: #ca1717;<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');<br /> background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));<br /> background: -moz-linear-gradient(top, #fff, #ca1717);;color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}<br /> .showpage a:hover{background: #ca1717;<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');<br /> background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));<br /> background: -moz-linear-gradient(top, #fff, #ca1717);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}<br /> #showlastpage a{font-weight:bold}</div> <div class="separator" style="clear: both; text-align: center;"> </div>

Lalu tambahkan  script berikut DI ATAS tag </body>

<b:if <span class="IL_AD" id="IL_AD7">cond</span>='data:blog.pageType != "item"'><br /> <<span class="IL_AD" id="IL_AD10">script type</span>='text/<span class="IL_AD" id="IL_AD12">javascript</span>'><br /> var pageCount=5;<br /> var displayPageNum=5;<br /> var upPageWord ='◄';<br /> var downPageWord ='►';<br /> </script><br /> <script src='http://wildankafi.googlecode.com/files/pagenav.js' type='text/javascript'/><br /> </b:if><b> </b></div>

Simpan template anda dan lihat hasilnya.
Jika langkah anda sudah benar maka hasilnya akan seperti gambar ini:

 Selamat mencoba... revisi