Tutorial Mengganti Older Post Menjadi Load More Di Blog | Tutorial Lengkap

Tutorial Mengganti Older Post Menjadi Load More Di Blog

Zona Internetku September 24, 2018

Tutorial Mengganti Older Post Menjadi Load More Di Blog

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 buat menampilkan postingan yg usang, sedangkan Newer Post adalah sebuah tombol buat menampilkan postingan modern pada blog.

Sekarang tujuan pembahasan kita adalah buat mengganti tombol Older Post tersebut sebagai

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

Komentar

Posting Komentar

Postingan populer dari blog ini

4 Aplikasi Terbaik Untuk Memantau Kurs Mata Uang Dunia Di Android | Tutorial Lengkap

Gambar
4 Aplikasi Terbaik Untuk Memantau Kurs Mata Uang Dunia Di Android Aplikasi Terbaik Untuk Memantau Kurs Mata Uang Dunia Di Android. Mungkin sebagian besar orang membutuhkan informasi yang terbaru dan aktual mengenai pergerakan mata uang dunia baik itu dollar ataupun rupiah. Zona Internetku August 20, 2019 Hal yang mendorong seorang buat terus memantau perkembangan mata uang tersebut umumnya disebabkan sang alasan tersendiri misalnya urusan berbisnis ekspor/impor barang ke mancanegara, berpergian (travelling), trading forex dan pula usaha lainnya. Untuk memantau terus pergerakan nilai tukar mata uang global contohnya dolar Amerika Serikat, Singapura, Taiwan Deretan Aplikasi Terekomendasi Untuk Memantau Pergerakan Nilai Tukar Mata Uang Lokal Dan Asing (Internasional) Di Android 1. BI Mobile Pertama ada aplikasi BI Mobile yang diluncurkan dengan resmi dari Bank Sentral Republik Indonesia, melalui aplikasi kamu bisa melihat semua informasi mengenai keuangan seperti nilai tukar ru...
Baca selengkapnya

4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP | Tutorial Lengkap

Gambar
4 Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Aplikasi Pelindung Mata Untuk Mengurangi Dampak Dari Radiasi Layar HP Dan Tablet . Smartphone atau yang lebih akrab disebut dengan gadget telah menjadi bagian kebutuhan pokok sehari hari, mulai dari untuk berkomunikasi, berbisnis, mencari informasi ataupun hanya untuk sekedar mencari hiburan seperti bermain game. Zona Internetku November 11, 2019 Tetapi tahukah kalian bahwa sinar biru (blue light) yang dipancarkan sang layar HP jua mengakibatkan radiasi dalam organ mata sebagai akibatnya mampu berdampak buruk bagi si pengguna gadget tersebut, terutama bagi orang yang melakukan semua aktifitasnya melalui HP, terlebih lagi jika mereka sanggup memakai HP lebih dari 8 jam setiap harinya yg padahal itu jelek bagi kesehatannya. Tapi kita juga masih sanggup buat mengurangi pengaruh atau resiko yg disebabkan sinar biru smartphone dengan memakai fitur fitur yg sudah disediakan sang pihak pengembang beberapa pelaksan...
Baca selengkapnya

Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop | Tutorial Lengkap

Gambar
Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Cara Mengubah Suasana Siang Menjadi Malam Di Photoshop Zona Internetku September 11, 2016 Cara Mengubah Suasana Siang Menjadi Malam . Halo.. sob, selamat datang di zona internetku, pada tutorial kali ini saya akan memposting tutorial tentang cara mengubah suasana siang menjadi malam, efek kali ini memberikan kesan yang agak suram atau sepi karena biasanya susana di malam hari memang sangat menakutkan, tapi berbeda bagi para editor yang menggunakan efek ini untuk menciptakan suasana tertentu, yang tentu saja menggunakan aplikasi photoshop yang penuh dengan fitur fitur yang sangat keren, dan saya kali ini menggunakan aplikasi photoshop cs6 kalian juga bisa menggunakan aplikasi photoshop yang lain seperti photoshop cc yang selalu update dengan fitur fiturnya yang lebih keren dari generasi yang lainnya. tetapi itu semua tergantung dari bagaimana cara menggunakan aplikasi tersebut dengan keahlian kalian masing masing. Ok langsun...
Baca selengkapnya