Cara membuat Load more Ajax mengganti Postingan lama di Blogger

Kali ini saya Harun Faruqi atau Haday akan membahas Cara membuat Load more Ajax mengganti Postingan lama di Blogger. Load more ini salah satu fungsi nya untuk mempercantik blog kamu dan mempermudah para ngujung blog untuk membaca artikel lama. bila kamu ingin membuat seperti tersebut langsung saja menuju langkah langkah berikut ini

1. Login Blogger, Klik Template → Edit HTML.

2. Copy kode di bawah ini, letakkan sebelum tag </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>

3. Letakkan CSS ini sebelum tag ]]></b:skin>

 /*--------------------- MeHaday Update ----------------------*/
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}
/*-------------------- MeHaday Update ----------------------*/

4. Jika kamu sudah memasang kode JQuery pada Template kamu lewati langkah ini, jika belum memasang kode JQuery silahkan letakkan sebelum tag </head>

<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>

Kode jQuery library hanya bisa di pasang 1x saja, jika kamu sudah memasang kode jQuery library lewati langkah ini, karena akan mengakibatkan konflik / semua kode jQuery tidak akan berfungsi.

5. Simpan dan lihat hasilnya.