Membuat Load More Otomatis Saat di Scroll

Membuat Load More Otomatis Saat di Scroll – Trik ini menampilkan postingan lebih banyak di blog. Jika biasanya melihat postingan lama kita menggunakan navigasi older post, yang ketika kita klik navigasi itu akan terbuka tampilan baru lagi, maka dengan load more otomatis ini tidak perlu melakukan klik, cukup dengan melakukan scroll ke bawah maka postingan terdahulu akan tampil secara otomatis.
Membuat Load More Otomatis Saat di Scroll

Bagi anda yang tertarik memasang trik ini di template bloggernya, silahkan ikuti caranya di bawah ini.

Cara Membuat Load More Otomatis Saat Blog di Scroll

Setelah login ke blog, kopi kode di bawah ini dan letakkan di atas kode </body>.
<script type='text/javascript'>
//<![CDATA[
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();150>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=a('<a href="javascript:;">Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJKpb9RFTNL58UioOO6WWoXR78ow4jxhzxkbLwP4sWerPJAC8BrxT2fyd2Mj0zGqo8P3iEbm1pHWxROW6Rkioz-Xz4pLmL08aANrtJ19tyxVLtxeaSVd4T6A0s7TqAjRUFrJBoCcbHbom/s32/ajax-loader.gif" style="display: none;">');f.scroll(k);b=a('<div style="text-align: center; font-size: 150%;"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
//]]>
</script>
Setelah itu, simpan template dan lihat hasilnya.

Tidak Berhasil?

Trik ini tidak akan berjalan jika di template anda belum terpasang kode pemanggil jQuery yang seperti ini.
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
Letakkan kode di atas tepat di atas </head> kemudian klik Simpan Template.
Semoga berhasil.

2 komentar

  1. Profil:https://draft.blogger.com/profile/18190146306184501826
    saat pasang, load post di beranda, jadi full artikel mas, gimana agar fungsi readmorenya tetap bekerja? trims.
  2. Profil:https://draft.blogger.com/profile/18220516487128887684
    terimakasih banyak Gan sangat bermanfaat banget Tutorialnya sukses terus ya gan.... Ini artikel yang saya cari cari dan mau saya terapin di blog saya. . .

    Tapi kira kira berat gak Gan, soalnya blog saya sudah cukup berat skrng ini ya kutang lebih 120kb an lah...
  • Gunakan fitur Format Kode untuk menulis atau menyisipkan kode dan gambar dengan format tertentu.
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi via Email ketika ada balasan.
  • Apabila ada pertanyaan diluar artikel silahkan buat topik baru di .
  • Untuk menyisipkan gambar, silahkan upload gambar terlebih dahulu. Lalu salin URL Gambar tersebut, paste ke kolom di bawah ini, lalu klik tombol Image.
  • Untuk menyisipkan Potongan Kode, atau Quote, paste kode tersebut ke kolom di bawah ini, lalu klik tombol pre, code, atau quote.
  • Untuk menulis kode dalam Syntax Highlighter gunakan format kode panjang.
  • Setelah itu, salin atau copy hasil parse dengan klik tombol icon Salin Kode! lalu paste ke kolom komentar.

image quote pre code