Cara Membuat Bilah Kemajuan Membaca untuk Postingan Blog Divi Anda (tanpa plugin)

Diterbitkan: 2020-07-19

Menambahkan Bilah Kemajuan Membaca (atau indikator gulir) ke templat posting blog Anda adalah cara cerdas untuk menampilkan kemajuan membaca pengguna untuk artikel tertentu. Idenya adalah untuk menampilkan bilah kemajuan tetap di bagian atas kiriman yang secara langsung berkorelasi dengan posisi gulir pengguna pada konten kiriman. Saat pengguna mencapai artikel, bilah kemajuan mulai terisi. Saat pengguna mencapai akhir artikel, bilah kemajuan 100% penuh.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat bilah kemajuan membaca untuk posting blog Divi yang cukup pintar untuk mengetahui kapan pengguna memulai dan menyelesaikan (dengan menggulir) konten posting yang sebenarnya, bukan seluruh halaman. Ini akan memberikan indikasi yang lebih akurat tentang kemajuan membaca.

Kami akan menunjukkan cara menambahkan bilah kemajuan membaca ini ke templat posting blog default Divi atau templat posting khusus menggunakan Divi Theme Builder.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini. Perhatikan bagaimana bilah kemajuan diperbaiki di bagian atas templat posting. Bilah kemajuan mulai terisi setelah pengguna mencapai konten posting/artikel yang sebenarnya dan berakhir ketika pengguna menyelesaikan konten posting.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Divi Theme Builder Anda, navigasikan ke Divi Theme Builder.

Klik ikon portabilitas.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, template bagian akan muncul di Divi Theme Builder.

Langsung saja ke tutorialnya ya?

Bagian 1: Mengimpor Template Premade

Untuk tutorial ini, kita akan menggunakan beberapa template premade dari paket pembuat tema keenam kita. Kami akan mengimpor templat situs web default yang akan memberi kami tajuk global yang berfungsi di mana kami akan menambahkan bilah info posting. Dan kami akan mengimpor template posting blog untuk menguji hasil kami pada posting langsung.

PENTING: Akan lebih baik untuk mengimpor template ini di situs uji sehingga Anda tidak akan mengacaukan situs langsung.

Impor Template Situs Web Default

Pertama, Anda perlu mengunduh Paket Pembuat Tema GRATIS Keempat untuk Divi. Kemudian unzip file tersebut.

Dari Dasbor WordPress, navigasikan ke Divi > Pembuat Tema. Kemudian klik ikon portabilitas di kanan atas. Di popup portabilitas, pilih tab impor. Kemudian pilih file JSON templat situs web default dari folder yang diunduh dan klik tombol impor. Ini akan mengimpor templat situs web default baru dengan header dan footer global.

Impor Template Posting

Ulangi proses ini untuk mengimpor templat posting dari folder unduhan yang sama. Buka popup portabilitas, pilih file json templat posting, dan klik tombol impor. Ini akan memberi Anda templat posting yang ditetapkan untuk semua posting di seluruh situs Anda, bersama dengan header default dan footer.

Nonaktifkan Global pada Header Template Posting

Kami akan menambahkan bilah info posting dinamis kami ke header template posting. Namun, karena kami ingin bilah info kiriman hanya pada templat kiriman, kami perlu menonaktifkan global pada tajuk agar bilah kami tidak ditambahkan ke semua tajuk di seluruh situs. Untuk menonaktifkan global pada header global, buka menu pengaturan pada header global, dan pilih "Nonaktifkan Global".

bilah info pos dinamis divi

Sekarang header harus berwarna abu-abu dengan label “Custom Header”. Setelah siap, klik ikon edit untuk mengedit template tata letak header.

bilah info pos dinamis divi

Mendesain Bilah Kemajuan Membaca

Menambahkan Bagian dan Baris

Di dalam editor tata letak header, buat bagian reguler baru di bawah bagian saat ini yang memegang header.

Kemudian tambahkan satu kolom ke bagian tersebut.

Pengaturan Bagian

Buka pengaturan bagian dan perbarui yang berikut ini:

Padding: 0px atas, 0px bawah

Pengaturan Baris

Setelah pengaturan bagian ditambahkan, buka pengaturan untuk baris dan perbarui yang berikut:

warna latar belakang: #2b2b2b

Di bawah tab desain, perbarui yang berikut ini:

Lebar Talang: 1
Lebar: 100%
Lebar Maks: 100%
Padding: 0px atas, 0px bawah

Membuat Bilah Gulir dengan Modul Pembagi

Bilah kemajuan secara bertahap akan bertambah lebar untuk menempati wadah/baris kosong. Untuk membangun ini, kita akan menggunakan modul pembagi dengan warna latar belakang kustom. Setelah kami mendesain pembagi dengan gaya seperti yang kami inginkan dari bilah kemajuan, kami akan menambahkan kode yang diperlukan untuk membuat pembagi bertambah lebar pada waktu yang tepat saat menggulir ke bawah halaman.

Tambahkan Modul Pembagi

Buat modul pembagi baru di dalam kolom.

Kemudian nonaktifkan visibilitas pembagi. Kami akan menambahkan warna latar belakang untuk berfungsi sebagai warna bilah kemajuan. Perbarui berikut ini:

Tampilkan Pembagi: TIDAK
Warna Kiri Gradien Latar Belakang: #ff4349
Warna Kanan Gradien Latar Belakang: #fe7f47
Arah Gradien: 90 derajat

