Cara Terbaru Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog Dengan Mudah

Lapakinfo.net - Pada kesempatan kali ini saya akan membagikan sebuah tutorial yaitu Cara Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog, infinite scroll ialah sebuag script yang berfungsi untuk memanggil postingan lain yang tidak muncul pada homepage blog kalian, postingan lain yang di maksud ialah postingan lama yang tidak muncul pada home page atau halaman depan blog kalian.

Infinite scroll ini memiliki dua versi yaitu versi manual click dan versi auto load, tapi pada kesempatan ini saya akan membagikan tutorial infinite scroll versi manual click. Infinite scroll ini pengganti tombol page navigation yang terletak di bawah postingan homepage blog, untuk memasangnya juga sangat mudah. Jika kalian ingin memasang infinite scroll ini kalian bisa ikuti caranya di bawah ini.

Cara Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog

1. Buka Blog kalian
2. Pilih Tema lalu pilih Edit HTML
3. Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>

/* Infinite Lapakinfo.net */
#blog-pager {
clear:both !important;
padding:2px 0;
text-align: center;
}
#blog-pager-newer-link a {
float:left;
display:block;
background: #ffffff;
}
#blog-pager-older-link a {
float:right;
display:block;
background: #ffffff;
}
.displaypageNum a,.showpage a,.pagecurrent, #blog-pager-newer-link a, #blog-pager-older-link a {
font-size: 14px;
padding: 8px 12px;
margin: 2px 3px 2px 0px;
display: inline-block;
color: #000000;
border: 1px solid #000000;
}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover, a.home-link:hover, .displaypageNum a:hover,.showpage a:hover, .pagecurrent {
color: #000000;
border: 1px solid #000000;
}
.showpageOf {
display: none !important;
}
#blog-pager .pages {
border: none;
}
#blog-pager a.home-link {display:none}
#blog-pager {padding:0;margin:20px auto; text-align:center;}
#blog-pager-older-link {float:none; display:block}
#blog-pager-older-link img {max-height:50px}
#blog-pager-older-link a {
  background: #1589E3;
  color:#fff;
  font-size:14px; 
  font-weight:600; 
  border-radius:3px; 
  padding:10px 20px; 
  display:inline-block; 
  position:right; 
  transition:0.3s; 
  float: right;
  border: 1px solid #1a73e8;}
#blog-pager-older-link a:hover {
  background:transparent;
  border: 1px solid #1589E3;
  color: #1589E3;
  }


#blog-pager-newer-link a {
  background: #1589E3;
  float: left;
  font-size: 14px;
  font-weight: 600;
  border-radius: 3px;
  padding: 10px 20px;
  display: inline-block;
  position: left;
  transition: 0.3s;
  border: 1px solid #1589E3;
  color: #fff;
}
#blog-pager-newer-link a:hover {
  background:transparent;
  border: 1px solid #1589E3;
  color: #1589E3;
}

4. Lanjut salin kode di bawah ini dan letakan di atas kode </body>

<!-- Load More Post -->
<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:;">Artikel Berikutnya</a>',
loading: '<a class="js-load" >Loading...</a><div class="load"></div>',
loaded: '<a class="js-load" href="#" data-text="Loaded! Back To Top">END</a>',
error: '<a class="js-load">Hadeh error!</a>'
}
});
//]]>//</script>
</b:if>
</b:if>
Keterangan :
Silahkan rubah kata - kata di bawah ini sesuai kemauan kalian
- Artikel Berikutnya ( Merupakan pesan yang muncul pada tombol infinite, kalian bisa menggantinya dengan Next Article atau Artikel Selanjutnya )
- Loading ( Merupakan pesan yang muncul ketika sedang  memuat artikel selanjutnya )
- END ( Merupakan pesan yang muncul ketika artikel yang di muat sudah mencapai batas )
- Hadeh Error! ( Merupakan pesan yang muncul saat script tidak bekerja, sehingga ada peringatan error )
5. Simpan template kalian dan selesai.


Bagiamana sangat mudah bukan untuk tutorial Cara Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog, untuk hasilnya kalian bisa klik tombol demo yang ada di atas atau kalian cukup klik tombol beranda yang ada bagian menu navigasi header.

Jika kalian ada pertanyaan seputar postingan di atas silahkan bertanya melalui kolom komentar di bawah ini, dan terimakasih atas kunjungannya semoga bermanfaat buat kalian semua.
Seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    Belum ada Komentar untuk "Cara Terbaru Membuat Infinite Scroll ( Artikel Selanjutnya ) Terbaru Dan Responsive Di Blog Dengan Mudah"

    Posting Komentar

    Berkomentarlah dengan bahasa yang baik dan sopan

    - Promo Link
    - Berkata kasar, rasis dan provokator
    - Spaming

    Harap lapor jika ada link rusak dalam artikel

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel