Cara Membuat Infinite Scroll Blogger Tanpa Reload Cara Buat Blog- Infinite Scroll Blogger. Memuat Halaman Berikutnya Tanpa Reload

Biasanya ketika membuka halaman lain dari sebuah blog, khususnya yang berplatform Blogger (Blogspot), browser akan melaksanakan reload atau refresh terlebih dulu sebelum pergi ke halaman yang dituju. Script yang akan saya bagikan ini akan memuat halaman berikutnya dari Blogger tanpa perlu reload.

Ada dua jenis infinite scroll yang tersedia menurut event yang dilakukan:
  1. Auto load on scroll. Halaman berikutnya akan otomatis termuat dikala halaman discroll hingga batas selesai sehingga konten gres akan selalu muncul.
  2. Auto load on click. Pengunjung perlu melaksanakan klik pada tombol untuk memuat halaman berikutnya.

Infinite scroll akan otomatis memuat konten gres ketika pengunjung melaksanakan event yang ditentukan dan menempelkannya ke bab terbawah sajian navigasi halaman Blogger tanpa ada proses reload.

Cara Membuat Infinite Scroll Blogger Tanpa Reload

PERTAMA. Pastikan blog sudah terpasang library jQuery. Jika belum ada simpan instruksi berikut "DI BAWAH" <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>

KEDUA. Hapus semua CSS selector dari blog pager yang biasanya diberi nama #blog-pager. Jika ada banyak, pastikan hapus CSS blog pager yang ada di dalam tag kondisional multiple items isMultipleItems. Contohnya menyerupai ini.
#blog-pager-older-link {...} #blog-pager-older-link:hover {...} a.blog-pager-older-link {...} a.blog-pager-older-link:hover {...}

Lalu ganti semuanya dengan instruksi CSS ini.
/* Infinite Scroll Navigation */ #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:#008c5f; color:#fff; font-size:14px; font-weight:600; border-radius:3px; padding:10px 20px; display:inline-block; position:relative; transition:0.3s} #blog-pager-older-link a:hover {background:#ed4044}

KETIGA. Carilah instruksi ini.
<b:includable id='nextprev'>

Kalau tidak ada carilah instruksi ini. Pasti ada banyak. Pilihlah yang berada di dalam area widget Blog1.
<b:includable id='postPagination' var='post'>

Lalu hapus semua dan ganti dengan instruksi berikut.
<b:includable id='nextprev'> <!-- Jika tidak ada, carilah <b:includable id='postPagination' var='post'>. Ganti isinya sama menyerupai di bawah ini -->   <div class='blog-pager' id='blog-pager'>     <b:if cond='data:newerPageUrl'>       <span id='blog-pager-newer-link'>         <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>       </span>     </b:if>     <b:if cond='data:olderPageUrl'>       <span id='blog-pager-older-link'>         <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>           Load More         </a>       </span>     </b:if>     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>     <b:if cond='data:mobileLinkUrl'>       <div class='blog-mobile-link'>         <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>       </div>     </b:if>   </div>   <div class='clear'/> </b:includable>
Load More yaitu goresan pena di tombol. Kamu dapat ganti sesukanya.

