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. Pasang Quiz Anti Spam Tanpa Plugin
  2. Membuat Anti Spam Dengan WP-reCAPTCHA
  3. Cara Menambahkan Menu Navigasi Di Theme MobilePress
  4. Cara Membuat Dan Menampilkan Favicon Di WordPress
  5. Cara Setting Plugin Platinum SEO Pack
  6. Cara Mudah Menuliskan Karakter Khusus
  7. Saran Dari Google Adsense Tentang Tata Letak Dan Navigasi
  8. Mengoptimalkan Kinerja Situs Web/Blog
  9. Menghemat Quota Bandwidth dengan HTTP Compression
  10. Cara Menghapus Logo WP Dan Menu Di Admin Bar
  1. 19-1-2012 at 05:26 | #1

    bos gmana caranya memisahkan postingan yang satu dengan yang lain?
    Misalnya jika dibuka post smadav saya tidak ikut avast yang ditampilkan
    tolong dibantu, ni blog saya

    Reply

  2. 14-3-2012 at 00:46 | #2

    thanks yaaa

    Reply

  3. 7-4-2012 at 09:44 | #3

    kalo di blogspot bisa gak gan ?

    Reply

  4. 20-7-2012 at 13:46 | #4

    ini nih yg ane cari-cari, akhirnya ketemu juga artikelnya,.
    thanks gan,.

    Reply

  5. 20-7-2012 at 13:46 | #5

    makasih share nya gan,.,.,

    Reply

  6. 23-9-2012 at 08:41 | #6

    nice article, bagaimana cara memasukan halaman (page) ke katagori tertentu di wordpress????

    Reply

  7. 26-10-2012 at 19:01 | #7

    mantap gan infonya, apakah hal yang sama bisa dilakukan di page gan??

    Reply

  8. 9-2-2013 at 12:28 | #8

    tolonglah mas, untuk blogspot apa gak bisa ya ?

    Reply

  9. 10-6-2013 at 02:08 | #9

    mas masih belum mudeng ik? bingung.

    Reply

  10. 26-12-2013 at 11:31 | #10

    kalau untuk blogspot caranya bagaimana kang alwi? …udah googling sana sini ngak ketemu nih caranya..

    Reply

Comment pages
0+9=? (Wajib diisi)