Menerapkan Fitur Infinite Scroll Sederhana pada Blogger

matur nuhun.. :'D

:)

Keren lah :-bd
Bisa buat memfungsikan widget lain nih

Bagus mas, sudah saya terapkan untuk tampilan mobile mas.
Mas tovic, bisa bantu gak untuk tampilan mobile saya di blog, itu imagenya pecah gitu mas.

Dia misalnya menggunakan gambar berikut :

Yang dtampilkan malah gambar berikut mas, dengan hasil yang terbilang kecil :

Blog saya : IwanBerbagi

Mohon bantuannya mas, terima kasih. :)

gan kok saya coba terapkan tumbnails post nggk ikut reload ya ? yg ada malah blank tumbnail postingan ndk ikut ke refresh mohon pencerahannya suhu :'(

Mas di blog saya kok gak aktif ya...??

Kok gak work ya?

Kalau ditambah Masonry gimana ?

Kok ngg bisa mas... duhhhh berantakan malah

Terima kasih gan, mantap banget dah :"D

Keren banget gan.. cocok nih buat (contohnya) blog Berita.

Wah saya baru tau ada Blogspot sekeren ini. Duh telat banget yak.

Templatenya kereeenn bangettttt. Ringan pula.

Maaf komennya nggak relevan. Nggak tahan pengen bilang keren soalnya :)

Keren bang :-bd
tapi setelah diterapkan, ada sedikit yang kurang,
URL di browser gak berubah setelah artikel berpindah ke artikel dibawahnya (saat kena scroll).

mudah-mudahan kedepan ada solusinya

Suwun bro. Lanjutkan :D

Gan INFINITE SCROLL Di atas Mirip Dengan Punya Instagram Bukan ?? Makasih

http://kerensive.blogspot.com/search/label/Health?&max-results=7

Kalau sudah batas akhir kenapa nggak mau nampil 'ALL POST SHOW'?

kok sewaktu meload satu post terakhir gk bisa ya gan?

ehh udah bisa deh gan ternyata karena setting jumlah post :D

Saya pilih opsi 0: pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya. Tapi postingan otomatis keluar dengan sendirinya ketika di-scroll sampai akhir batas halaman.

Postingan home saya set 6 buah, ketika di-scroll langsung muncul 12 buah. Tapi setelah itu kembali normal. Tombol "Muat Lagi" tetap muncul, dan setiap di-klik postingan muncul 6 buah. Jadi yang error hanya proses pertama saja.

Solusinya gan post baru diload yang nongol malah data.post.body bukan snippetnya

punya saya saat discroll gambar tidak ikut diload jadi blank, masalahnya dimana yah mas?

solved mas, ternyata kesalah ambil thumbnail dari js heeh

izin pakai plugin ini mas, terimakasih

saya menggunakan sistem komentar facebook, perlu menambahkan kode ini untuk memanggil fb.comment pada posting yang baru muncul setelah proses load.

infinite_scroll.on('load', function() {
FB.XFBML.parse();
});

masalahnya FB.XFBML.parse bahkan mengurai kembali fb.comment dari awal halaman, dari posting paling atas sampai paling bawah halaman berulangkali setiap proses load. apa mas taufik punya solusi supaya setelah proses load halaman selanjutnya FB.XFBML.parse hanya mengeksekusi fb.comment pada posting yang baru muncul saja dan tidak mengurai kembali fb.comment lain yang sudah ada di setiap posting di halaman yang sudah termuat?

Mohon maaf pak, saya lagi bingung karena habis belajar edit template evo magz pro setelah selesai perubahan, tiba-tiba komentarnya jadi muncul angka di samping photo avatar dan ada tulisan load more...dibawah kotak komentar. sudah nyari tapi gak nemu-nemu juga. kalau berkenan mohon bantuannya.

terimakasih dan mohon maaf kalau komentar saya tidak sesuai dengan topik pembahasan.

sama kaya yang di atas gan, saya pake disqus yang tampil on.clcik, saya ambil dari sini setelah memuat halaman selanjutnya, disqusnya ga tampil setelah di klik. tapi untuk halaman yang muncul pertama bias muncul. solusunya gimana ya? makasih sebelumnya gan

<a class='showDisqus' href="javascript:void(0);" expr:data-id='data:post.id' expr:data-title='data:post.title' expr:data-url='data:post.canonicalUrl'>Komentar</a>

sayakan pake caraousel, setiap kali dimuat, ada tambahan elemen <span class="fi" id="fi:0"/>.
jadinya dia ikut ke caraousel...
cara ngilangin span itu gimana ya mas... atau memasukkannya kedalam blog-pager
saya udah tambahin gini tapi ga bisa juga

