√Cara Memasang Tombol Load More Post Ringan Pengganti Page Navigation Blogger - dirga.id

Cara Memasang Tombol Load More Post Ringan Pengganti Page Navigation Blogger

cara-membuat-load-more-post-blogger


Hay sahabat cara,kali ini kita akan membahas tentang 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? karena menurut beberapa sumber dan pendapat ahli mengatakan bahwa numbered page navigation mempunyai beberapa kekurangan.

Apa Itu Load More Post ?


Load More Post adalah sebuah tombol yang berguna untuk menampilkan postingan di halaman hompage blog,ini sebuah fitur yang berguna untuk mengganti Page Navigation Blogger sehingga dapat menambah skor seo dari sebuah blog dan mengurangi jumlah bounce rate karena 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 agar 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 buruk untuk blog kita,itu sebabnya menggunakan tombol load more post di blogger merupakan cara terbaik yang bisa kita lakukan. Sudah banyak situs yang membahas tentang 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 :

  1. Dijamin Work di semua jenis Template Blogger
  2. SEO Friendly
  3. Mempercepat Loading Blog
  4. Super Ringan
  5. Tidak memerlukan jQuery
  6. Tidak membutuhkan Javascript dan CSS Eksternal
  7. Dapat menurunkan bounce rate
  8. Mobile Friendly
  9. Memperindah tampilan blog dan menambah User Experience (UX)
  10. Pemasangan yang Mudah
  11. Dan Script sudah di Minify/Kompres

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


  • Buka Blogger.com terlebih dahulu

buka-blogger-com-


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

masuk-ke-akun-blogger-anda-mengggunakan-gmail

  • Masuk ke Menu Tema > Pilih Edit HTML

buka-menu-tema-klik-edit-html

  • Cari Kode berikut ini

</body>


  • Copy kode di bawah ini dan paste tepat di atas kode tadi

<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:;">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 adalah cara untuk memasang tombol load more post di blogger,anda juga bisa memodifikasi tampilan dari tombol ini. Contohnya pada pesan/tulisan yang muncul seperti pada kode diatas ada beberapa tulisan yang saya warnai kuning.Itu merupakan kata-kata yang akan muncul ketika pengunjung menggunakan 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 seperti " Muat Artikel " " Artikel Lain " atau yang lain sesuka anda.

b. Sabar gan... 

Ini merupakan pesan yang muncul ketika konten sedang dimuat saat pengunjung menggunakan 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 hingga batas akhir 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 membuat blog anda error atau mengalami kerusakan, Dan fitur load more post ini bekerja dengan baik.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel