Cara Membuat Page Navigation Menjadi Keren

      Page navigation number adalah penomoran page pada tiap halaman page blog anda. Biasanya kita melihatnya sebagai next post atau last post (posting lama & posting baru) yang ada pada bawah postingan halaman utama. Dengan page navigation number ini pengunjung bisa bebas memilih bebas halaman postingan yang ingin dibacanya. Jadi pengunjung bisa melompat dari page satu ke page empat atau seterusnya hanya dengan satu klik, tanpa harus membuka page dua dan tiga dulu. Page navigation number ini juga bisa dibilang memberikan kesan rapi dan indah pada blog anda.

Cara Pemasangan :

Cara pemasangannya cukup simple, anda hanya perlu mengganti kode CSS page number bawaan (yang saya jelaskan pada post Cara memasang Page NavigationNumber Pada Blog). Berikut caranya:

1. Masuk ke akun blogger anda.
2. Masuk ke template > Edit template
3. Cari kode showpage. Gunakan fungsi CTRL + F pada keyboard anda. Kode selengkapnya mirip seperti ini 

    /* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;}
.showpageOf {margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover {color:#494949;background:#dfdfdf;}
.showpageArea {margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint {color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;;text-decoration:none}

4. Ok jika sudah ketemu, ganti dengan kode dibawah ini :

 .blog-pager,

#blog-pager{
font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width: auto;padding:17px;
}
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;
}
.showpageNum a:hover,
.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;
}
.showpageOf{
margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;
}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;
}

5. Sudah selesai, cuma itu aja. Ciyus ? ya ciyus dong. Sekarang simpan templatenya..

    Keterangan :

1. Kode berwarna biru adalah jenis font yang digunakan, kode biru pertama menunjukan keterangan page. Kode biru kedua menunjukan font pada penomoran page. 

    2. Kode berwarna Merah adalah ukuran font.

    3. Kode berwarna biru muda adalah warna dari font.

    4. Kode berwarna orange adalah kode background (warna latar).

    5. Cari DISINI untuk memilih berbagai kode warna
    6. Kode berlatar hijau yaitu hover, berarti bagian kode yang akan menimbulkan efek ketika page number disentuh atau disorot.

Sumber : ujangyoyo.blogspot.com