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.

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.