Membuat Navigasi Halaman AJAX pada Blogger
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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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:

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: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:
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
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:
Kalau dijabarkan akan menjadi seperti ini:
Saya lihat pada markup template blogmu cuma ada elemen
.content_bottom
dengan beberapa tautan tanpa atribut kelas atau ID apapun:Padahal versi standar markup daftar posting adalah seperti ini:
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
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:Sekarang plugin Masonry sudah sangat berkembang. Sepertinya method tersebut sudah berganti menjadi
reloadItems
⇒ reloadItemsno 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:
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
atau
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
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 operatorb: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
Taufik Nurrohman
Sama-sama :)
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
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:
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
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