Cara membuat load more post saat di scroll

membuat load more post 

adalah trik menampilkan lebih banyak posting di satu halaman saja atau homepage blog anda. dan bagusnya load more post ini tidak usah mengeklik untuk menampilkan lebih banyak posting.

anda hanya mengggunakan tombol scroll yang anda di mouse anda dan secara otomatis akan menamilkan postingan post anda lebih banyak hanya di satu halaman !!!

bagi yang berminat silahkan mengikuti tutorialnya..!



1. login ke blog anda dan masuk ke template dan tekan EDIT HTML
copy kode 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=/<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/AVvXsEhtERtznCn8qMbCCq3CgceGMDMtfL-eYQZ5yDPaytGTIOSM25aVz5Gx2GRXfIC7I-GaWs595QSlLRiBRyYKKhzZuVNsvUeYwIzQgupFUxNQ7Kx_sRSYcLrOsx9S5HR5lZnsDty9eoeu3Du5/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>


2.setelah itu simpan dan lihat hasilnya

Jika tidak berhasil..

fitur ini tidak akan berjalan jika template anda belum menggunakan jQuery yang satu ini..

1.letakkan kode dibawah ini tepat diatas kode </head>

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

_________________________________________________________________TIPS LAIN_________________________________________________________________

Saat kita membuka sebuah blog pastinya kita ingin membuka semua postingan kan ? Nah jumlah semua post dengan post yang di tampilkan dalam satu halaman pun berbeda-beda pada setiap blog. Saat kita membuka postingan selanjutkan kita pasti akan menunggu waktu saat kita membuka post selanjutnya. Nah untuk cara simpelnya pada post kali ini saya akan share tips blogger yaitu "Membuat Load More Otomatis Saat Crolling Ke Bawah" Maksudnya pa sih gini. Maksudnya Jika sobat mengarahkan halaman ke bawah makan secara otomatis me reload tempat post selanjutnya tampa harus more load semua halaman. 

Untuk sekedar liat tes nya silahkan klik DEMO INI

Sekarang saya akan berikan tipsnya :

1. Masuk menu blogger > Tempelate > Lalu pilih Edit HTML.

2. Silahkan cari kode </head>

3. Silahkan copi kode di bawah ini sebelum kode </head>

<b:if cond='data:blog.pageType == "index"'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='https://googledrive.com/host/0Bxsq9VDr3zyFMjNlYjhNeWlza1U' type='text/javascript'/>
<script type='text/javascript'>
jQuery.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpF306vH8ICKHbp7kswSPdXATJI80GulHn6lcDbJWT3ST-wqtJhJRWAAiwavp7qmEwEOYxepQbzluS6bKEX2LaJ4ZK2JoAeDA3Knej4vFGtjimDT8xXaBN0Ur2-jDU1k3k3BuPCaGsMBvz/s1600/wgloading.gif'
});
  </script>
</b:if>

4. Sekarang Save Tempelate. Nah liat hasilnya !!! Nah terimakasih sudah berkunjung. Silahkan tinggalkan komentar sobat....

jika anda memiliki pertanyaan lagi silahkan berkomentar di kolom comment