Cara Pasang Load More: Mengganti Next Post dengan Infinite Scroll di Blogger

Baca Juga

Tips desain blog kali ini mirip cara mengganti "Older Post" di halaman depan atau halaman indeks blog dengan navigasi nomor halaman atau angka.

Demonya ada di homepage blog ini. Sebelum bagian footer, di bawah postingan terakhir, ada tulisan "Load more" (tampilkan postingan lainnya).

Di template bawaan blogger, biasanya berupa link Next Post, lalu di halaman berikutnya ada Next Post, Home, dan Previous Post.

Nah, kita ganti dengan "Load more" yang dikenal dengan sebutan "infinite scroll". Jadi, pengunjung hanya perlu klik load more untuk melihat postingan atau artikel lainnya.

Cara Pasang Load More

1. Klik Theme > Edit HTML

2. Copas Kode Load More berikut ini 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/AVvXsEgWioY0xEDPoHYcjxWZu2UhjMyJviNe5BZMR43APxMmXHLUJdZK17iBXuhogVHFovXOhSrrz66a4WHWiUTh0uVQ7uDRNfJhgsF8mJS9Hh7pylWniqGFOaVCwVWnIilw2Fuv906Iv3_MzF7-/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>

Pastikan ada link ke kode jQuery seperti ini:

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>

Jika belum ada, pasang di atas kode load more tadi.

Simpan!

Itu dia Cara Pasang Load More: Mengganti Next Post dengan Infinite Scroll di Blogger. Good luck and Happy Blogging!