Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Menambahkan Fitur Paginasi di dalam Artikel

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

Opsi Keterangan
hash Merupakan format fragmen URL untuk menandai pergantian halaman. Pola %i% pada !page=%i% akan diubah menjadi nomor halaman.
kin Digunakan untuk menentukan banyaknya kerabat tombol angka halaman yang akan ditampilkan sebelum dan setelah tombol angka halaman yang aktif.
top Jarak perhentian tambahan antara bagian atas layar halaman dengan bagian atas konten artikel setiap kali halaman berganti.
text Label-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>

  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 11 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!