Costumalisasi page number navigation menjadi lebih keren





Costumalisasi page number navigation

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!






Artikel Menarik Lainnya :



5 comments

avatar
15 June, 2013

Wajib dicoba nih mas ... :D

BalasHapus
avatar
yoyo suharyo Author
16 June, 2013

Silahkan sob.. tengkyu kunjungannya gan.. :)

BalasHapus
avatar
16 June, 2013

mending yang kotak-kotak sih menurut saya...
Daripada yang bunder....

BalasHapus
avatar
yoyo suharyo Author
16 June, 2013

itu sih relatif gan, ada yang suka kotak ada yg suka bunder. Tapi saya disini kan memberikan yang beda, karena yang kotak itu sudah banyak digunakan. jadi biar pengunjung melihat blog kita itu beda.. hehe :)

BalasHapus
avatar
13 July, 2013

saya kelihatanya memang lebih suka yang kotak kotak gitu gan. karena menurut saya itu lebih simpel. tapi patut dicoba juga tuh gan jika bosen ama page number navigation yang lama. jadi orang yang ngliat juga seneng gitu. keren gan.

BalasHapus