Home » Optimasi Wordpress » Wordpress » Cara Membuat Halaman (Pagination) Pada Postingan

Cara Membuat Halaman (Pagination) Pada Postingan

7 Jun. 201156 comments
Cara Membuat Halaman (Pagination) Pada Postingan

Ukuran sebuah postingan adakalanya dibuat cukup pendek, mungkin hanya berisi beberapa paragraph saja karena dianggap sudah cukup mewakili dari apa yang dikehendaki oleh sang admin, namun terkadang ada pula sebuah postingan dibuat cukup panjang atau terpaksa harus dijabarkan secara panjang lebar agar apa yang menjadi maksud dan tujuan dari sang admin bisa tersampaikan dengan baik walau bukan jaminan postingan yang panjang itu akan dinilai baik oleh pembacanya.

Untuk sebuah postingan yang isinya cukup panjang apalagi jika disertai dengan gambar, alangkah baiknya jika diterapkan page break atau pagination halaman atau membagi postingan ke dalam beberapa halaman (CMIIW). Tujuannya supaya loadingnya tetap cepat, navigasi serta tampilannya tetap terjaga (enak dilihat dan mudah diakses).

Cara Membuat Halaman (Pagination) Pada Postingan :

  1. Tambahkan kode berikut ini di bagian anda ingin splite atau break halaman, tapi harus dalam posisi HTML editor (jangan visual).
    <!--nextpage-->
  2. Jika theme anda belum support pagination halaman posting (belum ada kode pagination di file single.php), tambahkan kode berikut ini ke dalam file single.php :
    <div class="wp_page_numbers"><?php wp_link_pages('Pages : ', '', 'number'); ?></div>

    kode tersebut di atas anda tempatkan setelah kode <?php the_content(); ?> (kode yang biasa digunakan untuk menampilkan isi postingan).

  3. Untuk mempercantik tampilan dari nomor halaman yang telah dibuat, anda bisa menambahkan kode CSS berikut ini ke dalam file CSS yang anda gunakan, atau bisa juga menggunakan teknik Custom CSS Per Post:
    .wp_page_numbers {font-weight:bold;
      margin-top:10px} 
    .wp_page_numbers a {background:#dbe7f0;
      padding:3px 5px 3px;
      margin-left:3px;
      margin-right:3px;
      color:#333;
      border:1px solid #949191;
      border-radius:6px 0 6px;
      -moz-border-radius:6px 0 6px;
      -webkit-border-radius:6px 0 6px;
      box-shadow:2px 2px 2px #b3b3b7;
      -moz-box-shadow:2px 2px 2px #b3b3b7;
      -webkit-box-shadow:2px 2px 2px #b3b3b7; } 
    .wp_page_numbers a:hover {text-decoration:none;
      border:2px solid #002cba;
      background:#97a3c7;
      -webkit-transition:margin-left 1s ease,background-color 1s ease;
      -moz-transition:margin-left 1s ease,background-color 1s ease;
      -o-transition:margin-left 1s ease,background-color 1s ease;
      transition:margin-left 1s ease,background-color 1s ease; }

Kode CSS tersebut di atas sengaja sedikit saya beri efek transisi dengan CSS3 pada saat dihover, jika anda tidak suka bisa anda hapus kode properties dari efek transisi tersebut atau bisa anda buat sendiri dengan efek lain sesuai selera. Untuk warna, padding, margin, border dan lain-lain bisa anda ganti sesuai selera. Hasilnya bisa anda lihat di postingan ini : 80 Inspirasi, Design Footer Nan Cantik Dan Unik.

Update :

Page break atau pagination halaman atau membagi postingan ke dalam beberapa halaman ini ternyata berpotensi untuk munculnya duplikat kontent di Google Webmaster Tool. Untuk mencegahnya silahkan tambahkan script berikut ini di file robots.txt yang ada di root direktori hosting :

User-agent: Googlebot
Disallow: /*/2*
Disallow: /*/3*
Disallow: /*/4*
Disallow: /*/5*
Disallow: /*/6*
Disallow: /*/7*
Disallow: /*/8*
Disallow: /*/9*
Disallow: /*/10*

Itu diasumsikan jika sebuah postingan dibuat sampai 10 halaman, jika lebih, bisa anda tambahkan nomor halaman yang akan dicegah untuk diindek di bawahnya, misalnya Disallow: /*/11* dan seterusnya.

Mudah-mudahan artikel tentang Cara Membuat Halaman (Pagination) Pada Postingan ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Mempercepat Loading WordPress Dengan DB Cache Reloaded
  2. Cara Mempercepat Loading Blog WordPress (Minimize SQL Queries)
  3. Bypass Template Path dan Stylesheet Path
  4. Optimasi Link Komentator WordPress
  5. Cara Membuat Tampilan Postingan Yang Berbeda-beda
  6. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  7. Cara Membuat Random Post
  8. Cara Setting Expired Header
  9. Cara Menyembunyikan Versi WordPress
  10. Cara Mengganti Sebagian Isi Postingan Dengan SQL
  1. 7-6-2011 at 19:50 | #1

    Untuk WP saya bisa juga gak, Kang?

    Reply

  2. 7-6-2011 at 21:22 | #2

    sip, dicoba dulu,…
    trus untuk yang di halaman 2, 3, 4, dst juga dicantumin kode tsb dengan cara yang sama ya gan ?

    Reply

  3. 7-6-2011 at 21:33 | #3

    Saya baru tau trik ini.. dulu sering banget liat pagination post di blog berbahasa inggris…

    Reply

  4. 7-6-2011 at 22:09 | #4

    Kl gua gw hack aje di function.php ga perlu pake <!–nextpage–> bisa di atas bisa di bawah..ntar gw kasih menu dropdown di bawah posting tinggal pilih mau di atas, di bawah, atau abis posting.
    Nah..buat modif belon ada ide..

    Reply

  5. 7-6-2011 at 22:39 | #5

    punya saya sudah otomatis Mas..

    Reply

    arif Reply:

    mantap dunk :D, ga perlu pusing ngotak-atik script :D

    Reply

  6. nn
    7-6-2011 at 23:23 | #6

    ane coba gan……bisa rekomendasi ke stiabudi ga gan?……

    Reply

  7. 8-6-2011 at 15:41 | #7

    begitu ya, di coba2 dulu seperti biasa…
    thanks

    Reply

  8. 8-6-2011 at 18:07 | #8

    owh, jadi fungsinya mirip seperti readmore ya?

    Reply

  9. 8-6-2011 at 19:03 | #9

    kalau css diterapkan di blogspot gimana ya mas
    ada utak atik tidak dengan css blogspot
    —————————————————-
    Untuk CSS hampir sama antar wp dan blogspot hanya metode penempatannya aja yg beda kalau wp external sedangkan blogspot internal, tapi teknik penulisannya sama karena sama2 menggunakan standard CSS,
    Untuk HTML nya saya belum coba untuk blogspot terutama fungsi paginationnya, dah lama banget gak utak atik blogspot

    Reply

  10. 9-6-2011 at 13:14 | #10

    wah, informasi menarik untuk saya. patut dicoba karena saya lagi belajar bgeblog nih. terima kasih n salam kenal.

    Reply

Comment pages
1 2 3 6 2392
2+6=? (Wajib diisi)