Cara Membuat Tombol Navigasi Halaman/Page

Cara Membuat Tombol Navigasi Halaman/Page - LEYTO |

Kali ini saya share cara membuat tombol navigasi halaman/page pada blog. Tombol navigasi halaman adalah tombol yang digunakan utnuk memilih page/halaman pada blog utnuk mencari postingan yang diinginkan (postingan sebelumnya), sebagai contoh lihat pada gambar disamping. Untuk membuatnya ikuti langkah-langkah berikut :

Cara Membuat Tombol Navigasi Halaman

1. Login ke Blogger, lalu pilih rancangan > edit html dan centang Expand Template Widget.
   
2. Cari kode script ]]></b:skin> , dan letakan script berikut tepat diatas kode ]]></b:skin>.
   

   .showpageArea a {
   text-decoration:underline;
   }
   .showpageNum a {
   text-decoration:bold;
   border: 0px solid #cccccc;
   margin:0 3px;
   padding:10px;
   }
   .showpageNum a:hover {
   border: 0px solid #ffffff;
   background-color:#transparent;
   }
   .showpagePoint {
   color:#00ff0c;
   text-decoration:bold;
   border: 0px solid #cccccc;
   background: #transparent;
   margin:0 3px;
   padding:12px;
   }
   .showpageOf {
   text-decoration:bold;
   color:#ff7e00;
   padding:10px;
   margin: 0 3px 0 0;
   }
   .showpage a {
   text-decoration:bold;
   border: 0px solid #cccccc;
   padding:10px;
   }
   .showpage a:hover {
   text-decoration:bold;
   }
   .showpageNum a:link,.showpage a:link {
   text-decoration:bold;
   color:#ff7e00;
   }

3. Selanjutnya cari kode script </body>, dan letakkan script berikut di atas kode </body>.
   

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <script type='text/javascript'>
   var pageCount=8;
   var displayPageNum=5;
   var upPageWord =&#39;Previous&#39;;
   var downPageWord =&#39;Next&#39;;
   </script>
   <script src='http://nthoeng.googlecode.com/files/navigasi.js' type='text/javascript'/>
   </b:if> 

4. Ganti angka berwarna merah sesuai dengan jumlah posting yang ingin ditampilkan setiap page/halaman.
   
5. Jangan lupa Simpan Template, untuk melakukan perubahan warna, ubah pada kode warna pada script yang diletakkan di atas ]]></b:skin>. Kode warna diawali dengan tanda pagar (#) dan terdiri dari 6 karakter.

Sumber : Disini