Navigasi Halaman dengan Nomor untuk Blogger

Halaman Navigasi adalah fitur lama yang benar-benar mengagumnkan, selain itu model ini juga telah ditunggu-tunggu oleh Blogger Mania. Nah, Anda mungkin telah melihat halaman navigasi bernomor pada banyak blog yang menggunakan platform wordpress (yang diciptakan oleh Lester Chan). Tapi, Muhammad Rias dari Techie Blogger telah mengembangkan suatu sistem navigasi halaman untuk blogger. Dan sekarang Abu Farhan telah menyempurnakannya dan ia telah memberikan kepada kita sistem navigasi halaman yang lebih sempurna. Di bawah ini sudah saya sediakan screenshotnya:

Nah, apakah Anda tertarik membuatnya? Jika ya, maka mari kita laksanakan caranya ^_^

1. Dasbor > Tata letak/Layout > Edit HTML
2. Kalau sudah klik Expand Widget Templates
3. Kemudian cari kode berikut dengan menekan CTRL+F pada keyboard Anda:
   

   ]]></b:skin>

4. Taruh kode ini di atas ]]></b:skin> tadi:
   

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

   Kode CSS di atas dapat Anda sesuaikan dengan selera Anda, dan jangan merubah kode jika anda tidak mengerti karena akan menimbulkan hal yang tidak diinginkan
5. Kembali ke trik, sekarang cari kode </body> dan gantikan dengan kode di bawah ini:
   

   
   <!--Page Navigation Starts-->
   <b:if cond='data:blog.pageType != &quot;item&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://die-silver.googlecode.com/files/blognavigasi.js' type='text/javascript'/>
   </b:if>
   <!--Page Navigation Ends-->
   </body>
   

   Perhatikan kode berikut ini:
   

   var pageCount=5;

   Angka pada kode tersebut adalah untuk menampilkan jumlah Posting yang akan terlihat pada setiap halaman navigasi
6. Simpan Template Anda

Semoga bermanfaat ^_^