Di bawah tab desain, perbarui ketinggian bilah kemajuan:

tinggi: 20px

Di bawah tab lanjutan, berikan pembagi ID CSS khusus sebagai berikut:

ID CSS: scrollBar

Kami akan membutuhkan ini untuk menargetkan bilah gulir untuk fungsionalitas dengan jQuery nanti.

Tambahkan Label Penghitung Persentase Progress Bar

Untuk menambahkan label penghitung persentase bilah kemajuan, tambahkan modul teks di bawah modul pembagi.

Kemudian tambahkan HTML berikut ke konten isi:

<p>Reading Progress: <span></span></p>

Tag span penting di sini karena kami akan menggunakan jQuery untuk mengisi tag span dengan penghitung persentase.

Di bawah tab desain, perbarui yang berikut ini:

Font Teks: Heebo
Berat Font Teks: Tebal
Gaya Font Teks: TT
Warna Teks Teks: #ffffff
Ukuran Teks Teks: 13px
Spasi Huruf Teks: 3px
Tinggi Baris Teks: 1em

Kemudian perbarui padding kiri sedikit:

bantalan: 10px kiri

Di bawah tab lanjutan, berikan modul teks posisi absolut di tengah kolom/baris. Ini akan memastikan itu tidak memakan ruang yang sebenarnya dalam dokumen dan tetap berada di tengah secara vertikal di dalam bilah.

Posisi: Absolut
Lokasi: Kiri Tengah

Sebelum Anda meninggalkan modul teks, tambahkan Kelas CSS sehingga kami dapat menargetkannya dengan kode jQuery kami.

Kelas CSS: et-progress-label

Menambahkan Kode jQuery

Untuk memberikan bilah kemajuan fungsionalitas ajaib yang dibutuhkan, kita perlu menambahkan kode jQuery yang diperlukan.

Untuk melakukan ini, tambahkan modul kode baru di bawah modul teks.

Kemudian paste kode berikut:

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>

Dan untuk langkah terakhir, kita perlu memberikan posisi tetap pada bagian kita. Kami menyimpan ini untuk yang terakhir karena ini akan menyembunyikan bagian di belakang bagian di atas yang berisi konten header.

Buka pengaturan bagian untuk bagian yang berisi bilah kemajuan dan perbarui yang berikut:

Posisi: Tetap
Indeks Z: 998

Kemudian Buka pengaturan bagian atas yang berisi konten header dan perbarui Z Index sebagai berikut:

Indeks Z: 999

Sekarang bilah kemajuan akan disembunyikan di balik bagian atas header pada awalnya. Kemudian ketika pengguna menggulir ke bawah pos, Anda akan melihatnya tetap di bagian atas halaman.

Jangan lupa untuk menyimpan perubahan.

Menambahkan pemilih (Kelas CSS) ke Modul Konten Postingan di Templat Area Tubuh.

Saat ini kode tersebut ditulis untuk mengenali elemen dengan kelas “et-post-content” sebagai konten postingan utama dari postingan tersebut.

Karena kita menggunakan template khusus untuk isi postingan, kita perlu menerapkan Kelas CSS itu ke Modul Konten Postingan template sehingga kode kita dapat menghitung kemajuan membaca secara memadai saat pengguna menggulir ke bawah postingan.

Untuk melakukan ini, buka templat area tubuh dari templat posting di pembuat tema.

Buka Pengaturan Modul Konten Posting dan tambahkan Kelas CSS berikut:

Kelas CSS: et-post-content

Kemudian simpan perubahan.

Setelah selesai, simpan perubahan pada tata letak dan ke pembuat tema.

bilah info pos dinamis divi

Hasil Akhir

Untuk melihat hasilnya dalam tindakan, buka posting langsung di situs web Anda. Pastikan postingan memiliki konten yang cukup sehingga ada ruang untuk menggulir halaman ke bawah.

Menggunakan Bilah Kemajuan Membaca pada Templat Postingan default Divi (bukan templat khusus)

Jika Anda tidak menggunakan templat badan khusus untuk posting dan ingin menambahkan bilah kemajuan membaca ke templat posting blog default di Divi, yang harus Anda lakukan adalah memperbarui satu Kelas CSS dalam kode.

Pertama, pastikan area badan kustom dari template postingan telah dihapus.

Kemudian buka tata letak templat tajuk khusus dan perbarui modul kode dengan mengganti baris kode ini…

 var $postContent = $('.et-post-content');

dengan ini…

 var $postContent = $('.entry-content');

Kelas "konten entri" akan menargetkan div dalam templat posting default yang berisi konten posting blog (tidak termasuk judul, gambar unggulan, metadata di atas, dan komentar di bawah yang akan mengubah panjang artikel yang sebenarnya).

Hasil

Berikut adalah hasil postingan menggunakan template postingan default.

Pikiran Akhir

Bilah kemajuan membaca ini jauh lebih pintar daripada indikator gulir khas Anda yang menunjukkan kemajuan gulir melalui seluruh halaman/dokumen. Bilah ini hanya menargetkan konten posting aktual yang akan dibaca pengguna, memberikan gambaran akurat tentang kemajuan membaca. Ini bagus untuk blog yang cenderung memiliki salinan dan komentar yang panjang. Saya juga akan bekerja dengan baik untuk kursus online untuk memberi para siswa itu motivasi ekstra untuk terus maju!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!