Cara Memasang Tombol Load More Post Ringan Pengganti Page Navigation Blogger

Cara Membuat Tombol Load More Post Ringan di Blogger

Hay sahabat blogger,kali ini kita akan membahas wacana cara memasang tombol load more post,dimana load more ini merupakan fitur untuk memuat postingan di homepage blog kita tanpa harus berpindah halaman. Ini merupakan cara terbaik yang bisa kalian lakukan untuk mengganti page navigation default blogger atau numbered page yang ada di template ini. Kenapa harus di ganti? lantaran berdasarkan beberapa sumber dan pendapat jago menyampaikan bahwa numbered page navigation mempunyai beberapa kekurangan.

Apa Itu Load More Post ?

Load More Post ialah sebuah tombol yang mempunyai kegunaan untuk menampilkan postingan di halaman hompage blog,ini sebuah fitur yang mempunyai kegunaan untuk mengganti Page Navigation Blogger sehingga sanggup menambah skor seo dari sebuah blog dan mengurangi jumlah bounce rate lantaran pengunjung tidak perlu berpindah halaman ketika mereka ingin memuat artikel apa saja yang ada di blog kita selain dari beberapa artikel yang muncul dan ada di halaman homepage blog.

Baca Juga : Cara memasang script Lazy Load gambar di blogger semoga loading lebih cepat

Kekurangan Numbered Page Navigation dan Bawaan Blogger :

Kurang SEO
Menambah berat waktu pemuatan blog
Menambah Bounce Rate

Tentu saja ini merupakan sebuah hal jelek untuk blog kita,itu sebabnya memakai tombol load more post di blogger merupakan cara terbaik yang bisa kita lakukan. Sudah banyak situs yang membahas wacana load more namun masih sedikit yang membagikan cara untuk memasangnya. Bilapun ada biasanya script yang diberikan tidak work

Script ini merupakan buatan dari Kode Jarwo ,yang memang sudah di kenal sebagai ahlinya SEO dan PageSpeed untuk Blogger.

Kelebihan dari script tombol loadmore Kode Jarwo :

Dijamin Work di semua jenis Template Blogger
SEO Friendly
Mempercepat Loading Blog
Super Ringan
Tidak memerlukan jQuery
Tidak membutuhkan Javascript dan CSS Eksternal
Dapat menurunkan bounce rate
Mobile Friendly
Memperindah tampilan blog dan menambah User Experience (UX)
Pemasangan yang Praktis
Dan Script sudah di Minify/Kompres

Berikut ini cara memasang tombol load more post ringan di blogger :

Buka Blogger.com terlebih dahulu

Klik sign in ,untuk masuk ke akun blogger anda dengan gmail

Masuk ke Menu Tema > Pilih Edit HTML

Cari Kode berikut ini

</body>

Baca Juga

Copy arahan di bawah ini dan paste sempurna di atas arahan tadi

<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'>
<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:;">Liat Artikel Lainnya</a>',
loading: '<a class="js-load">Sabar gan...</a>',
loaded: '<span class="js-load">Dah ah, capek!</span>',
error: '<a class="js-load">Hadeh error!</a>'
} }); //]]></script> <style> .js-load{display:block;width:100%;text-align:center;font-size:20px;margin:20px}</style> </b:if></b:if>

Bila sudah klik Simpan Template

Itu ialah cara untuk memasang tombol load more post di blogger,anda juga bisa memodifikasi tampilan dari tombol ini. Contohnya pada pesan/tulisan yang muncul ibarat pada arahan diatas ada beberapa goresan pena yang saya warnai kuning.Itu merupakan kata-kata yang akan muncul ketika pengunjung memakai tombol load more di blog kita,anda bisa menggantinya misalkan :

a. Liat Artikel Lainnya

Ini merupakan pesan yang muncul di tombol load more,anda bisa menggantinya dengan kata-kata yang lain ibarat " Muat Artikel " " Artikel Lain " atau yang lain sesuka anda.

b. Sabar gan...

Ini merupakan pesan yang muncul ketika konten sedang dimuat dikala pengunjung memakai tombol load more,anda bisa mengganti dengan " Loading " " Memuat " atau kata-kata lainnya.

c. Dah ah,capek!

Ini merupakan pesan yang muncul ketika pengunjung sudah memuat sampai batas selesai konten yang ada di blog kita,anda bisa mengganti dengan " Selesai " " Last " " End " " Tamat " dan lain-lain .

d. Hadeh Error!

Ini merupakan pesan yang akan muncul ketika blog atau script tidak berjalan,sehingga ada peringatan error. Anda bisa megganti dengan " Error,refresh dulu gan " atau kata-kata lain yang anda inginkan.

Baca Juga : Cara Membuat Halaman Sitemap Blogger di Viomagz

Pastikan anda sudah memasangnya dengan benar,dan menempatkannya di posisi yang sudah dijelaskan tadi. Sehingga tidak akan menciptakan blog anda error atau mengalami kerusakan, Dan fitur load more post ini bekerja dengan baik.

Penutup

Itulah langkah-langkah menciptakan tombol load more di blogger untuk menggantikan page navigation,semoga tutorial Cara Memasang Tombol Load More Post Ringan Pengganti Page Navigation Blogger yang saya berikan ini bisa membantu anda. Selamat mencoba.

Sumber https://www.dirga.id/