infinite_scroll.on("load", function() {
$(".fi").remove();
});

begini dia

kang, gimana cara mengakali load yang di slide ke samping? post hanya memuat saat di scroll ke bawah, gimana supaya bisa memuat saat slide ke samping?

gimana cara buat script ini biar di load saat pengunjung men-scrool laman, kaya lazyload adsense gitu atau di muat setelah loading blog selesai. soal nya kalo pengunjung langsung scrool kebawah, langsung nge load 2 halaman.

Agar pas postingan home saya set 8 buah, ketika di-scroll langsung muncul 16 buah. Tapi setelah itu kembali normal. Tombol "Muat Lagi" tetap muncul, dan setiap di-klik postingan muncul 8 buah. Jadi yang error hanya proses pertama saja.

Mas Taufik, type infinite-scroll bisa dibuat conditional ga?
misalnya

if(a) {
// InfiniteScroll type 0
}else{
// InfiniteScroll type 1
}

makasih sebelumnya

kang, lazy load with interception observer gak bekerja saat button load more ditekan. gimana cara mengatasinya kang?

terima kasih kang, udah work. saya buat jadi seperti ini:
infinite_scroll.on('load', lazyLoad=function() {...});
lazyLoad();

terima kasih banyak kang, telah meluangkan waktunya;

Salam. Jika ingin memanggil hook di bawah ini, kodenya ditaruh mana ya, Gan? Terima kasih.

infinite_scroll.on('load', function() { ... });

kang, ijin tanya. saya punya sebuah function infinite scroll seperti ini.

//Function Infinite Scroll
function LoadMore(){$("#blog-pager").click((function(event){event.preventDefault(),$("#blog-pager a").html("Loading...");var link=$("#Blog1_blog-pager-older-link").attr("href");$.get(link,(function(data){var source=$(data).find(".blog-posts").length?$(data):$("<div></div>");$(".blog-posts").append(source.find(".blog-posts").html()),$("#blog-pager").html(source.find("#Blog1_blog-pager-older-link").clone()),initialLink()}),"html")}))}LoadMore();

saya gabungin dengan observer image. saat di load, observer image dari hasil memuat infinite scroll dengan kode tersebut tidak bekerja. saya ingat kode yg saya dapat dari penjelasan infinite scroll kang taufiq.

//Kode ini
// Picu di muat berikutnya
infinite_scroll.on('load', function lazyLoad() { … });
// Picu di awal muat
lazyLoad();


cara membuat variable infinite_scroll dari sebuah function diatas gimana ya kang?

saat saya ubah function tersebut menjadi seperti variable infinite_scroll, error hasil yang saya dapat. mohon bantuannya kang. plisss

Berikut ini cara menerapkan fitur infinite scroll pada beberapa bagian sekaligus.

<div class="blog-posts" id="audio-posts">
  <article class="post"> … </article>
  …
  <nav class="blog-pager" id="audio-pager">
    <a class="blog-pager-newer-link" id="audio-pager-newer-link"> … </a>
    <a class="blog-pager-older-link" id="audio-pager-newer-link"> … </a>
  </nav>
</div>

<div class="blog-posts" id="story-posts">
  <article class="post"> … </article>
  …
  <nav class="blog-pager" id="story-pager">
    <a class="blog-pager-newer-link" id="story-pager-newer-link"> … </a>
    <a class="blog-pager-older-link" id="story-pager-newer-link"> … </a>
  </nav>
</div>

<div class="blog-posts" id="video-posts">
  <article class="post"> … </article>
  …
  <nav class="blog-pager" id="video-pager">
    <a class="blog-pager-newer-link" id="video-pager-newer-link"> … </a>
    <a class="blog-pager-older-link" id="video-pager-newer-link"> … </a>
  </nav>
</div>

const audioInfiniteScroll = new InfiniteScroll({
    target: {
        posts: '#audio-posts',
        post: '#audio-posts > .post',
        anchors: '#audio-pager',
        anchor: '#audio-pager-older-link'
    }
});

const storyInfiniteScroll = new InfiniteScroll({
    target: {
        posts: '#story-posts',
        post: '#story-posts > .post',
        anchors: '#story-pager',
        anchor: '#story-pager-older-link'
    }
});


const videoInfiniteScroll = new InfiniteScroll({
    target: {
        posts: '#video-posts',
        post: '#video-posts > .post',
        anchors: '#video-pager',
        anchor: '#video-pager-older-link'
    }
});