Menambahkan Fitur Paginasi di dalam Artikel dengan JavaScript

Tabel Konten
  1. Integrasi Widget ke Blogger 
    1. Sebelum 
    2. Sesudah 
  2. Pengaturan 
Fitur Paginasi di dalam Artikel Blogger
Fitur paginasi di dalam artikel.

Fitur ini merupakan implementasi JavaScript dari plugin Mecha bernama Next yang berfungsi untuk memotong konten artikel menjadi beberapa bagian sehingga pengunjung dapat diajak untuk membaca konten artikel langkah demi langkah.

Lihat Demo


Integrasi Widget ke Blogger 

Untuk menambahkan fitur ini di blog, pertama-tama buka editor HTML tema Anda kemudian temukan kode yang tampak kurang lebih seperti ini:

<b:widget id='Blog1' type='Blog'>

Pada bagian bawah kode tersebut, sisipkan kode ini:

<b:includable id='postTypeNext' var='post'>
  <b:if cond='data:view.isSingleItem and data:post.labels any (i => i.name in ["Next", "Steps", "How-To", "Berikutnya", "Langkah-Langkah", "Bagaimana-Cara", "type:next"])'>
    <b:class name='type:next'/>
    <script src='//dte-project.github.io/blogger/next.min.js'></script>
  </b:if>
</b:includable>

Kemudian cari kode ini:

<data:post.body/>

Pada setiap kode yang Anda temukan, sisipkan kode ini di bawahnya:

<b:include data='post' name='postTypeNext'/>

Klik Simpan Tema. Fitur paginasi artikel sekarang sudah siap untuk digunakan! Yang perlu Anda lakukan berikutnya adalah menambahkan label Langkah-Langkah atau Bagaimana-Cara atau Steps atau How-To pada artikel yang Anda inginkan.

Untuk menandai bagian-bagian yang perlu dipotong, tambahkan komentar <!-- next --> pada baris yang ingin Anda potong di dalam artikel. Pastikan Anda sedang berada pada mode HTML saat menyunting:

<p>Halaman 1</p>
<!-- next -->
<p>Halaman 2</p>
<!-- next -->
<p>Halaman 3</p>
<!-- next -->
<p>Halaman 4</p>
<!-- next -->
<p>Dan seterusnya.</p>

Jika para pembaca artikel Anda dapat dipastikan menggunakan peramban dengan JavaScript yang aktif, maka akan lebih efektif jika Anda mengaktifkan fitur pramuat gambar pada plugin ini. Cara mengaktifkan fitur pramuat gambar adalah dengan mengubah atribut src pada elemen <img> menjadi data-src sehingga gambar-gambar yang ada tidak akan dimuat sebelum potongan halaman yang berisi gambar tersebut dibuka oleh pembaca:

Sebelum 

<img alt="" src="path/to/image.jpg">

Sesudah 

<img alt="" src="loading.png" data-src="path/to/image.jpg">

Ganti bagian yang Saya beri tanda dengan URL gambar berukuran kecil, atau jika dirasa kurang praktis, Anda bisa menghapus atribut src pada gambar tersebut.

Pengaturan 

OpsiKeterangan
hashMerupakan format fragmen URL untuk menandai pergantian halaman. Pola %i% pada !page=%i% akan diubah menjadi nomor halaman.
kinDigunakan untuk menentukan banyaknya kerabat tombol angka halaman yang akan ditampilkan sebelum dan setelah tombol angka halaman yang aktif.
topJarak perhentian tambahan antara bagian atas layar halaman dengan bagian atas konten artikel setiap kali halaman berganti.
textLabel-label yang diperlukan pada artikel. text[first] untuk menampilkan teks First, text[previous] untuk menampilkan teks Previous, text[next] untuk menampilkan teks Next, text[last] untuk menampilkan teks Last, dan text[current] untuk menampilkan teks Page 1 of 20.

Parameter-parameter di atas dapat Anda tambahkan sebagai parameter URL setelah nama berkas next.min.js:

<script src="next.min.js?top=20"></script>

15 Komentar

  • Muhammad Nur Fuad

    Kok jadi rajin postingnya mas, ada apakah :D

    • Taufik Nurrohman

      Lagi banyak ide mas. Sama sekalian pengen cari mood booster buat ngelanjutin proyek Mecha. Rilis lanjutan agak stagnan karena kendala ekstensi kontrol panel yang ngga selese-selese.

      • Maulida Dzul Fikri

        Mas, kalau diambil bukan dari hash, melainkan pakai query, misalnya /2020/02/index.html?page=1 bagaimana tekniknya ya? Saya ingin ketika ada klik di tautan paginasi bisa reload, bukan akses hashnya.

        • Taufik Nurrohman

          Kenapa harus reload? Semua halaman kan sebenarnya sudah ada di tempat? Memuat ulang berkali-kali nggak akan memberikan keuntungan apa-apa, karena JavaScript bekerja di sisi klien.

    • Beben Koben

      Biarkan saja, kalo perlu 1 hari 3x mosting :Ozzz

  • Addict Covers

    Hi Taufik, if i may again...

    Is possible to show more than one thumbnail in blogger posts?

    Currently only has templates showing one pic per time, if I want to show more than one image or thumbnail in an image site it is necessary to create multiple posts ... However, it would be very interesting a way to show all the images contained in a post of a theme with vertical posts, but arranging all the images in side by side.

    Exemple: http://www.imagebam.com/image/9454d2986401694

    • Taufik Nurrohman

      Not possible without loading the whole post body text to find the image URL using JavaScript. You might be interested with the data:post.enclosures object to attach the images URL manually.

  • Unknown

    \o/ \o/ \o/ \o/

  • Sopala Multapa

    Mas saya membuat widget artikel terbaru , pada bagian snipet saya ingin menampilkan link apa yg harus saya tambahkan pada kodenya y = g.replace(w, "");
    if (y.length > 120 && (y = "" + y.substring(0, 120) + "...")

    • Taufik Nurrohman

      Kalau dari elemen entry[i].summary.$t memang semua tag HTML akan dihapus, jadi tidak bisa.

      • Sopala Multapa

        apa ada solusi untuk itu ??

        • Taufik Nurrohman

          Pakai elemen entry[i].content.$t, dan untuk memanggil umpan pakainya tautan /feeds/posts/default, bukan /feeds/posts/summary. Masalah berikutnya ada pada cara mengubah elemen tersebut menjadi ringkasan pendek. Kalau sampai salah potong sebelum tag HTML penutup nanti akan merusak semua tampilan halaman karena HTML menjadi tidak valid. Mecha memakai cara ini untuk memotong HTML menjadi ringkasan pendek tanpa merusaknya. Mungkin kapan-kapan bisa Saya posting versi JavaScript-nya di sini.

          Diskusi di pindah ke sini saja mas.

  • Harmansyah

    Mas taufik minta tutorial cara membuat tombol balas hapus seperti di komentar blog ini

  • SantriGamer

    mas di blog apa bisa buat next ama previous untuk label tertentu?






Semua kode HTML akan dihapus kecuali kode-kode HTML yang dituliskan sebagai contoh. Gunakan sintaks Markdown untuk memberi gaya pada komentar.


Batal