Cara Mengganti Posting Lama dengan Load More AJAX di Blogger - Reboza Sambirejo

Kali ini admin Reboza Sambirejo kembali akan membagikan sebuah tutorial khusus untuk para blogger yaitu Cara Mengganti Posting Lama dengan Load More AJAX di Blogger. Secara default, navigasi halaman blogger adalah posting lama, posting baru, dan beranda (home). Seiring berjalannya waktu saat ini banyak creator/editor template blogger yang mengganti navigasi blog menjadi page number, load more, dsb untuk mempercantik tampilan blognya.

Seperti judul yang akan kita buat kali ini adalah load more onclick. Prinsip sederhananya elemen home dan posting baru pada navigasi akan dihilangkan dan saat kita klik posting lama, halaman yang seharusnya ada di page selanjutnya akan dimuat langsung. Bagi yang penasaran/masih bingung dengan prinsip kerjannya silahkan bisa lihat demo berikut.

Demo Langsung

Cara Membuat Halaman Navigasi AJAX

Pertama silahkan masuk keblogger > Blog Anda > Theme >> Edit HTML

Kemudian copykan kode berikut sebelum/diatas </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
(function($) {
    var $pager = $('#blog-pager'),
        $posts = $('.blog-posts');
    $pager.find('#blog-pager-newer-link').remove(); // Menyingkirkan navigasi posting lebih baru
    $pager.on("click", "#blog-pager-older-link a", function() {
        $.get(this.href, {}, function(data) {
            var source = $(data).find('.post').length ? $(data) : $('<div></div>');
            $posts.append(source.find('.blog-posts').html()); // Menyisipkan posting
            $pager.html(source.find('#blog-pager-older-link').clone()); // Memperbaharui navigasi
        }, "html");
        $(this).replaceWith('<span>Memuat.....</span>'); // Ubah navigasi posting menjadi indikator memuat saat sedang memuat
        return false;
    });
})(jQuery);
//]]>
</script>
</b:if>
</b:if>

Langkah selanjutnya, silahkan pasang kode berikut sebelum </style>

a.home-link{display:none}
#blog-pager{padding:10px}
#blog-pager-older-link{float:none}
#blog-pager-older-link a{padding:10px;color:#fff;background:#333}

Karena script yang akan kita pasang menggunakan JQuery, silahkan pasang kode berikut sebelum </head> jika template sobat sudah terpasang JQuery langkah ini bisa Anda lewati.

<script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></scr" + "ipt>");}
       //]]>
</script>

Sumber kode: http://www.dte.web.id/2013/04/membuat-navigasi-halaman-ajax-pada.html