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.
Labels: Blogger, Desain, JavaScript, jQuery, Menengah
60 Comments:
Wah!!! Terima kasih!!!! Bisa bekerja :D
terima kasih mas, ini yang saya tunggu, langsung dipasang di blog saya \o/
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.
ini mas contoh blog nya --> http://www.hsp21.com
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;
});
Mantapp mas taufik, terima kasih banget. Maklum saya belum terlalu memahami js/jquery/ajax, hehe
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..??
kereeeeennn :-bd
does not work
the script is not formatted for bloger template
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.
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.. :)
var source = $(data).children().length ? $(data) : $('<div></div>');
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..
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>
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.. :)
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 ^_^
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).
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 ??
Makasih mas taufik sudah berhasil..
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... :)
berhasil. Tapi kok thumbnailnya jadi kecil yaa?
saya juga masang memperbesar thumbnail posting
/2012/07/memperbesar-thumbnail-posting.html
ada solusi mas? =p*
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,,
oke ,
mudeng, bisa di coba :Q
ijin Nyoba
Aqb Blog
Cukup sederhana juga caranya! Mau coba terapkan di blog ah.. ^_^
klo pakai konsep ini gimana ? http://www.dte.web.id/2013/01/konsep-auto-read-more-dengan-bantuan.html
bakal bermasalah gak ?
Thanks before...
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... ??
Mas Bila Tulisan Memuat DI beri gambar efek animasi Load Bagaimana ya mas ?
// ...
$(this).replaceWith('<img src="animasi-loading.gif" alt="Loading...">');
Untuk mencari artikel biasanya menggunakan 'posting lama' atau page navigation 'abu farhan'. Kalau dengan script ini, apa tidak mengurangi page view?
Trimakasih mas.. :)
kenapa yah, kalo script ini di gabungin sama masonry malah jadi berantakan, posisi posting2 nya ketumpuk.
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 reloadItems ⇒ reloadItems
keren om taufik saya salute :D
- salam damai -
bisa diaplikasikan ke komentar yang lebih dari 200 ga mas?
berhasil ni
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?
Kealihkan bagaimana maksudnya?
Bisa langsung di lihat mas.
wahid-awelution.blogspot.com
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.
kenapa ya mas kok di blog saya tidak ada efeknya sama sekali :(
disini -> kaktusense.blogspot.com
mohon solusinya mas
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 ?
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.
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'/>
$(".blog-posts").isotope("layout");
atau
$(".blog-posts").isotope("reloadItems");
Di blog aku kasusnya sama, blog pagernya jadi ilang setelah di klik.
Masih nunggu dari jawaban dari sang master nih....?
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
mas mau tanya, bagaimana cara menambah Script
[url=http://www.dte.web.id/2012/04/different-posts-style-based-on-label.html]Tampilan Posting Berbeda-Beda Berdasarkan Label[/url]
<i rel="pre"><i rel="pre">
$('._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');
}
});</i></i>
Kedalam kode XML AJAX pada Navigasi Halaman ?
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.
Mas Taufik murah banget sama ilmu, sulit cari org seperti Mas Taufik mau menjabarkan ilmu secara detail... thanks Mas
Sama-sama :)
mas kok gak bisa mas?? mohon bantuanya.. bingung sama id element postnya
https://mediapamungkas.blogspot.co.id/
mas kalo cara suupaya memuat... nya di tengah gimana ya mas?
soalnya di blog ane memuat... nya di sebelah kanan
mohon bantunnya
Kalau tema yang menggunakan script auto readmore jd error ya
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.
Maksudnya bagaimana ya? Mungkin bisa dicoba seperti ini:
if ($(data).find('.post').length) {
var source = $(data);
} else {
alert('Halaman habis!');
return;
}
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>
<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>
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=//dekrakenid.blogspot.com/]url[/url] blog saya, bisa mas cek.
[img]https://2.bp.blogspot.com/-3tazxLAOk4A/XAmrViVp9cI/AAAAAAAAAZY/8bjzARNiOEsYaR6TzT4-uCKKooDZvqDRwCLcBGAs/s1600/why.jpg[/img]
sebelumnya terima kasih banyak mas.
Kasusmu sebenarnya sama dengan ini mas.
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
Post a Comment
<< Home