Cara Membuat Load More Article di Blog Seperti Milik Saya
Apa itu Load More Article?
Gambar di atas merupakan contoh tampilan "Load More Article" pada Blog saya.
"Load More Article" adalah cara menampilkan artikel blog dengan jumlah yang telah ditentukan oleh blog anda sendiri, misalnya anda menampilkan 6 artikel dihalaman utama blog/homepage anda, maka setelah mengklik tombol "Load More Article" maka secara otomatis 6 artikel lagi akan muncul ke bawah.
Berbeda dengan "Blog Pager", jika anda menggunakan "Blog Pager" maka artikel anda tidak tampil dihalaman utama blog/homepage tetapi tampil di halaman selanjutnya. Lalu anda harus menyesuaikan berapa artikel yang aka muncul secara manual dalam kode skrip tersebut. Contoh tampilan tombol "Blog Pager" :
1 2 3 .... 7 8 9 Old Article
Lalu Apa Kelebihan dari "Load More"?
1. Fix di Semua Template Blog.
2. SEO Friendly.
3. Mempercepat Loading Blog.
4. Tidak Memerlukan Jquery.
5. Tidak Memerlukan Javascript dan CSS. Eksternal.
5. Mobile Friendly.
6. Pemasangan Mudah.
Bagaimana cara membuatnya?, Ikuti langkah-langkah dibawah ini
Langkah-Langkah Cara Membuat Load More Article di Blog Seperti Milik Saya
Versi Dekstop :
1. Login ke blogger.
2. Di menu kiri klik Tema (Theme).
3. Lalu klik ikon segitiga yang ada disebelah tulisan Sesuaikan (Adjust) dan klik "Edit HTML".
4. Lalu tempelkan kode berikut di atas tag </body> :
<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:;" style="color:#fff;">Load More Article</a>',
loading: '<a class="js-load" style="color:#fff;background:#6c9f72;background:#bc9f60">Loading...</a>',
loaded: '<a class="js-load" href="." style="color:#fff;">Back To The Beginning.</a>',
error: '<a class="js-load" style="color:#fff; background:#fff000">Error!</a>'
} }); //]]></script>
<style> .js-load{display:block;
width:200px;padding:6px 8px;vertical-align:middle;text-align:center;background:#555555;border-radius:10px;font-size:18px;float:right;margin-right:22%;}</style>
5. Lalu simpan/save templatenya, dan coba muat ulang blog anda.
Versi Mobile :
1. Login ke blogger.
2. Di kiri atas klik ikon bergaris tiga "="
3. Di menu kiri klik Tema (Theme).
4. Lalu klik ikon segitiga yang ada disebelah tulisan Sesuaikan (Adjust) dan klik "Edit HTML".
5. Lalu tempelkan kode berikut di atas tag </body> :
<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:;" style="color:#fff;">Load More Article</a>',
loading: '<a class="js-load" style="color:#fff;background:#6c9f72;background:#bc9f60">Loading...</a>',
loaded: '<a class="js-load" href="." style="color:#fff;">Back To The Beginning.</a>',
error: '<a class="js-load" style="color:#fff; background:#fff000">Error!</a>'
} }); //]]></script>
<style> .js-load{display:block;
width:200px;padding:6px 8px;vertical-align:middle;text-align:center;background:#555555;border-radius:10px;font-size:18px;float:right;margin-right:22%;}</style>
6. Lalu simpan/save templatenya, dan coba muat ulang blog anda.
Selamat mencoba :)
