Beranda  ›  Blogger  ›  Desain  ›  Tutorial Blog  ›  Widget

Costumalisasi page number navigation menjadi lebih keren

by -
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}
Related:Cara Mengoptimalkan Label Bloger agar SEO
.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{
Related:Cara Membuat Label Breadcrumbs Terindex Google
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,
Related:Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)
.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%;
}
Related:How to Randomize Background Color of your blog in Blogger
.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!


Share this

Related Posts

About Contact Disclaimer Privacy Policy Sitemap
close