Cara Memasang Widget Load More Post Dengan Tombol Di Blog
Kamis, 30 November 2017
Sudah terlalu banyak artikel-artikel seputar cara menciptakan load more post pengganti page navigation biasa ini, tetapi sesudah aku cek, 95% dari artikel tersebut scriptnya sudah tidak sanggup digunakan lagi, alias kadaluarsa.
Oleh karenanya, kali ini aku akan membagikan cara memasang widget load more post yang dijamin work untuk di segala template.
Untuk yang belum mengetahui apa itu widget load more post, widget ini berfungsi sebagai pengganti page navigation di blog menjadi load more. Jadi, hidangan navigasi di blog akan hilang, dan digantikan oleh widget ini yang apabila di klik akan memunculkan post lainnya tanpa berpindah halaman. Untuk live demonya sendiri sanggup anda lihat di blog Kode Jarwo.
Widget load more post sendiri tidak mengecewakan digemari oleh para kalangan blogger dikarenakan widget ini sanggup menjadi salah satu alternatif untuk mengurangi bounce rate di blog.
Selain alternatif untuk mengurangi bounce rate, widget ini juga memilii beberapa kelebihan lainnya, diantaranya sebagai berikut:
Langsung saja, berikut cara pemasangannya.
Silakan anda login terlebih dahulu di blogger.com, kemudian masuk ke tema, dan tekan Edit HTML.
Setelah itu, silakan cari instruksi :
Bila sudah ketemu, silakan masukkan instruksi ini sempurna diatasnya.
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'>
<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>
Simpan template dan lanjutkan ke langkah terakhir.
Masih di Edit HTML, kini silakan anda cari instruksi berikut ini.
Bila sudah ketemu, silakan tempatkan instruksi ini sempurna dibawah instruksi yang sudah sanggup tadi.
Simpan template dan lihat hasilnya.
Bagaimana? Praktis saja bukan cara memasangnya? Semoga dengan menggunakan widget ini, blog anda mengalami penurunan bounce rate...
Oleh karenanya, kali ini aku akan membagikan cara memasang widget load more post yang dijamin work untuk di segala template.
Untuk yang belum mengetahui apa itu widget load more post, widget ini berfungsi sebagai pengganti page navigation di blog menjadi load more. Jadi, hidangan navigasi di blog akan hilang, dan digantikan oleh widget ini yang apabila di klik akan memunculkan post lainnya tanpa berpindah halaman. Untuk live demonya sendiri sanggup anda lihat di blog Kode Jarwo.
Widget load more post sendiri tidak mengecewakan digemari oleh para kalangan blogger dikarenakan widget ini sanggup menjadi salah satu alternatif untuk mengurangi bounce rate di blog.
Selain alternatif untuk mengurangi bounce rate, widget ini juga memilii beberapa kelebihan lainnya, diantaranya sebagai berikut:
- Dijamin SEO Friendly
- Tidak menciptakan loading blog anda berat
- Mobile Friendly
- Menambah User Experience (UX)
- Tanpa JavaScript atau CSS eksternal
- Script sudah dikompres
- Tidak memerlukan jQuery
- dan masih banyak lagi...
Langsung saja, berikut cara pemasangannya.
Langkah Pertama: Pemasangan Javascript
Silakan anda login terlebih dahulu di blogger.com, kemudian masuk ke tema, dan tekan Edit HTML.
Setelah itu, silakan cari instruksi :
</body>
Bila sudah ketemu, silakan masukkan instruksi ini sempurna diatasnya.
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'>
<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>
Simpan template dan lanjutkan ke langkah terakhir.
Langkah Terakhir: Penempatan instruksi pemanggil HTML
Masih di Edit HTML, kini silakan anda cari instruksi berikut ini.
<div class='blog-pager' id='blog-pager'>
Bila sudah ketemu, silakan tempatkan instruksi ini sempurna dibawah instruksi yang sudah sanggup tadi.
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'>
<div class='blog-pager' id='blog-pager'><a class='js-load' href='javascript:;'>Muat Lagi</a></div>
</b:if></b:if>
Simpan template dan lihat hasilnya.
Bagaimana? Praktis saja bukan cara memasangnya? Semoga dengan menggunakan widget ini, blog anda mengalami penurunan bounce rate...