Terakhir di Update Oktober 24, 2024
Cara Membuat Load More Button di Blogger – Sering ngeliat di blog orang ada tulisan Load More? itu bisa dibuat dengan cms apa aja termasuk blogger dan wordpress. Load More sendiri berfungsi untuk membagi artikel yang ditampilin pada halaman homepage blog agar bisa tersusun rapi sehingga, pengunjung blog akan lebih mudah mengakses blog.
Sebelumnya saya udah bikin artikel membuat infinite scroll di blogger yang kalo pengunjung scroll, dia akan terus memuat artikel-artikel yang ada di blog tanpa pindah ke halaman lain.
Cara Membuat Load More Button di Blogger
- Masuk ke dashboard Blogger.
- Buka halaman
Themedan klik tombolEdit HTML, pencet tombolCTRL + Funtuk menampilkan kotak pencarian - Tuliskan tag di bawah ini di kotak pencarian lalu tekan ENTER.
</body>4. Tepat di atas kode </body> tambahin script di bawah ini:
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>//<![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">The End</span>',
error: '<a class="js-load">Oops! Error</a>'
}
});
//]]></script>
<style type='text/css'>.js-load{display: block;padding: 2px;margin: 0 43% 0 43%;font-size: 14px;border: solid 1px #ff5722;background: #ff5722;color: #fff;border-radius: 10px;}@media only screen and (max-width: 980px) {.js-load{display: block;padding: 2px;margin: 0 38% 0 38%;font-size: 14px;border: solid 1px #ff5722;background: #ff5722;color: #fff;border-radius: 10px;}}</style>
</b:if></b:if>5. Klik tombol Save dan cek blog Kamu.
Kalo tombol Load More ngga muncul, bisa jadi javascript post yang lama masih tersimpan. Coba cari dan hapus kode yang lama.
Load More di blogger udah jadi, tinggal diterapin aja dan jangan lupa di pratinjau dulu sebelum di publish buat meminimalisir kesalahan kode dan antisipasi template blogger jadi error.