Cara Membuat Toggle Komentar untuk Template Posting Blog Divi Anda

Diterbitkan: 2020-11-11

Komentar adalah bagian penting dari setiap template posting blog. Namun, bagi sebagian pengunjung, bagian komentar yang panjang dapat menjadi masalah setiap kali mereka mencoba menelusuri sisa konten di postingan. Membuat toggle komentar adalah solusi yang bagus untuk masalah ini. Dengan memberi pengguna kemampuan untuk beralih (menampilkan atau menyembunyikan) komentar, Anda dapat meningkatkan pengalaman pengguna dengan memberikan versi postingan Anda yang lebih ringkas pada awalnya dan memberi mereka kemampuan untuk menampilkan atau menyembunyikan komentar kapan pun mereka mau.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat toggle komentar untuk komentar template posting blog Divi Anda. Setelah kami membuat bilah sakelar komentar menggunakan Divi Builder, kami akan menambahkan kode yang diperlukan untuk menampilkan/menyembunyikan area komentar saat mengeklik bilah sakelar.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Templatenya GRATIS

Untuk mendapatkan template posting toggle komentar dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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

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!

Cara Mengunggah Template Unduhan Gratis

Pergi ke Divi Theme Builder

Untuk mengunggah template, navigasikan ke Divi Theme Builder di bagian belakang situs WordPress Anda.

templat posting blog untuk Paket Tata Letak Copywriter Divi

Unggah Templat Situs Web

Kemudian, di sudut kanan atas, Anda akan melihat ikon dengan dua panah. Klik pada ikon.

templat posting blog untuk Paket Tata Letak Copywriter Divi

Arahkan ke tab impor, unggah file JSON yang dapat Anda unduh di posting ini, dan klik 'Impor Template Pembuat Tema Divi'.

templat posting blog untuk Paket Tata Letak Copywriter Divi

Simpan Perubahan Pembuat Tema Divi

Setelah Anda mengunggah file, Anda akan melihat template baru dengan area tubuh baru yang telah ditetapkan ke Semua Postingan. Simpan perubahan Divi Theme Builder segera setelah Anda ingin template diaktifkan.

divi template posting blog Copywriter

Mari kita ke tutorialnya agar kita bisa belajar membuat benda ini dari awal, ya?

Cara Membuat Toggle Komentar untuk Template Posting Blog Divi Anda

Mengunggah Template Posting Blog Paket Pembuat Tema 5

Untuk memulai, kita akan memulai desain dengan menambahkan salah satu template posting blog kita yang sudah jadi. Untuk mengimpor template Pembuat Tema, Anda harus melakukan hal berikut:

  1. Navigasikan ke Pembuat Tema Divi
  2. Klik ikon portabilitas di kanan atas halaman.
  3. Pilih tab Impor di popup Portabilitas.
  4. Unduh dan Impor File Templat Produk Divi Divi Theme Builder 5. Setelah Anda mengunduh paket di sini, unzip file dan Anda akan menemukan file "divi-theme-builder-pack-5-post-template.json" yang perlu Anda impor.
  5. Klik Tombol Impor
  6. Setelah template diimpor, klik ikon edit pada area badan kustom template untuk mengedit tata letak template.

Membuat Bilah Toggle Komentar

Langkah pertama kami adalah membuat bilah sakelar komentar yang pada akhirnya akan menampilkan/menyembunyikan komentar. Untuk melakukan ini, kita akan membuat baris baru di atas baris yang menampung modul/konten komentar. Kemudian kita akan mengisi baris dengan judul dan ikon sakelar untuk melengkapi desain.

Menambahkan baris

Lanjutkan dan gulir ke bagian bawah tata letak premade dan tambahkan baris baru langsung di bawah baris yang berisi modul komentar.

Seret baris baru di atas baris komentar.

Kemudian tambahkan label, “Comments Toggle Bar”, ke baris di dalam tampilan layer untuk memudahkan identifikasi di kemudian hari.

Pengaturan Baris

Buka pengaturan untuk baris baru dan tambahkan latar belakang berikut:

  • Warna Latar Belakang: #624de3

