Breaking News

Seo

Infinite Scroll Blogger. Memuat Halaman Berikutnya Tanpa Reload

Cara Membuat Infinite Scroll Blogger Tanpa Reload

  1. Auto load on scroll. Halaman berikutnya akan otomatis termuat saat halaman discroll hingga batas akhir sehingga konten baru akan selalu muncul.

  • Auto load on click. Pengunjung perlu melakukan klik pada tombol buat memuat laman berikutnya.
  • Infinite scroll akan otomatis memuat konten baru ketika pengunjung melakukan event yang ditentukan & menempelkannya ke bagian terbawah sajian navigasi page Blogger tanpa terdapat proses reload.

    Cara Membuat Infinite Scroll Blogger Tanpa Reload

    PERTAMA. Pastikan blog sudah terpasang library jQuery. Jika belum ada simpan kode 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 seperti ini.

    			#blog-pager-older-link ...

    #blog-pager-older-link:hover ...

    A.Blog-pager-older-link ...

    A.Blog-pager-older-link:hover ...

    Lalu ganti semuanya menggunakan kode 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:0; border-radius:3px; padding:10px 20px; display:inline-block; position:relative; transition:0.3s

    #blog-pager-older-link a:hover background:#ed4044

    KETIGA. Carilah kode ini.

    			<b:includable id='nextprev'>

    Kalau tidak ada carilah kode ini. Pasti ada banyak. Pilihlah yang berada di dalam area widget Blog1.

    			<b:includable id='postPagination' var='post'>

    Lalu hapus semua dan ganti menggunakan kode berikut.

    			
    <b:includable id='nextprev'><!-- Jika tidak ada, carilah
    <b:includable id='postPagination' var='post'>. Ganti isinya sama seperti 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>

    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 autoPengaturan untuk auto load atau tidak.

    true: Postingan berikutnya muncul otomatis tanpa perlu klik saat halaman sudah sampai batas akhir.

    false: Postingan berikutnya tidak muncul otomatis dan pengunjung perlu melakukan klik pada tombol terlebih dulu.var imgURL 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 berdasarkan query.

    Tambahan

    Kalau menu navigasi homepage di template kamu sudah dilengkapi dengan script custom lain seperti navigasi bernomor</a> maka scriptnya wajib dihapus agar tidak terjadi bentrok.

    Saya rasa sudah cukup detail karena pengaturannya memang tidak banyak. Kamu hanya perlu teliti mencari nama class dan id dari CSS dan HTML karena kode setiap template berbeda jadi banyak yang bingung menerapkannya. Tapi kalau sabar dan mau mencoba pasti sukses seperti demo berikut ini.

    Load More adalah tulisan di tombol. Kamu bisa ganti sesukanya.

    Ada dua jenis infinite scroll yang tersedia berdasarkan event yang dilakukan:

    Biasanya ketika membuka halaman lain dari sebuah blog, khususnya yang berplatform Blogger (Blogspot), browser akan melakukan 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.

    Infinite Scroll Blogger. Memuat Halaman Berikutnya Tanpa Reload Reviewed by Andi Leangle on Juli 31, 2020 Rating: 5

    Tidak ada komentar:

    All Rights Reserved by Belajar Seo Dan Link © 2017
    Powered By Blogger, Share by Andi Leangle

    Hubungi Kami

    Nama

    Email *

    Pesan *

    Diberdayakan oleh Blogger.