Cara Membuat Auto Load More On Page Scroll - Pada kesempatan kali ini admin lagi-lagi memberikan sebuah tutorial bagi para blogger, yang ingin memperindah tampilan post pada homepage. Tutorial ini akan membuat simple user interface blog kalian dengan tidak memberikan navigation number page dibagian bawah postingan halaman awal.
Tutorial kali ini menggunakan JQuery dan Ajax untuk memberikan efek dan tampilan yang sempurna. Kalian bisa mengikuti tutorial ini dengan mudah, hanya dengan menempelkan beberapa script dari tutorial yang akan saya berikan.
Biasanya kita melihat postingan lama kita navigasi menggunakan older post, yang ketika di klik navigasi tersebut akan muncul tampilan posting baru lagi. Jika kalian menggunakan Auto Load More ini, tidak perlu melakukan aktifitas klik untuk melihat older post, cukup dengan melakukan scroll kebawah, maka postingan terdahulu akan muncul secara otomatis.
Bagi kalian yang tertarik ingin memasangnya, silahkan ikuti tutorial dibawah ini dan jangan lewatkan tahap-tahapnya sedikitpun agar tidak ada kesalahan.
Cara Membuat Auto Load More On Page Scroll
1. Masuk ke akun Blogger kalian terlebih dahulu.
2. Setelah masuk dasboard, lanjutkan menuju Template > Edit HTML
3. Cari kode </body> untuk memudahkan gunakan tombol pintasan CTRL + F, lalu letakkan script dibawah ini, dan letakkan diatas </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=/<scriptb[^<]*(?:(?!</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/AVvXsEislCWzkOf_gRNSv0pEgKL0ieAiRvvznXNDo8B7mwsvaAR1P-V4TcOyhHYJLCsfJroyFPj5S2z0AtWgAhzIiH8nzdUGvH4yTKrKhjXSsFIn_FEiAexYnNoDvxlMdKZFI8Rs8vFXjQEwRxyR/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>4. Simpan Template, dan lihat hasilnya.
Tidak Berhasil?
Ada kemungkinan kalian belum memasang JQuery pada template yang kalian gunakan, jika tidak terpasang JQuery maka Auto Load More ini tidak akan bekerja. Silahkan pasang kode pemanggil JQuery dibawah ini sebelum kode </head>
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>Semoga berhasil diterapkan pada template yang sedang kalian gunakan saat ini, jika ada pertanyaan silahkan ajukan melalui kolom komentar dibawah artikel ini.
Sekian artikel dari Cara Membuat Auto Load More On Page Scroll, semoga bermanfaat bagi kalian semua.
Terima Kasih
