Cara Membuat Nomor Halaman Blog (Page Navigation)

Nomor halaman blog sangat penting untuk navigasi pada sebuah blog. Jika postingan sobat sudah banyak, maka keberadaan nomor halaman mungkin adalah sebuah kebutuhan yang harus sobat miliki. Sobat tak usah membayar untuk mendapatkannya, tinggal ikuti langkah-langkah yang saya berikan dibawah ini, sobat sudah bisa memasangnya di blog sobat.

Ini adalah contoh nomor halaman blog yang saya pasang di PSYCHOLOGYMANIA, yang berada dibawah postingan blog.

Perlu sobat ketahui, bahwa, halaman blog ini muncul saat sobat masuk di halaman muka (halaman utama blog), atau pada saat sobat masuk di label/kategori blog sobat.

Langkah-langkah membuat nomor halaman blog adalah sebagai berikut: 

1. Silahkan sobat log in di blog sobat 
2. Pilih rancangan --- >>> edit HTML 
3. Silahkan cari kode ]]></b:skin> (untuk mempermudah silahkan copy kode tadi dan tekan Ctrl+F, kemudian  Ctrl+V), kemudian masukkan script/HTML ini dibawah ini, diatas kode    ]]></b:skin>

/* -- NUMBER PAGE NAVIGATION -- */

#blog-pager {padding:6px 10px}

.showpageArea{float:left;}

.showpageOf{margin:0 8px 0 0;padding:3px 7px;color:#FFFFFF;font:15px Arial,Verdana;background:transparent;}

.showpagePoint{color:#fff;font:bold 15px Arial,Verdana;padding:2px 7px;margin:2px;border:0px solid #fff;background:#aa1f20;text-decoration:none}

.showpageNum a{font:15px Arial,Verdana;padding:3px 7px;margin:0 4px;text-decoration:none;background:transparent;color:#FFFFFF;}

.showpageNum a:hover{color:#fff;background:#3e3e3e;}

.showpage a{font:15px Arial,Verdana;padding:3px 7px;margin:0 4px;text-decoration:none;background:transparent;color:#FFFFFF;}

.showpage a:hover{color:#fff;background:#3e3e3e;}

.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#FFFFFF;}

.addthis_toolbox{padding:0px 0 5px 0;text-align:center}

.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 1px 0 0px;padding:0}

.addthis_toolbox .custom_images a:hover img{opacity:1}

.addthis_toolbox .custom_images a img{opacity:0.85}

#comment-form iframe{padding:5px;width:475px}

4.  Silahkan simpan (save) template sobat, dan lihat hasilnya. 

5.  Semoga sobat berhasil  
6.  Jika berhasil, silahkan berikan kementar sobat sebagai hadiah dan kenang-kenangan untuk PSYCHOLOGYMANIA. Terima kasih, atas kunjungan sobat.

Catatan:

Sobat bisa mengubah warna background dan warna tulisan dengan mengubah kode warna yang saya tandai dengan kode warna merah diatas.