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.
Memang memiliki kesan rapi dan indah, tapi sekarang dipost ini saya akan memberikan suatu pengeditan page navigation yang lebih indah dan KEreeN.. Saya juga telah memasangnya di blog ini, liat DEMO Sebelumnya, baca dulu postingan Cara memasang Page Navigation Number Pada Blog. Jika anda tertarik mengikuti tutorial kali ini, mari ikuti dan baca step by stepnya dengan teliti.
Pemasangan costumisasi page number
Cara pemasangannya cukup simple, anda hanya perlu mengganti kode CSS page number bawaan (yang saya jelaskan pada post Cara memasang Page Navigation Number Pada Blog). Berikut caranya :
- Masuk ke akun blogger anda.
- Masuk ke template > Edit template
- 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}
- 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;
}
- Sudah selesai, cuma itu aja. Ciyus ? ya ciyus dong. Sekarang simpan templatenya..
Costumalisasi CSS page number
- Kode berwarna biru adalah jenis font yang digunakan, kode biru pertama menunjukan keterangan page. Kode biru kedua menunjukan font pada penomoran page.
- Kode berwarna Merah adalah ukuran font.
- Kode berwarna biru muda adalah warna dari font.
- Kode berwarna orange adalah kode background (warna latar).
- Cari DISINI untuk memilih berbagai kode warna
- Kode berlatar hijau yaitu hover, berarti bagian kode yang akan menimbulkan efek ketika page number disentuh atau disorot.
Last Words
Bagaimana? sangat mudah sekali bukan? Jika Anda memiliki pertanyaan maka beritahu saya di komentar. Sekian post tentang Costumalisasi page number navigation menjadi lebih keren. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!
AD-BLOCKER DETECTED!
