Memasang Tombol Load More atau Infinite Scroll di Blogspot

Memasang Tombol Load More atau Infinite Scroll di Blogspot: Panduan dan Manfaatnya

Tombol Load More yang sering dianggap memiliki fungsi serupa dengan Infinite Scroll , namun dengan pendekatan yang berbeda.

Jika Anda ingin meningkatkan pengalaman pengguna di blogspot, tombol Load More adalah salah satu fitur yang bisa Anda tambahkan. Fitur ini sering kali disebut sebagai alternatif dari Infinite Scroll , karena keduanya bertujuan untuk memuat konten tambahan secara dinamis. Namun, ada perbedaan mendasar dalam cara pengguna berinteraksi dengan kedua fitur tersebut.

Apa itu Tombol Load More?

Tombol Load More adalah fitur yang memungkinkan pengguna untuk memuat konten tambahan dengan menekan tombol tertentu, seperti "Muat Lebih Banyak" atau "Load More". Ketika tombol ini ditekan, konten baru akan dimuat tanpa harus membuka halaman baru.

Fitur ini sering digunakan sebagai solusi praktis untuk menggantikan pagination (navigasi halaman) tradisional, tetapi memberikan kontrol penuh kepada pengguna untuk memilih kapan mereka ingin melihat lebih banyak konten.

Bagaimana Cara Kerja Tombol Load More?

1. Saat halaman pertama dimuat, hanya sebagian konten (misalnya 8 artikel terbaru) yang ditampilkan.
2. Pengguna dapat menekan tombol Load More untuk memuat konten tambahan (misalnya 8 artikel lainnya).
3. Proses ini berulang hingga semua konten tersedia untuk dilihat oleh pengguna.

Teknik ini menggunakan JavaScript atau jQuery untuk mengambil data tambahan dari server tanpa harus me-refresh seluruh halaman.

Manfaat Memasang Tombol Load More di Blogspot

Memberikan Kontrol kepada Pengguna

Dengan tombol Load More, pengguna memiliki kendali penuh atas jumlah konten yang ingin mereka lihat. Ini membuat pengalaman browsing lebih nyaman dibandingkan dengan infinite scroll, yang terkadang memuat konten secara otomatis tanpa persetujuan pengguna.

Lebih Ramah SEO

Salah satu keuntungan utama tombol Load More adalah kemampuannya untuk tetap ramah terhadap mesin pencari (SEO). Karena konten dimuat secara bertahap dan URL halaman tetap stabil, mesin pencari seperti Google dapat lebih mudah mengindeks konten Anda .

Menghemat Bandwidth dan Performa Halaman

Dengan hanya memuat konten tambahan saat dibutuhkan, halaman blogspot Anda akan lebih ringan dan cepat diakses. Ini sangat penting jika blog Anda memiliki banyak artikel atau gambar besar.

Navigasi Lebih Terstruktur

Pengguna dapat dengan mudah kembali ke bagian awal halaman tanpa harus menggulir terlalu jauh ke atas, sehingga meningkatkan pengalaman pengguna secara keseluruhan.

Perbandingan dengan Infinite Scroll

Meskipun tombol Load More dan Infinite Scroll memiliki tujuan yang sama (memuat konten tambahan), ada beberapa perbedaan mendasar:

Tombol Load More

Pengguna harus menekan tombol untuk memuat konten tambahan. Ini memberikan kontrol lebih kepada pengguna dan lebih ramah SEO.

Infinite Scroll

Konten dimuat secara otomatis saat pengguna menggulir halaman. Ini cocok untuk situs dengan fokus eksplorasi konten tanpa batas, tetapi kurang efektif untuk SEO dan navigasi.

Cara Memasang Tombol Load More di Blogspot

Untuk memasang tombol Load More di blogspot, Anda dapat menggunakan kode JavaScript atau jQuery sederhana. Berikut adalah langkah-langkah dasarnya:

1. Buka Dashboard Blogger >> Tema >> Edit HTML

2. Masukkan kode javascript berikut di atas </body>

        
xml
        

            
        
     
<b:if cond='!data:view.isSingleItem'>
<script type='text/javascript'>
//<![CDATA[
// Load more
!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:;">MUAT 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>
</b:if>

3. Berikan CSS untuk mempercantik tampilan di dalam <b:skin> atau <style>. Contohnya seperti berikut.

        
css
        

            
        
     
a.js-load {
    background: var(--color-primary);
    color: var(--color-light);
    border-radius: 5px;
    padding: 12px 60px;
    display: inline-block;
    line-height: 1;
    font-weight: 700;
    font-size: var(--font-size-small);
}

4. Simpan template Anda.

Tombol tersebut sejatinya menggantikan fungsi dari navigasi Next dan Prev di blogspot, untuk itu silakan diperhatikan betul tag kondisional blogger nya, agar di laman postingan nanti tidak terpengaruh.

Demikian tutorial memasang tombol loadmore di Blogspot, semoga bermanfaat.