Membuat Navigasi Halaman AJAX pada Blogger

Tabel Konten
  1. Menerapkan AJAX pada Navigasi Halaman 
  2. Infinite Scroll (?) 

Prinsipnya sederhana. Di sini Saya menggunakan navigasi Posting Lebih Lama sebagai navigasi AJAX dan menggunakan jQuery $.get() untuk memanggil URL pada navigasi tersebut:

// Menyingkirkan navigasi posting lebih baru (Navigasi ini tidak diperlukan)
$('#blog-pager').find('#blog-pager-newer-link').remove();

// Dasar AJAX navigasi
$('#blog-pager').on("click", "#blog-pager-older-link a", function() {
    $.get(this.href, {}, function(data) {
        // Proses...
    }, "html");
    return false;
});

Kita akan menggunakan elemen .blog-posts untuk memuat posting-posting baru dari halaman selanjutnya.

Menerapkan AJAX pada Navigasi Halaman 

Pastikan jQuery sudah terpasang pada template. Masuk ke editor HTML template, kemudian salin kode ini dan letakkan di atas </body>:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script>
//<![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>

Klik Simpan Template.

Sekarang coba buka halaman blog Anda kemudian klik navigasi Posting Lama atau Older Post. Jika navigasi tersebut berubah menjadi teks bertuliskan “memuat...” seperti ini, maka itu artinya AJAX sedang bekerja:

Ini adalah gambar navigasi halaman yang sedang memuat halaman baru dengan AJAX
Indikator sedang memuat

Tunggu sampai posting-posting baru muncul di bawah posting-posting yang sedang terlihat saat ini.

Infinite Scroll (?) 

Untuk menciptakan infinite scroll pada sistem navigasi halaman, cukup nyatakan event .scroll() pada $(window) dan cek apakah jarak gulungan layar telah mencapai batas akhir atau belum. Jika ya, picu event .click() pada navigasi AJAX yang telah kita buat sebelumnya.

Dalam kasus ini, Saya menentukan batas akhir gulungan layar bukan berdasarkan tinggi halaman, melainkan berdasarkan posisi navigasi terhadap bagian teratas dari layar:

(function($) {

    var $pager = $('#blog-pager'),
        $posts = $('.blog-posts'),
        loading = false;

    // AJAX
    $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());
            $pager.html(source.find('#blog-pager-older-link').clone());
            loading = false;
        }, "html");
        $(this).replaceWith('<span>Memuat...</span>'); // Ubah navigasi posting menjadi indikator memuat saat sedang memuat
        return false;
    });

    // INFINITE SCROLL
    $(window).on("scroll resize", function() {
        // Jika AJAX sedang tidak memuat dan jika jarak gulungan layar + tinggi layar telah mencapai
        // tinggi yang sama dengan/lebih besar dari offset navigasi halaman terhadap bagian teratas dari layar...
        if (!loading && ($(this).scrollTop() + $(this).height()) >= $pager.offset().top) {
            $pager.find('#blog-pager-older-link a').trigger("click"); // Picu event `.click()` pada navigasi AJAX posting
            loading = true; // Mulai antre pemuatan
        }
    });

})(jQuery);

Catatan: JavaScript Auto Read-More akan tereksekusi saat halaman dimuat dengan cara biasa, sehingga jangan kaget jika posting-posting baru yang dimuat oleh AJAX tidak akan terpotong menjadi ringkasan posting. Saya sarankan Anda untuk menggunakan konsep ringkasan posting tanpa JavaScript yang pernah Saya tuliskan sebelumnya di sini.

