Cara menggunakan insertadjacenthtml hapus

o=r("judul",h),a=r(hal. target. posting,h),i=r(hal. target. jangkar+" "+p. target. jangkar,h),s=r(hal. target. posting,H);jika(o=o&&o[0]?o[0]

innerHTML. "", sebuah. panjang &&. panjang){var d=s[s. panjang-1];

e. judul=o,d. insertAdjacentHTML("setelah akhir",

''),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);

d. insertAdjacentHTML("setelah akhir",h. innerHTML),f(),M=i. panjang?i[0]

href. 1,v=. 1,q++,l("memuat",[p,t,n])}},fungsi(t,e)

{y. Daftar kelas. tambahkan (hal. negara. kesalahan), v=. 1,f(1),l("kesalahan",[p,t,e])})). (y. Daftar kelas. tambahkan (hal. negara. dimuat), L. innerHTML=p. teks. sarat,

l("dimuat",[p]))}fungsi f(t){if(L. innerHTML="",T)

{p. innerHTML=p. teks[t?"kesalahan". "memuat"]; var e=h. anak pertama;e. klik=fungsi()

{kembali 2===p. ketik&&(T=. 1),c(),. 1},L. appendChild(e)}}

var u="infinite-scroll-state-",p={target. {postingan. ". pos", pos. ". posting", jangkar. ". jangkar", jangkar. ". jangkar"}

, teks. {memuat. "%s", memuat. "%s", dimuat. "%s", kesalahan. "%s"}, status

{memuat. u+"memuat", memuat. u+"memuat", dimuat. u+"dimuat", kesalahan. u+"kesalahan"}}

,g={memuat. [], Memuat. [], dimuat. [], kesalahan. []};p=i(p,n. {})

,p. pada=s, hal. mati=d;var h=null,u=fungsi(e,n,r){jika(t. XMLHttpRequest)

{var o=new XMLHttpRequest; o. onreadystatechange=fungsi()

{jika(4===o. readyState) { jika (200. ==o. status) mengembalikan batal (r&&a(r)&&r(o. responseText,o));n&&a(n)&&n(o. responseText,o)}}

Infinite scroll adalah teknik desain web untuk menampilkan konten lama tanpa harus berpindah dari satu halaman ke halaman berikutnya seperti yang terjadi pada sistem navigasi halaman web, sehingga konten lama akan ditampilkan di bawah konten yang lebih baru. Infinite scroll biasanya diterapkan pada aplikasi media sosial seperti Facebook, Twitter, Instagram

Gulir infinity juga dapat dipasang di blogger, menggunakan ajax untuk meminta daftar konten di halaman berikutnya. Biasanya untuk menggunakan ajax akan lebih mudah jika menggunakan library dari jquery, namun hal tersebut dapat menambah beban loading web karena halaman yang dimuat juga harus memuat script jquery. Ternyata salah satu blogger indonesia juga pernah membagikan source code infinite scroll tanpa menggunakan jquery, dan dibuat dengan javascript murni (vanilla javascript).

Berikut adalah kode sumber gulir tak terbatas AJAX sederhana oleh dte. web. Indo

<b:if cond='data:blog.pageType in [&quot;index&quot;]'>
<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 Taufik Nurrohman */
!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

• Pertama anda masuk ke menu Tema > Edit HTML
• Salin skrip di atas dan letakkan di atas kode
• Kemudian klik simpan, dan lihat saja hasilnya
• Untuk mengubah tampilan tombol, silakan sesuaikan sendiri kode cssnya

Cara Setting Infinite Scroll di Blogger

ketik 0. pengguna harus terus mengklik tombol untuk memuat posting sebelumnya

tipe 1. pengguna hanya perlu menggulir halaman hingga batas bawah untuk memuat posting sebelumnya

tipe 2. pengguna hanya perlu mengklik tombol sekali untuk memuat posting sebelumnya, setelah itu pengguna hanya perlu menggulir halaman hingga batas bawah untuk memuat posting sebelumnya