Anda mungkin telah melihat penerapan infinite scrolling di Facebook, Twitter, atau Google+ kita dapat memuat posting secara dinamis setiap ...
Anda mungkin telah melihat penerapan infinite scrolling di Facebook, Twitter, atau Google+ kita dapat memuat posting secara dinamis setiap kali tombol "Load more posts" diklik, atau dengan scroll ke bawah halaman. Tutorial ini akan menunjukkan kepada Anda bagaimana menerapkan script loading berbasis Ajax yang akan menambahkan Load More Posts atau Infinite Scrolling ke Blogger, sehingga pengunjung dapat dengan mudah menavigasi tanpa memuat ulang halaman.
Anda memiliki pilihan untuk menambahkan tombol 'Load More Posts' atau memuat posting lama secara otomatis saat pengunjung Mengscroll ke bawah halaman.
Setelah diimplementasikan, Load More Posts / Infinite Scrolling berlaku untuk semua posting Blogger pada halaman indeks (homepage, arsip, halaman label). Itu tidak bisa ditambahkan pada masing-masing posting.
Untuk melihatnya secara langsung, lihat demo di bawah ini. Saat Anda menggulir ke bawah ke bagian bawah halaman, Anda akan melihat tombol "Load More Posts". Setelah Anda mengkliknya, 3 posting berikutnya yang akan ditampilkan akan dimuat di bawah ini.
Cara Menambahkan Load More Posts atau Infinite Scrolling ke Blogger
1. Masuk ke akun blogger Anda dan klik di blog Anda di mana Anda ingin menambahkannya.
2. Masuk ke 'Theme' dan klik tombol 'Edit HTML' untuk membuka editor Template> klik di manapun di area kode dan tekan tombol CTRL + F (atau Command + F) untuk membuka kotak pencarian.
3. Ketik tag di bawah ini di kotak pencarian dan tekan ENTER untuk menemukannya:
4. Just above the </body> tag, add the script below:
Jika Anda ingin memuat posting dengan tombol 'Load More Posts' seperti di blog demo, tambahkan skrip ini:
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,n){for(var t=document.getElementById(e).getElementsByTagName("img"),a=0;a<t.length;a++)t[a].src=t[a].src.replace(/\/s72\-c/,"/s"+n+"-c")}window.labelfx=function(){var e=function(e){var n=e||{},t=n.url_blog||window.location.host,a=n.id_labelcontent||"#labelfxn";$.ajax({url:"http://"+t+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var n=e.feed.category,t="";if(void 0!==n){t="<ul class='labelx'>";for(var i=0;i<n.length;i++)t+='<li><a href="/search/label/'+encodeURIComponent(n[i].term)+'" target="_blank">'+n[i].term+"</a></li>";t+="</ul>",$(a).html(t)}else $(a).html("<span>No Label!</span>")},error:function(){$(a).html("<strong>Error Loading Feed!</strong>")}})};return function(n){e(n)}}(),resizeThumb("main",250),labelfx(),function(e){function n(n){e.getScript("http://"+n+".disqus.com/blogger_index.js")}function t(){s||(s=!0,o?(r.find("a").hide(),r.find("img").show(),e.ajax(o,{dataType:"html"}).done(function(t){var a=e("<div></div>").append(t.replace(l,"")),i=a.find("a.blog-pager-older-link");i?o=i.attr("href"):(o="",r.hide());var p=a.find(d).children(".date-outer");e(d).append(p),resizeThumb("main",250),window._gaq&&window._gaq.push(["_trackPageview",o]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&n(window.disqus_shortname),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(),r.find("img").hide(),r.find("a").show(),s=!1})):r.hide())}function a(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(o=e("a.blog-pager-older-link").attr("href"))){var n=e('<a class="loadpost" href="javascript:;" style="text-decoration:none;font:11px Open Sans, sans-serif;letter-spacing:1px;padding:10px 20px;background:#000000;color:#ffffff;">LOAD MORE POSTS</a>');n.click(t);var a=e('<img src="'+i+'" style="display: none;">');(r=e('<div style="display:block;text-align:center;margin:20px auto;"></div>')).append(n),r.append(a),r.insertBefore(e("#blog-pager")),e("#blog-pager").hide()}}var i="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOHcc8v9-TmhZqZERhC90X2CDEN4hb3vgPfA6o_mKet5oNL4_hhGAgD_tEfJLQWjRJDpQPSo6oxaTCmZ3g2O8YKJ_sMH1Eq5mwRSe83i0ccj40OCESgvnWzt1y5twhfw75tsNdcdP9rGAH/s1600/loader.gif",o="",r=null,d="div.blog-posts",s=!1,l=(e(window),e(document),/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi);e(document).ready(a)}(jQuery);
//]]>
</script>
</b:if></b:if>
Jika Anda ingin menambahkan scrolling tanpa batas tanpa tombol, tempelkan ini sebagai gantinya:
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'>
<style type="text/css">.status-msg-wrap{display:none;}</style>
<script type='text/javascript'>
//<![CDATA[
!function(i){function e(e){i.getScript("http://"+e+".disqus.com/blogger_index.js")}function t(){g||(g=!0,r?(w.find("a").hide(),w.find("img").show(),i.ajax(r,{dataType:"html"}).done(function(t){var n=i("<div></div>").append(t.replace(c,"")),o=n.find("a.blog-pager-older-link"),d=n.find(s).children();i(s).append(d),window._gaq&&window._gaq.push(["_trackPageview",r]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&e(window.disqus_shortname),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(),o?r=o.attr("href"):(r="",w.hide()),w.find("img").hide(),w.find("a").show(),g=!1})):w.hide())}function n(){return Math.max(p.height(),l.height(),document.documentElement.clientHeight)}function o(){n()-(p.scrollTop()+p.height())<150&&t()}function d(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(r=i("a.blog-pager-older-link").attr("href"))){var e=i('<a href="javascript:;">Load more posts</a>');e.click(t);var n=i('<img src="'+a+'" style="display: none;">');p.scroll(o),(w=i('<div style="text-align: center; font-size: 150%;"></div>')).append(e),w.append(n),w.insertBefore(i("#blog-pager")),i("#blog-pager").hide()}}var a="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOHcc8v9-TmhZqZERhC90X2CDEN4hb3vgPfA6o_mKet5oNL4_hhGAgD_tEfJLQWjRJDpQPSo6oxaTCmZ3g2O8YKJ_sMH1Eq5mwRSe83i0ccj40OCESgvnWzt1y5twhfw75tsNdcdP9rGAH/s1600/loader.gif",r="",w=null,s="div.blog-posts",g=!1,p=i(window),l=i(document),c=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;i(document).ready(d)}(jQuery);
//]]>
</script>
</b:if></b:if>
Itu dia! Jadi begitulah cara kita bisa dengan mudah menambahkan Load More Posts / Infinite Scrolling ke Blogger. Mulai sekarang, pengunjung kami dapat tinggal di halaman yang sama dan menavigasi jumlah posting yang tak terbatas dengan cepat!
COMMENTS