KEEMPAT. Simpan script dari infinite scroll Blogger ini "DI ATAS" </body>.
<b:if cond='data:view.isMultipleItems'>   <script> //<![CDATA[   // Infinite Scroll Blogger   !function(ignielScroll) {     var auto = true; // true atau false     var img = 'https://4.bp.blogspot.com/-a8y2WkWKzU0/W90DTo4X29I/AAAAAAAAG2c/5FWxJt9VaYUM7Mz-bH0emW3A50lJxCltQCLcBGAs/s1600/igniel-loading.gif';     eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('B a=["\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e","\\I\\t\\c\\d\\f\\i\\g\\d\\k\\l\\k","\\e\\b\\D\\d\\G\\b","\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\j\\b\\U\\b\\e\\i\\c\\h\\j\\w","\\y\\h\\j\\p","\\n\\c\\h\\n\\w","\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\d\\c\\p\\b\\e\\i\\c\\h\\j\\w\\F\\m","\\r\\e\\b\\y","\\c\\b\\j\\f\\l\\r","\\I\\g\\d\\k\\l","\\s\\p\\h\\G\\u\\s\\C\\p\\h\\G\\u","\\r\\l\\D\\c","\\m\\g\\g\\b\\j\\p","\\n\\c\\d\\j\\b","\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\d\\c\\p\\b\\e\\i\\c\\h\\j\\w","\\f\\b\\l","\\s\\k\\g\\m\\j\\u\\s\\h\\D\\f\\F\\k\\e\\n\\P\\J","\\J\\C\\u\\s\\C\\k\\g\\m\\j\\u","\\e\\b\\g\\c\\m\\n\\b\\Y\\h\\l\\r","\\d\\j","\\k\\n\\e\\d\\c\\c\\F\\e\\b\\k\\h\\O\\b","\\k\\n\\e\\d\\c\\c\\N\\d\\g","\\r\\b\\h\\f\\r\\l","\\l\\d\\g","\\d\\y\\y\\k\\b\\l","\\l\\e\\h\\f\\f\\b\\e"];B q=o(a[0]),K=o(a[1]),z=L;q[a[4]](a[3])[a[2]](),q[a[19]](a[5],a[6],E(){1c o[a[15]](x[a[7]],{},E(A){B H=o(A)[a[4]](a[9])[a[8]]?o(A):o(a[10]);K[a[12]](H[a[4]](a[1])[a[11]]()),q[a[11]](H[a[4]](a[14])[a[13]]());z=L},a[11]),o(x)[a[18]](a[16]+Z+a[17]),!1});M(1a){$(1b)[a[19]](a[W],E(){M(!z&&($(x)[a[V]]()+$(x)[a[R]]())>=q[a[Q]]()[a[S]]){q[a[4]](a[6])[a[T]](a[5]);z=X}})}',62,75,'||||||||||_0x143a|x65|x6C|x6F|x72|x67|x70|x69|x2D|x6E|x73|x74|x61|x63|ignielScroll|x64|pager|x68|x3C|x62|x3E|x23|x6B|this|x66|loading|_0x5348x4|var|x2F|x6D|function|x20|x76|_0x5348x5|x2E|x22|post|false|if|x54|x7A|x3D|24|22|23|25|x77|21|20|true|x57|img|||||||||||auto|window|return'.split('|'),0,{}));   }(jQuery);   //]]> </script> </b:if>

PENGATURAN
VariableKeterangan
var auto Pengaturan untuk auto load atau tidak.
true: Postingan berikutnya muncul otomatis tanpa perlu klik dikala halaman sudah hingga batas akhir.
false: Postingan berikutnya tidak muncul otomatis dan pengunjung perlu melaksanakan klik pada tombol terlebih dulu.
var img URL dari gambar yang tampil ketika proses loading.

Terakhir simpan template dan lihatlah hasilnya. Infinite scroll tanpa refresh ini akan berdampak pada multiple items, yaitu halaman homepage, halaman arsip, halaman pencarian label, dan halaman pencarian menurut query.

Tambahan

Kalau sajian navigasi homepage di template kau sudah dilengkapi dengan script custom lain menyerupai navigasi bernomor maka scriptnya wajib dihapus biar tidak terjadi bentrok.

Saya rasa sudah cukup detail alasannya yaitu pengaturannya memang tidak banyak. Kamu hanya perlu teliti mencari nama class dan id dari CSS dan HTML alasannya yaitu instruksi setiap template berbeda jadi banyak yang gundah menerapkannya. Tapi bila sabar dan mau mencoba niscaya sukses menyerupai demo berikut ini.

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours