Cara Memasang Widget Load More Post dengan Tombol di Blog

Sudah terlalu banyak artikel-artikel seputar cara membuat load more post pengganti page navigation biasa ini, tetapi setelah saya cek, 95% dari artikel tersebut scriptnya sudah tidak bisa dipakai lagi, alias kadaluarsa.

Oleh karenanya, kali ini saya 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, menu 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 dapat anda lihat di blog Kode Jarwo.

Widget load more post sendiri lumayan digemari oleh para kalangan blogger dikarenakan widget ini dapat 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 membuat 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, lalu masuk ke tema, dan tekan Edit HTML.
Setelah itu, silakan cari kode :

</body>

Bila sudah ketemu, silakan masukkan kode ini tepat diatasnya.

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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 kode pemanggil HTML

Masih di Edit HTML, sekarang silakan anda cari kode berikut ini.

<div class='blog-pager' id='blog-pager'>

Bila sudah ketemu, silakan tempatkan kode ini tepat dibawah kode yang sudah dapat tadi.

 <b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <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? Mudah saja bukan cara memasangnya? Semoga dengan memakai widget ini, blog anda mengalami penurunan bounce rate...

Source link

Share this post