60 Komentar

  • budkalon

    Wah!!! Terima kasih!!!! Bisa bekerja :D

  • Yopi Hasopa

    terima kasih mas, ini yang saya tunggu, langsung dipasang di blog saya \o/

  • Yopi Hasopa

    Mas bagaimana caranya pas ngeklik next post gambar thumnail 72x72 bisa langsung berubah jadi 200x200, soalnya gambar jadi pecah kalo gak begitu, karena saya memakai resolusi 200x200 untuk thumnail postingnya. Intinya bagaimana menggabungkan post http://www.dte.web.id/2012/07/memperbesar-thumbnail-posting.html dengan trik Navigasi Halaman Ajax ini Mas?

    Terima kasih.

    • Yopi Hasopa

      ini mas contoh blog nya --> http://www.hsp21.com

    • Taufik Nurrohman

      Masukkan kode eksekusi apa saja di bagian paling bawah pada bagian dalam area $.get() untuk mengeksekusi DOM setelah data-data baru termuat. Misalnya seperti ini:

      $pager.on("click", "#blog-pager-older-link a", function() {
      $.get(this.href, {}, function(data) {
      var source = $(data).find('.post').length ? $(data) : "";
      $posts.append(source.find('.blog-posts').html());
      $pager.html(source.find('#blog-pager-older-link').clone());
      resizeThumb('main-wrapper', 200); // Memperbaharui ukuran thumbnail posting
      }, "html");
      $(this).replaceWith('<span>Memuat...</span>');
      return false;
      });
      • Yopi Hasopa

        Mantapp mas taufik, terima kasih banget. Maklum saya belum terlalu memahami js/jquery/ajax, hehe

  • Anonim

    Apakah read more tanpa Js bisa diakali supaya postingan yang tampil sebanyak 100 karakter bisa lebih dari 100 karakter dan membuat ajak bisa bekerjasama sama..??

  • Beben Koben

    kereeeeennn :-bd

  • kawsar

    does not work

    the script is not formatted for bloger template

    • Taufik Nurrohman

      How? Have you added the JQuery library before the code above? This:

      Pastikan JQuery sudah terpasang pada template.
      Make sure that the JQuery library already installed on the template.

  • Unknown

    mas, maaf ni, disaya ko ga jalan ya..
    cuma loading saja tapi artikelnya ga muncul..
    cek http://mdf-blog.blogspot.com/search/label/All%20Tutorials
    jumlah postingan semuanya ada 55..

    ini kodenya yang sudah saya sesuaikan dengan id element postnya
    (function($) {
    var $pager = $('#blog-pager'),
    $posts = $('.content_bottom');
    $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('.content_box').length ? $(data) : "";
    $posts.append(source.find('.content_bottom').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);

    mohon solusinya.. :)

    • Taufik Nurrohman

      var source = $(data).children().length ? $(data) : $('<div></div>');
      • Unknown

        thanks mass.. sukses..
        tapi kenapa harus JS'a dirubah juga ya.. padahal yang beda dengan yang lainya hanya id saja.. .post dan .content_box ??
        apakah beda ID element pada template saya dengan template yang umumnya menggunakan .post ketika dipasangkan ajax harus ada code .children() ?
        membingungkan buat saya..

        • Taufik Nurrohman

          Kode ini berfungsi untuk mengecek apakah pada halaman selanjutnya masih terdapat posting atau tidak. Jika tidak, maka itu artinya halaman sudah habis:

          var source = $(data).find('.post').length ? $(data) : $('<div></div>');

          Kalau dijabarkan akan menjadi seperti ini:

          // Jika masih terdapat posting pada halaman selanjutnya...
          if ($(data).find('.post').length) {
          // Ambil markup posting dan navigasi halaman di dalam `$(data)` untuk dimuat
          var source = $(data);
          // Jika tidak...
          } else {
          // Gunakan elemen kosong sebagai alternatif untuk aksi "Tidak memuat apa-apa"
          var source = $('<div></div>');
          }

          Saya lihat pada markup template blogmu cuma ada elemen .content_bottom dengan beberapa tautan tanpa atribut kelas atau ID apapun:

          <div class='content_bottom'>
          <a href='#'> ... </a>
          <a href='#'> ... </a>
          <a href='#'> ... </a>
          <a href='#'> ... </a>
          </div>

          Padahal versi standar markup daftar posting adalah seperti ini:

          <div class='blog-posts'>
          <div class='post'> ... </div>
          <div class='post'> ... </div>
          <div class='post'> ... </div>
          <div class='post'> ... </div>
          </div>
          • Unknown

            owwhh gitu ya.. sudah mengerti saya sekarang..
            jadi .content_bottom pada blog saya hanya mengurung tautan saja..

            mungkin kalo markupnya seperti ini, tidak perlu merubah JS'a... :D
            <div class='content_bottom'>
            <div class='content_box'> ... </div>
            <div class='content_box'> ... </div>
            <div class='content_box'> ... </div>
            <div class='content_box'> ... </div>
            </div>

            terima kasih bnyak mas atas penjelasannya.. :)

            • Unknown

              mas ada sedikit masalah ni.. ko gambar post pada homepage dibagian readmore ga kluar ya??
              saya pake readmore textarea dari sini, dan sudah terpasang gambar default unutk posting yang tidak ada gambar..
              cek http://blog4modif.blogspot.com/

              thanks b4 mhon solusinya... :)

  • Unknown

    Om , punya saya kok gak bisa yah ??
    atau mungkin karena pakai Navigasi Halaman jadi fungsi di atas gk bisa/gk kluar ??
    kalau iya , gimana cara mengembalikan blog pager nya ?? hehe nanya mulu ^_^

    • Taufik Nurrohman

      Ini adalah navigasi halaman Blogger yang masih standar ⇒ link
      Kalau kamu memakai JavaScript navigasi halaman berangka, lebih baik dihapus saja script itu. Tidak ada gunanya (menurut Saya).

      • Unknown

        JS navigasi halamannya sudah saya hapus , dan saya sudah coba Tutorial ini , tapi kok hanya keluar kata Memuat... nya saja dan tidak memunculkan post selanjutnya .
        Itu gimana Om Solusinya ??

  • Unknown

    Makasih mas taufik sudah berhasil..

  • Putra

    berhasil. Tapi kok thumbnailnya jadi kecil yaa?
    saya juga masang memperbesar thumbnail posting
    /2012/07/memperbesar-thumbnail-posting.html

    ada solusi mas? =p*

  • Unknown

    salam kenal agan agan,, postingan anda sangat bermanfaat, bagus,, kerennn,, lihat blog saya gan http://nadasyahreza.blogspot.com saya baru dalam Dunia bloger mf klonya biasa" saja,,

  • Rosyd Aqbar

    oke ,
    mudeng, bisa di coba :Q
    ijin Nyoba

    Aqb Blog

  • Anonim

    Cukup sederhana juga caranya! Mau coba terapkan di blog ah.. ^_^

  • Yusril Ibnu Maulana

    klo pakai konsep ini gimana ? http://www.dte.web.id/2013/01/konsep-auto-read-more-dengan-bantuan.html
    bakal bermasalah gak ?
    Thanks before...

  • Unknown

    tapi kenapa kalau elementnya saya beri float dan width blog paggernya jadi ilang...
    misalnya..
    .jdlmore { width:100%; float:left; position:relative }
    saya buatkan custom element untuk posting yg tampil hanya judul saja..
    kalau kodenya seperti diatas atau width:50% blog pagernya ilang....
    tapi kalau kodenya seperti ini normal" saja...
    .jdlmore { position:relative }
    bingung :p kemanakah blogpagernya... ??

    • IRIL SAGITA

      Di blog aku kasusnya sama, blog pagernya jadi ilang setelah di klik.

      Masih nunggu dari jawaban dari sang master nih....?

  • Unknown

    Mas Bila Tulisan Memuat DI beri gambar efek animasi Load Bagaimana ya mas ?

    • Taufik Nurrohman

      // ...
      $(this).replaceWith('<img src="animasi-loading.gif" alt="Loading...">');
      • Unknown

        Trimakasih mas.. :)

  • Kang Ismet

    Untuk mencari artikel biasanya menggunakan 'posting lama' atau page navigation 'abu farhan'. Kalau dengan script ini, apa tidak mengurangi page view?

  • Anonim

    kenapa yah, kalo script ini di gabungin sama masonry malah jadi berantakan, posisi posting2 nya ketumpuk.

    • Taufik Nurrohman

      Picu method reload setiap kali item posting baru berhasil termuat pada plugin Masonry yang lama:

      (function($) {
      var $pager = $('#blog-pager'),
      $posts = $('.blog-posts');
      $pager.find('#blog-pager-newer-link').remove(); // Menyingkirkan navigasi posting lebih baru
      // Inisiasi
      $posts.masonry({
      itemSelector: '.post'
      });
      $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
      $posts.masonry("reload"); // Picu method `reload` di sini!
      }, "html");
      $(this).replaceWith('<span>Memuat...</span>'); // Ubah navigasi posting menjadi indikator memuat saat sedang memuat
      return false;
      });
      })(jQuery);

      Sekarang plugin Masonry sudah sangat berkembang. Sepertinya method tersebut sudah berganti menjadi reloadItemsreloadItems

  • no data

    keren om taufik saya salute :D
    - salam damai -

  • Kang Ismet

    bisa diaplikasikan ke komentar yang lebih dari 200 ga mas?

  • you

    berhasil ni

  • Wahedos

    Mas taufik mau tanya nih, dari kemarin saya coba tapi kok gagal terus, memuatnya udah keluar tapi kok, malah ke alihkan ke gambar salah satu post ya?

    • Taufik Nurrohman

      Kealihkan bagaimana maksudnya?

      • Wahedos

        Bisa langsung di lihat mas.
        wahid-awelution.blogspot.com

        • Taufik Nurrohman

          Dari kode gambarnya keluar kelas postthumb seperti ini:

          <img src=" … " class="postthumb" width="370" height="200" alt="Penggumuman Award" title="Penggumuman Award">

          Kemungkinan besar masalahnya ada di JavaScript auto-readmore, terutama pada bagian createSummary(). Mungkin bisa dicoba dihapus bagian itu (jangan lupa di-backup dulu). Cuma itu saja yang bsia Saya pahami.

  • Rully Ardiansyah

    kenapa ya mas kok di blog saya tidak ada efeknya sama sekali :(
    disini -> kaktusense.blogspot.com

    mohon solusinya mas

  • Ismail Sossé Alaoui

    Hi, admin
    i implement this great script on my template : http://testblog4real.blogspot.com/ but there is some problem that i see duplicate posts etc, can you please help me to fix this errors ?

    • Taufik Nurrohman

      What will happen if you open the blog pager by right-clicking the link and open it in the new tab? Are there any duplicate posts showed? If so then that’s a Blogger problem. The code above will check whether the page is end or not only by checking the .post length.

  • Unknown

    mas mau tanya, saya gabungin plugin istope tpi pas keload kok gak ngefek ya??

    Ajax Navigasi halaman
    (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
    $(".blog-posts").isotope({filter: '*',itemSelector: '.post'});
    }, "html");
    $(this).replaceWith('<span>Memuat...</span>'); // Ubah navigasi posting menjadi indikator memuat saat sedang memuat
    return false;
    });
    })(jQuery);

    ISOTOPE
    $(window).load(function(){
    var $container = $('.blog-posts');
    $container.isotope({
    filter: '*',
    animationOptions: {
    duration: 750,
    easing: 'linear',
    queue: false
    }
    });


    <script src='http://isotope.metafizzy.co/js/isotope-docs.min.js'/>

    • Taufik Nurrohman

      $(".blog-posts").isotope("layout");

      atau

      $(".blog-posts").isotope("reloadItems");
  • Ismail Sossé Alaoui

    Hi admin, how are you?
    Thanks a lot for this important post.
    Can you please show us how to implement Masonry effect for this script.
    thanks

  • Fariz

    mas mau tanya, bagaimana cara menambah Script

    Tampilan Posting Berbeda-Beda Berdasarkan Label

    <i rel="pre">&lt;i rel="pre"&gt;
    $('._post').each(function() {
    if ($(this).find('._post-labels a:contains(Coba)').length) {
    $(this).addClass('red');
    } else if ($(this).find('._post-labels a:contains(Baka)').length) {
    $(this).addClass('green');
    } else if ($(this).find('._post-labels a:contains(Bakemono)').length) {
    $(this).addClass('blue');
    } else if ($(this).find('._post-labels a:contains(Mendokuso)').length) {
    $(this).addClass('orange');
    }
    });&lt;/i&gt;</i>

    Kedalam kode XML AJAX pada Navigasi Halaman ?

    • Taufik Nurrohman

      Bisanya tinggal dimasukkan saja ke dalam event load. Tapi sekarang Blogger sudah punya ekspresi lambda dan operator b:switch, jadi kita bisa membuat efek ini tanpa JavaScript.

  • MasOes

    Mas Taufik murah banget sama ilmu, sulit cari org seperti Mas Taufik mau menjabarkan ilmu secara detail... thanks Mas

  • Aryo

    mas kok gak bisa mas?? mohon bantuanya.. bingung sama id element postnya
    https://mediapamungkas.blogspot.co.id/

  • Unknown

    mas kalo cara suupaya memuat... nya di tengah gimana ya mas?
    soalnya di blog ane memuat... nya di sebelah kanan
    mohon bantunnya

  • Namina Kiky

    Kalau tema yang menggunakan script auto readmore jd error ya

  • Ayas Yaza

    var source = $(data).find('.post').length ? $(data) : $('<div></div>');

    mas taufik, bagaiamana caranya kalau pada gulungan terahir dan sudah tidak ada posting selanjutnya layar tidak menampilkan halaman kosong dan berhenti dihalaman terahir? terimaksih sebelumnya.

    • Taufik Nurrohman

      Maksudnya bagaimana ya? Mungkin bisa dicoba seperti ini:

      if ($(data).find('.post').length) {
      var source = $(data);
      } else {
      alert('Halaman habis!');
      return;
      }
  • John

    Menerapkannya pada posting blog gimana ya? Jadi ketika judul diklik itu pakai ajax.
    Saya coba pakai kode ini gak bisa <script> $('#post-outer').on("click", ".post-title entry-title", function() { $.get(this.href, {}, function(data) { // Proses... }, "html"); return false; });</script>

    • Taufik Nurrohman

      <script>
      $('#post-outer').on("click", ".post-title a, .entry-title a", function() {
      $.get(this.href, {}, function(data) {
      var html = $(data).find('.post-body').html();
      // alert(html);
      $(this).closest('.post').find('.post-body').html(html);
      }, "html");
      return false;
      });
      </script>
  • Dekraken ID

    halo mas taufik, saya sedang dalam proses belajar membuat template blogger, yang ingin saya tanyakan tentang infinite load ini, saya sudah terapkan dan berjalan dengan lancar, tapi ada 1 kendala yang bikin otak saya buntu, saya menerapkan postviews counter dan timestamp custom seperti youtube,
    ex: 200 views • 26 days ago

    nah permasalahannya, setelah page berhasil diload, postviews dan timestampnya tidak berfungsi, menjadi seperti ini,
    views • July 01, 2018

    menurut mas script apa yg harus ditambahkan?
    ini url blog saya, bisa mas cek.

    sebelumnya terima kasih banyak mas.

    • Taufik Nurrohman

      Kasusmu sebenarnya sama dengan ini mas.

      • Dekraken ID

        udah saya coba masih tidak muncul mas,postnya sih muncul, hanya jumlah views dan format tanggalnya yg tidak berubah, udah saya coba juga tempel script mansory, hasilnya sama aja, malah tampilan grid berantakan

Komentar telah ditutup.