Memasang Infinite Scroll (Read More) Di Template Kompi Flexible

Memasang Infinite Scroll (Read More) Di Template Kompi Flexible - Mengutak atik kode template Kompi Flexible ini memang seru

Daftar isi

Baca Juga

Memasang Infinite Scroll (Read More) Di Template Kompi Flexible - Mengutak atik kode template Kompi Flexible ini memang seru. Kodenya yang minimalis (semoga tambah minimal lagi kedepannya) dan mudah di edit, serta tidak membingungkan penggunanya. Jadi jika Anda masih belum menggunakan template Kompi Flexible ini, silahkan segera gunakan dan hubungi kang Adhy di kompiajaib.com

Beberapa tampilan dari template Kompi Flexible ini sudah sering saya lakukan. Termasuk meniru tampilan dari blognya kang Adhy sendiri namun sudah saya ganti menjadi tampilan yang saat ini. Tampilan grid yang saat ini sebenarnya juga dari support kang Adhy. Saya memintanya untuk merubah tampilan list menjadi grid. Tampilan sebenarnya setelah di bantu edit oleh kang Adhy ada 3 grid, namun saya ganti menjadi 2 grid agar bagian sidebar bisa tampil juga. Dari tampilan grid ini, saya ganti kode CSS gridnya dari unit persentase menggunakan kode unit fr {fraction} seingga membuat kolom grid tetap sama.

Selain mengganti tampilan dibagian homepage menjadi tampilan grid. Saya juga mengganti bagian komentar artikel blog dari kode template ini. Jika sebelumnya menggunakan kolom komentar disqus, saya ganti dengan kolom komentar blogger. Sehingga secara default, blog ini sudah menggunakan kolom komentar blogger.

Dan sekarang saya mengganti tampilan page navigation blogger bawaan template Kompi Flexible. Jika sebelumnya terdiri dari 3 tombol yaitu tombol posingan baru, tombol home, dan tombol postingan lama. Kini cukup menggunakan 1 tombol Load More, yaitu dengan menambahkan script Infinite Scroll. Seperti apa tampilan infinite scroll ini? Silahkan cek demonya dibwah ini

DEMO

Memasang Infinite Scroll (Read More) Di Template Kompi Flexible

Dari beberapa kode infinite scroll yang saya terpakan, mula-mulanya gagal terus dan ada yang harus menggunakan jQuery. Padahal jQuery dalam template kompi flexible tidak digunakan (disembunyikan). Jika menggunakan jQuery yang menyesuaikan dengan script infinite scroll akan membuat loading blog terganggu.

Ada banyak sekali kode script yang digunakan untuk memasang infinite scroll pada page navigation homepage blog. Kode-kode tersebut saya temukan di Google seperti dari Infinite Scroll itu sendiri yang bisa di lihat di website https://infinite-scroll.com, kode script yang digunakan blognya mbak Igniel dan pilihan terakhir script infinite scroll yang di share oleh mas taufik Nurrohman di blog DTE.

Dari kode script infinite yang di share oleh mas Taufik ini sangat cocok dipasang di blog manapun. Namun ada pengaturan yang harus diganti pada penggunaan elemen target pada halaman yang di scroll.

Memasang Kode Script Infinite Scroll
Pada contoh pemasangan ini menggunakan template Kompi Flexible. untuk template yang lainnya, silahka dicoba. Dan perlu diperhatikan, saat menggunakan script infinite scroll ini ke template Kompi Flexible, Anda tidak perlu menghapus semua kode kode apapun yang ada di template kompi flexible. Hanya ada sedikit kode yang perlu di hapus dan dinonaktifkan. Berikut panduannya:

Silahkan cari kode CSS berikut di template kompi flexible Anda. Atau jika menggunakan template yang lain, perhatikan persamaan kodenya. Kode dibawah ini adalah kode untuk menampilkan page navigasi di halaman homepage dan harus disembunyikan.

.home_page a.blog-pager-newer-link,.home_page a.blog-pager-older-link,.home_page .home-box,.home_page .last-box,.home_page a.home-link{box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}

Ganti dengan kode CSS dibawah ini:

.home_page a.blog-pager-newer-link,.home_page a.blog-pager-older-link,.home_page .home-box,.home_page .last-box,.home_page a.home-link{display:none}

Cari kode CSS halaman page navigasi di halaman artikel (single post) berikut ini. Atau sesuaikan jika Anda menggunakan template yang lain.

.halaman{margin:20px 0;padding:10px 0;height:auto;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);}

Ganti dengan kode CSS dibawah yang berfungsi untuk menghilangkan tampilan page naviasi di halaman artikel:

.halaman{display:none;margin:20px 0;padding:10px 0;height:auto;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);}

Saling kode CSS dibawah ini dibawah kode page navigasi template. Atau dimana saja. Kode CSS dibawah ini digunakan untuk menampilkan tombol Read More dari script infinite scroll.

.js-load,.js-loading,.js-loaded{width:100%;background:#01579B;color:#ffffff;display:inline-block;border-radius:25px;padding:8px 20px;-webkit-transition:all .2s;transition:all .2s}
a.js-load,span.js-loaded,span.js-loading,a.js-load:visited,{transition:all .2s;background:#01579B;color:#ffffff !important}
.js-loading::after{border:2px solid #ffffff}
.a.js-load:hover,span.js-loaded:hover,span.js-loading:hover{background:#01579B}
.js-loading::after{content:"";width:10px;height:10px;vertical-align:middle;margin-left:8px;margin-left:.5rem;margin-bottom:3px;border-radius:100%;display:inline-block;border-top:2px solid transparent;-webkit-animation:load-animate infinite linear 1s;animation:load-animate infinite linear 1s}
@-webkit-keyframes load-animate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.35}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes load-animate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.35}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

Selanjutnya, cari kode </body> dan salin kode script infinite scroll ini tepat diatas kode </body>

<b:if cond='data:blog.pageType not in {&quot;item&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: '.outer-wrapper',post: '.post-outer',anchors: '.blog-pager',anchor: '.blog-pager-older-link'},
text: {
load: '<a class="js-load" href="javascript:;">Read More</a>',
loading: '<a class="js-loading" >Loading...</a><div class="load"></div>',
loaded: '<a class="js-loaded" data-text="Loaded! Back To Top">Selesai</a>',
error: '<a class="js-error">End</a>'
}});
//]]>
</script>
</b:if>

Sebelum menyimpan kode script diatas, perhatikan Elemen Target yang digunakan pada blog Anda. Elemen target pada template kompi flexible sudah saya sematkan pada kode script diatas. Jika Anda menggunakan template lain, perhatikan elemen target berikut ini, dan sesuaikan dengan yang ada pada blog Anda:

posts:.outer-wrapper
post:.post-outer
anchors:.blog-pager
anchor:.blog-pager-older-link

Jika semua sudah selesai. Simpan template. Dan lihat hasilnya.

Ingat, tidak perlu mengganti kode template bawaan yang digunakanpada blog Anda. Cukup ikuti saja panduan diatas. Jika terjadi error, ganti saja elemen target yang telah saya jelaskan diatas. Error yang terjadi hanya pada tampilan post saja, selain itu tetap aman. Selamat mencoba.