Di bawah tab desain, perbarui yang berikut ini:

  • Sudut Bulat: 10px

  • Lebar Talang: 1
  • Lebar Maks: 1180px
  • Padding: 10px atas, 10px bawah, 5% kiri, 5% kanan

Di bawah tab lanjutan, tambahkan Kelas CSS berikut ke baris:

  • Kelas CSS: et-comment-toggle

Kemudian tambahkan CSS Kustom berikut ke Elemen Utama: 

display:flex;
align-items:center;

Komentar Beralih Judul

Untuk menambahkan judul sakelar komentar, tambahkan modul teks baru ke kolom kiri.

Hapus konten tubuh tiruan dan pilih ikon "Gunakan Konten Dinamis" saat mengarahkan kursor ke kotak konten tubuh.

Dari daftar dropdown, pilih "Post Comment Count".

Dalam pengaturan Jumlah Komentar Posting, perbarui yang berikut ini:

Di kotak input Sebelum rekatkan HTML berikut: 

Show/Hide Comments <span style="font-size:0.7em">(

Di kotak Setelah input, rekatkan HTML berikut:

 comments)</span>

Pilih TIDAK di bawah opsi Tautkan ke Area Komentar.

Kemudian simpan pengaturan.

Di bawah tab desain, perbarui yang berikut ini:

  • Font Teks: Rubik
  • Berat Font Teks: Sedang
  • Gaya Font Teks: TT
  • Teks Ukuran Teks: 24px (desktop), 18px (tablet), 16px (ponsel)
  • Tinggi Baris Teks: 1em
  • Perataan Teks: Kiri
  • Warna Teks: Cahaya

Ikon Bilah Pengalih Komentar

Untuk membuat ikon bilah sakelar komentar, kita akan menggunakan modul uraian yang hanya menampilkan ikon yang ingin kita gunakan.

Tambahkan modul uraian baru ke kolom kanan baris.

Keluarkan judul tiruan dan konten isi, lalu pilih untuk menggunakan ikon plus.

Di bawah tab desain, perbarui yang berikut ini:

  • Warna Ikon: #ffffff
  • Ukuran Font Ikon: 40px

  • Lebar: 50px
  • Penyelarasan Modul: Kanan
  • Tinggi: 50px
  • Gambar/Ikon Animasi: Tanpa Animasi

Di bawah Tab Tingkat Lanjut, tambahkan CSS khusus berikut ke Elemen Utama: 

display:flex;
align-items:center;

Kemudian tambahkan satu cuplikan CSS lagi ke Gambar Blurb: 

margin-bottom: 0px !important;

Mengoptimalkan Baris dengan Modul/Konten Komentar

Sekarang setelah bilah pengalih komentar selesai, kita perlu mengoptimalkan baris yang ada yang berisi modul/konten komentar sehingga memiliki Kelas dan spasi CSS yang diperlukan.

Pertama, Anda dapat menambahkan label, "Komentar Beralih Konten", ke baris. Kemudian buka pengaturan baris dan perbarui padding sebagai berikut:

  • Padding 4% atas, 4% bawah, 4% kiri, 4% kanan

Di bawah tab lanjutan, tambahkan Kelas CSS berikut ke baris:

  • Kelas CSS: et-comment-toggle-content

Kemudian simpan dan keluar dari editor tata letak.

Dan simpan juga perubahan ke pembuat tema.

Menambahkan Kode Kustom

Kode yang kita butuhkan untuk menambahkan fungsi toggle agar komentar dapat ditambahkan ke modul kode.

Tambahkan modul kode baru di bawah modul uraian di baris toggle bar komentar yang kita buat sebelumnya.

Kemudian tempel di CSS berikut memastikan untuk membungkus kode dalam tag gaya . 

.et-comment-toggle .et-pb-icon {
  transition: all 300ms;
  } 
.et-comment-toggle.open .et-pb-icon { /*rotate the plus icon 45 degrees when toggle opens*/
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  }
.et-comment-toggle-content { /* hide comment toggle content initially */
  display:none;
  }
