Tutorial Mengganti Older Post Menjadi Load More Di Blog

Zona Internetku No Comment September 24, 2018

Tutorial Atau Cara Untuk Mengganti Older Post Menjadi Load More Di Blogger. Pada postingan sebelumnya saya sudah menjelaskan apa itu Older Post dan juga Newer Post di artikel yang berjudul Cara Mengganti Older Dan Newer Post Menjadi Numbered Navigation Pada Blog. Untuk yang tidak ingin beranjak dari halaman ini, saya akan menjelaskannya.
Older Post berarti tombol navigasi untuk menampilkan postingan yang lama, sedangkan Newer Post merupakan sebuah tombol untuk menampilkan postingan terbaru pada blog.
Sekarang tujuan pembahasan kita adalah untuk mengganti tombol Older Post tersebut menjadi "Load More" alias "Tampilkasn Lebih Banyak". Apa saja keuntungan dan kerugian dari mengngunakan tombol Load More

Baca juga :
Cara Mengganti Older Dan Newer Post Menjadi Numbered Navigation Pada Blog
Cara Mengganti Tombol Next Prev Dengan Judul Postingan

Kelebihan Menggunakan Tombol Load More

+ Mengurangi Angka Atau Nilai Bounce Rate Alias Rasio Pentalan
Dengan mengurangnya angka bounce rate maka blog kita akan semakin bagus di mata mesin pencari (Search Engine)
+ Tidak Membebani Loading Blog
Jika kita menggunakan tombol load more, maka secara otomatis blog kita tidak perlu melakukan rendering ulang karena tombol load more hanya akan memuat halaman postingan secara cepat tanpa memuat ulang semua tampilan blog
+ Bisa Menghemat Kuota Pengunjung
Bukan hanya berdampak bagi blog kita saja, ternyata hal ini juga bisa membuat data atau kuota internet para pengunjung blog kita akan lebih hemat karena tombol load more tidak akan memuat ulang semua tampilan blog untuk menampilkan postingan terbaru di blog kita seperti yang saya jelaskan di nomor 2

Kekurangan Menggunakan Tombol Load More

- Membuat Perangkat Pengunjung Blog Menjadi Lag
Membuat perangkat yang akan digunakan untuk mengunjungi blog kita akan mengalami lemot dan lag akibat banyaknya data yang akan dimuat, tapi saya yakin hal ini jarang terjadi lantaran rata para pengunjung blog banyak yang menggunakan perangkat dengan spesifikasi yang lebih tinggi

Cara Untuk Mengganti Tombol Older Post Dan Memasangnya Menjadi Tombol Load More Di Blog

Setelah kita membahas tentang kelebihan dan kekurangan dari Tombol Load More tersebut, maka kita lenjut untuk menuju cara memasang tombol load more di blog
1. Masuk ke dalam blog kalian masing masing
2. Pilih menu "Tema" dan klik "Edit HTML"
3. Selanjutnya, cari kode </body> dan letakkan kode berikut ini di atas kode </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script>//<![CDATA[
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+q+'"></span>'),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o)}},o.open("GET",e),o.send()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,200))},!1)}return p}}(window,document);var infinite_scroll = new InfiniteScroll({ type: 0,
target: {
posts: '.blog-posts',
post: '.post-outer',
anchors: '.blog-pager',
anchor: '.blog-pager-older-link'
},
text: {
load: '<a class="js-load" href="javascript:;">Load More</a>',
loading: '<a class="js-load">Loading...</a>',
loaded: '<span class="js-load">All Posts Have Been Load</span>',
error: '<a class="js-load">Huff... Error!!!</a>'
}
});
//]]></script>
<style> .js-load{display:block;width:100%;text-align:center;font-size:20px;margin:20px}</style>
</b:if></b:if>

4. Setelah semua sudah selesai silahkan untuk klik "Simpan Tema"
Sekrang kalian lihat hasilnya di halaman homepage blog kalian masing masing.

Baca juga :
Cara Membuat Widget Recent Comments Di Blog
Cara Menambahkan Widget Random Post Di Blog
Cara Membuat Featured Post Di Homepage Blog

Demikian tutorial singkat ini mengenai Tutorial Mengganti Older Post Menjadi Load More Di Blog yang dapat saya sampaikan kepada kalian semua. happy blogging.

Referensi :
22 September 2018 https://blog.kodejarwo.com/2018/02/cara-memasang-load-more-post.html

Promo Menarik