Mecha versi 2.6.4 sudah dirilis!

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

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.