Membuat Load More Dengan CSS dan JavaScript

Cara Membuat Load More Dengan CSS dan JavaScript di WordPress. Kami mengucapkan banyak-banyak terima kasih bagi para pengunjung teknologi.visitklaten.com yang telah meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.

Dalam artikel kali ini Kami akan berbagi cara membuat fungsi load more dengan css dan javascript di wordpress. Untuk membuatnya sangat mudah. Dalam kesempatan kali ini kami akan berbagi caranya dan sobat tinggal copy paste dan sedikit pengeditan sesuai kebutuhan.

Load more akan sangat berguna bagi yang tidak menginginkan pagination dan ingin menampilkan semua file dalam satu halaman saja. Dalam hal ini berupa tombol “load more” yang apabila di klik akan muncul data/gambar/file selanjutnya.

Yuk langsung saja kita simak penjelasan dari kami. Dalam hal ini kami menggunakan tambahan CSS dari bootstrap.

Membuat “Load More” di wordpress

HTML

HTML dibawah ini hanya sekedar contoh atau acuan yang bisa di aplikasikan atau diterapkan dalam model lain semisal gambar atau postingan.

<div class="loadmore-frame">
    <div class="ast-container text-center p-1">
        <div class="row m-0 justify-content-center align-items-center">
            <div class="col-md-4">
                <div class="content">1</div>
            </div>
            <div class="col-md-4">
                <div class="content">2</div>
            </div>
            <div class="col-md-4">
                <div class="content">3</div>
            </div>
            <div class="col-md-4">
                <div class="content">4</div>
            </div>
            <div class="col-md-4">
                <div class="content">5</div>
            </div>
            <div class="col-md-4">
                <div class="content">6</div>
            </div>
            <div class="col-md-4">
                <div class="content">7</div>
            </div>
            <div class="col-md-4">
                <div class="content">8</div>
            </div>
            <div class="col-md-4">
                <div class="content">9</div>
            </div>
            <div class="col-md-4">
                <div class="content">10</div>
            </div>
            <div class="col-md-4">
                <div class="content">11</div>
            </div>
            <div class="col-md-4">
                <div class="content">12</div>
            </div>
            <div class="col-md-4">
                <div class="content">13</div>
            </div>
            <div class="col-md-4">
                <div class="content">14</div>
            </div>
            <div class="col-md-4">
                <div class="content">15</div>
            </div>
        </div>
    <button class="load-more btn btn-primary btn-lg mt-3">Load More</button>
    </div>
</div>

CSS

Harap diperhatikan atau dipastikan div atau frame di konten harus di display none. Sedangkan untuk style lainnya menyesuaikan kebutuhan. 

.loadmore-frame .col-md-4{
  display:none;
  padding: .5rem;
}
.loadmore-frame .content {
    background-color: #333;
    height: 200px;
    width: 100%;
    border: 1px solid #ccc;
    color: #fff;
    font-size: 50px;
    line-height: 200px;
}

JS

Di bagian slice “slice(0, 3)” angka tiga(3) bisa diganti dengan yang lain sesuai kebutuhan semisal 6. Jika 6 di “slice(0, 3).show” maka yang muncul adalah 6 . Apabila 6 di “slice(0, 3).slideDown” setiap klik tombol load more akan muncul 6.

jQuery(document).ready(function($){   
 $(function () {
        $(".loadmore-frame .col-md-4").slice(0, 3).show();
        $("body").on('click touchstart', '.loadmore-frame .load-more', function (e) {
            e.preventDefault();
            $(".loadmore-frame .col-md-4:hidden").slice(0, 3).slideDown();
            if ($(".loadmore-frame .col-md-4:hidden").length == 0) {
                $(".loadmore-frame .load-more").css('visibility', 'hidden');
            }
            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 1000);
        });
    });   
});

Kelebihan jika menggunakan metode ini yaitu dengan CSS dan JavaScript adalah simple, mudah dan tidak terlalu ribet. Adapun kekurangannya mungkin karena di display none maka saat load awal web akan terasa lebih lambat.

Dalam kesempatan berikutnya InsyaAllah akan kami share cara membuat load more menggunakan ajax sehingga saat load awal tidak lambat.

Untuk tampilan load more bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.