Terakhir di Update Oktober 23, 2024
Membuat Infinite Scroll di Blogger – Sebelum itu kamu pasti punya alasan tersendiri kenapa memilih Infinite Scroll dibandingkan dengan prev dan next. Infinite scroll merupakan teknik yang berguna untuk menjaga bounce rate blog karena pengunjung tidak akan berpindah halaman dan tetep stay di halaman yang sama. artikel yang lebih lama akan berada tepat dibawah artikel yang baru. Infinite scroll umumnya dipakai kebanyakan aplikasi sosial media seperti, Tiktok, Facebook, Twitter, dan Instagram
Infinitie scroll bisa dipasangkan pada blogger, dengan syarat harus menggunkan ajax agar bisa melakukan permintaan list artikel yang ada dihalaman berikutnya. Pada kebanyakan orang biasanya memakai ajax akan menjadi lebih mudah jika dibandingkan menggunakan library dari jquery.
Source Code Infinite Scroll di Blogger
Saya udah siapin code html untuk membuat infinite scroll di blogger dan bisa langsung di terapkan di blogger.
<b:if cond='data:blog.pageType in ["index"]'>
<style>
.js-load{padding: 5px;border: 1px solid #007fa0;border-radius: 10px;}
.js-load:hover{background:#007fa0;color:#ffffff;border: 1px solid #007fa0;}
</style>
<script type='text/javascript'>
//<![CDATA[
/*! Simple AJAX infinite scroll by deuxly.com */
!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 f(){return L.innerHTML=p.text.loading,T=!0,y?(M.classList.add(p.state.loading),l("loading",[p]),void u(y,function(t,n){M.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:'+j+'"></span>'),h=e.createElement("div");for(var f=0,u=a.length;u>f;++f)h.appendChild(a[f]);d.insertAdjacentHTML("afterend",h.innerHTML),c(),y=i.length?i[0].href:!1,T=!1,j++,l("load",[p,t,n])}},function(t,e){M.classList.add(p.state.error),T=!1,c(1),l("error",[p,t,e])})):(M.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function c(t){if(L.innerHTML="",v){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(v=!1),f(),!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()}},v=1!==p.type,T=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],y=r(p.target.anchor,L),m=e.body,M=e.documentElement,x=M.className||"",E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=0,S=null,j=1;if(y.length){y=y[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),c();var A=function(){E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=m.scrollTop||M.scrollTop,T||E>w+b||f()};A(),0!==p.type&&t.addEventListener("scroll",function(){v||(S&&t.clearTimeout(S),S=t.setTimeout(A,500))},!1)}return p}}(window,document);
var infinite_scroll = new InfiniteScroll({
type: 0,
target: {
posts: '.blog-posts',
post: '.date-outer',
anchors: '.blog-pager',
anchor: '.blog-pager-older-link'
},
text: {
load: '<a class="js-load" rel="nofollow" href="javascript:;">Artikel Berikutnya</a>',
loading: '',
loaded: '',
error: '<a class="js-error" rel="nofollow" href="javascript:;">Error.</a>'
}
});
//]]>
</script>
</b:if>Cara Memasang Infinite Scroll di Blogger
Memasang Infinite scroll di blogger sebenernya cukup gampang, ada empat langkah agar bisa membuat dan memasang infinite scroll yaitu:
- Masuk di dashboard blogger, pada menu
Tema>Edit HTML - Copy script diatas dan paste tepat diatas code
</body> - Jika kode infinte scroll udah di pasang, klik simpan, dan tinggal liat hasilnya.
- Untuk mengganti tampilan tombol bisa kamu atur sendiri menggunakan css
Cara Setting Infinite Scroll di Blogger
type 0 : pengunjung harus mengklik tombol agar bisa memuat artikel-artikel sebelumnya.
type 1 : pengunjung cuma scroll halaman kebawah untuk memuat artikel sebelumnya.
type 2 : pengunjung cuma mengeklik tombol sekali untuk memuat artikel sebelumnya, setelah itu hanya perlu scroll dari atas ke bawah untuk memuat artikel.
Langkah membuat infinite scroll di blogger udah siap, tinggal disesuaikan aja sama selera masing-masing.