.et-comment-toggle-content.ctc-active { /* show comment toggle content when active */
    display:block;
  }  
.et-fb .et-comment-toggle-content {
  display:block;
  }
.et-comment-toggle {
  cursor:pointer;
  }

Di bawah CSS yang dibungkus dengan Lalu tempel di CSS berikut pastikan untuk membungkus kode dalam tag gaya , tambahkan kode JQuery berikut pastikan untuk membungkusnya Kemudian tempel di CSS berikut pastikan untuk membungkus kode dalam skrip tag. 

function isStorageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.length !== 0;
    }
}

jQuery(document).ready(function($) {
    var isSessionStorageAvailable = window.isStorageAvailable('sessionStorage');
    var $commentToggle = $('.et-comment-toggle');
    var $commentToggleContent = $('.et-comment-toggle-content');

    $commentToggle.on('click', function() {
        // Toggle content and add 'ctc-active' class:
        $commentToggleContent.slideToggle(300).toggleClass('ctc-active');

        // Add class to animate toggle icon:
        if ($commentToggleContent.hasClass('ctc-active')) {
            $commentToggle.addClass('open');
        } else {
            $commentToggle.removeClass('open');
        }

        // If storage is available, set item in browser session storage
        // (so we can know to open the toggle automatically
        // when user reloads the page).
        if (isSessionStorageAvailable) {
            $commentToggleContent.hasClass('ctc-active') ?
            sessionStorage.setItem('etCommentToggleEnabled','1'):
            sessionStorage.removeItem('etCommentToggleEnabled');
        }
    });

    // If storage is available, open toggle automatically
    // on page load if item is in browser session storage.
    // This allows the anchor links to work after adding
    // a comment or reply in the comment form.
    if (isSessionStorageAvailable) {
        '1' == sessionStorage.getItem('etCommentToggleEnabled') ?
        $commentToggleContent.addClass('ctc-active'):
        $commentToggleContent.removeClass('ctc-active');
    }

    // Open toggle if url has hash tag and no session storage.
    // This is will make sure the toggle is open for incoming
    // anchor links (from another page) to specific comments.
    if (window.location.hash) {
        $commentToggleContent.addClass('ctc-active');
        if (isSessionStorageAvailable) {
            sessionStorage.setItem('etCommentToggleEnabled','1');
        } else {
            sessionStorage.removeItem('etCommentToggleEnabled');
        }
    }

    // Add class to animate toggle icon if needed on page reload:
    if ($commentToggleContent.hasClass('ctc-active')) {
        $commentToggle.addClass('open');
    } else {
        $commentToggle.removeClass('open');
    }
});

Tentang Fungsi Toggle Komentar

Toggle komentar ini memiliki jQuery yang akan mengingat status toggle (terbuka atau tertutup) sepanjang sesi browser pengguna. Jadi jika pengguna memilih untuk menampilkan komentar dan me-refresh halaman, komentar akan tetap terbuka. Juga, komentar akan secara otomatis terbuka/tampil setiap kali pengguna mengirimkan komentar atau membalas pada formulir komentar. Ini penting karena setiap kali pengguna mengirimkan komentar, halaman akan memuat ulang gulir ke kiriman mereka. Bahkan, toggle komentar akan secara otomatis terbuka/tampil setiap kali tautan jangkar digunakan di halaman untuk berjaga-jaga jika Anda ingin menautkan ke komentar tertentu dari halaman lain.

Hasil Akhir

Untuk melihat hasil akhirnya, cukup buka posting blog langsung di situs Anda.

Pikiran Akhir

Mudah-mudahan, tombol komentar ini akan berguna untuk merampingkan desain posting blog Divi Anda sehingga pengguna dapat menikmati tata letak posting yang lebih ringkas jika mereka mau. Dan, karena kode yang diberikan memberi Anda fungsionalitas tambahan untuk menjaga agar komentar tetap terlihat saat diperlukan, Anda memiliki opsi yang bagus untuk menambahkan sakelar komentar ke templat posting blog Divi mana pun tanpa harus menggunakan plugin.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!