×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

Cara membuat button navigasi menjadi load more pada blog

Faronesia.com - Hallo sobat faronesia, pada kesempatan kali ini kita akan membahas dan membuat tutorial singkat mengenai cara membuat tombol load more pada halaman postingan blog. Button atau tombol load more berfungsi memuat agar postingan lebih banyak tanpa menekan next dan previous.

Dengan menerapkan load more sudah pasti blog yang anda kelola akan menjadi lebih fast loading dikarenakan anda tidak lagi memuat halaman blog ke Url yang baru. Script yang akan saya bagikan ini adalah script internal jadi tidak usah memanggilnya sebagaimana script eksternal.

Selain itu, dengan menerapkan tutorial load more ini akan akan menambah score kecepatan halaman saat dites pada gtmatric maupun page speed.

Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara membuat button navigasi menjadi load more pada blog
  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode seperti </head>
  • Tempelkan kode CSS berikut dibawah ini tepat diatas kode </head>
<style>
a.js-load, .buttonx {
display:inline-flex;
cursor:pointer;
background:#2d82ea;
color:#fff!important;
font-weight:500;
font-size:14px;
padding:8px 20px;
display:inline-block;
border-radius:5px;
margin:20px 5px;
box-shadow:0 1px 6px rgba(32,33,36,.28);
text-transform:uppercase;
}
.buttonx:active{
opacity:.8;
box-shadow:0 2px 10px 0 rgba(0,0,0,0.16),0 2px 15px 0 rgba(0,0,0,0.12);
}
a.js-load:hover, .buttonx:hover, buttonx#Disqus:hover {
opacity:0.6;
}
</style> 
  • Selanjutnya, silahkan cari kode </body>
  • Letakkan kode dibawah ini tepat diatas kode </body>
<b:if cond='data:view.isMultipleItems'>
<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,0200))},!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">Memuat...</a>',
  loaded: '<a class="js-load">Selesai</a>',
  error: '<a class="js-load">ERROR</a>'
 }
});
//]]>
</script>
</b:if>
  • Terakhir, simpan template dan lihat hasilnya.
TAMBAHAN: pada bagian teks yang berwarna kuning silahkan ubah sesuai keinginan.

Request tutorial lain?silahkan masuk ke halaman Tanggapan


Demikianlah mengenai Cara membuat button navigasi menjadi load more pada blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.

Buka komentar
Tutup komentar
  1. makasih sangat. izin ntar nerapin ya kak

    ReplyDelete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial