Home / Tutorial

Membuat Infinite Scroll Blogger, Untuk Mempercepat Loading Blog

Post a Comment
Membuat Infinite Scroll Blogger, Untuk Mempercepat Loading Blog

Membuat Infinite Scroll Blogger, Untuk Mempercepat Loading Blog adalah tutorial kali ini yang akan di buat oleh Sudar Blogger. Tentu dengan membuat Infinite scroll ini akan menambah kecepatan loading blog ditambah lagi pengunjung tentu tidak akan memuat halaman atau pindah halaman saat melihat postingan di blog.

Ada dua jenis infinite scroll pada Blogger yaitu :


  1. Auto Load Scroll, dimana konten akan dimuat apabila sudah di scroll sampai batas akhir
  2. Auto Load on Click, dimana harus diklik dulu apabila ingin memuat konten pada halaman

Terus enak yang mana untuk blog kamu, kedua jenis itu sama aja, itupun sesuai selaras kamu. Bagaimana caranya membuat infinite scroll ini, simak aja artikel ini . 

Cara Membuat Infinite Scroll Blogger

Langkah pertama kalian buka Dashboard Blogger > Tema, kemudian cari kode </head> kemudian simpan kode dibawah ini


&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot; async=&quot;async&quot;/&gt;
Kemudian hapus saja CSS selector yang bisanya di beri nama #blog-paper, apabila ada banyak kalian hapus aja di tag conditional isMultipleIntems, ganti dengan CSS dibawah ini
/* Infinite Scroll SudarBlogger */
#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}

Cari kode seperti di bawah ini

&lt;b:includable id=&#039;nextprev&#039;&gt;

Hapus semua, kemudian ganti kode tersebut dengan kode yang ada  dibawah ini


&lt;b:includable id=&#039;nextprev&#039;&gt; &lt;!-- Jika tidak ada, carilah &lt;b:includable id=&#039;postPagination&#039; var=&#039;post&#039;&gt;. Ganti isinya sama seperti di bawah ini --&gt;  &lt;div class=&#039;blog-pager&#039; id=&#039;blog-pager&#039;&gt;    &lt;b:if cond=&#039;data:newerPageUrl&#039;&gt;      &lt;span id=&#039;blog-pager-newer-link&#039;&gt;        &lt;a class=&#039;blog-pager-newer-link&#039; expr:href=&#039;data:newerPageUrl&#039; expr:id=&#039;data:widget.instanceId + &quot;_blog-pager-newer-link&quot;&#039; expr:title=&#039;data:newerPageTitle&#039;&gt;&lt;data:newerPageTitle/&gt;&lt;/a&gt;      &lt;/span&gt;    &lt;/b:if&gt;    &lt;b:if cond=&#039;data:olderPageUrl&#039;&gt;      &lt;span id=&#039;blog-pager-older-link&#039;&gt;        &lt;a class=&#039;blog-pager-older-link&#039; expr:href=&#039;data:olderPageUrl&#039; expr:id=&#039;data:widget.instanceId + &quot;_blog-pager-older-link&quot;&#039; expr:title=&#039;data:olderPageTitle&#039;&gt;          Load More        &lt;/a&gt;nbsp;     &lt;/span&gt;    &lt;/b:if&gt;    &lt;a class=&#039;home-link&#039; expr:href=&#039;data:blog.homepageUrl&#039;&gt;&lt;data:homeMsg/&gt;&lt;/a&gt;    &lt;b:if cond=&#039;data:mobileLinkUrl&#039;&gt;      &lt;div class=&#039;blog-mobile-link&#039;&gt;        &lt;a expr:href=&#039;data:mobileLinkUrl&#039;&gt;&lt;data:mobileLinkMsg/&gt;&lt;/a&gt;      &lt;/div&gt;    &lt;/b:if&gt;  &lt;/div&gt;  &lt;div class=&#039;clear&#039;/&gt;&lt;/b:includable&gt;


Load More adalah tulisan pada tombol bisa diganti terserah kalian

Langkah terakhir cari kode </body> masukkan kode dibawah ini diatasnya

&lt;b:if cond=&#039;data:view.isMultipleItems&#039;&gt;
  &lt;script&gt; //&lt;![CDATA[
  // Infinite Scroll Blogger
  !function(ignielScroll) {
    var auto = true; // true atau false
    var img = &#039;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPwtZ6NXNwol4YgBe_0f6K2QiUgshOHS-pNIasJ1rlBDTh3xIEvg6yV2sOuL5MOpbnUUcWtQxHtoNNQ-I1mUWIHcyh4EUPApbcngNYgskKSb0dqGzIKbfsEsKORw2jcZ_WhtC-t84Tw3c8/s1600/igniel-loading.gif&#039;;
    eval(function(p,a,c,k,e,d){e=function(c){return(c&lt;a?&#039;&#039;:e(parseInt(c/a)))+((c=c%a)&gt;35?String.fromCharCode(c+29):c.toString(36))};if(!&#039;&#039;.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return&#039;\\w+&#039;};c=1};while(c--){if(k[c]){p=p.replace(new RegExp(&#039;\\b&#039;+e(c)+&#039;\\b&#039;,&#039;g&#039;),k[c])}}return p}(&#039;B a=[&quot;\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e&quot;,&quot;\\I\\t\\c\\d\\f\\i\\g\\d\\k\\l\\k&quot;,&quot;\\e\\b\\D\\d\\G\\b&quot;,&quot;\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\j\\b\\U\\b\\e\\i\\c\\h\\j\\w&quot;,&quot;\\y\\h\\j\\p&quot;,&quot;\\n\\c\\h\\n\\w&quot;,&quot;\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\d\\c\\p\\b\\e\\i\\c\\h\\j\\w\\F\\m&quot;,&quot;\\r\\e\\b\\y&quot;,&quot;\\c\\b\\j\\f\\l\\r&quot;,&quot;\\I\\g\\d\\k\\l&quot;,&quot;\\s\\p\\h\\G\\u\\s\\C\\p\\h\\G\\u&quot;,&quot;\\r\\l\\D\\c&quot;,&quot;\\m\\g\\g\\b\\j\\p&quot;,&quot;\\n\\c\\d\\j\\b&quot;,&quot;\\v\\t\\c\\d\\f\\i\\g\\m\\f\\b\\e\\i\\d\\c\\p\\b\\e\\i\\c\\h\\j\\w&quot;,&quot;\\f\\b\\l&quot;,&quot;\\s\\k\\g\\m\\j\\u\\s\\h\\D\\f\\F\\k\\e\\n\\P\\J&quot;,&quot;\\J\\C\\u\\s\\C\\k\\g\\m\\j\\u&quot;,&quot;\\e\\b\\g\\c\\m\\n\\b\\Y\\h\\l\\r&quot;,&quot;\\d\\j&quot;,&quot;\\k\\n\\e\\d\\c\\c\\F\\e\\b\\k\\h\\O\\b&quot;,&quot;\\k\\n\\e\\d\\c\\c\\N\\d\\g&quot;,&quot;\\r\\b\\h\\f\\r\\l&quot;,&quot;\\l\\d\\g&quot;,&quot;\\d\\y\\y\\k\\b\\l&quot;,&quot;\\l\\e\\h\\f\\f\\b\\e&quot;];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&amp;&amp;($(x)[a[V]]()+$(x)[a[R]]())&gt;=q[a[Q]]()[a[S]]){q[a[4]](a[6])[a[T]](a[5]);z=X}})}&#039;,62,75,&#039;||||||||||_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&#039;.split(&#039;|&#039;),0,{}));
  }(jQuery);
  //]]&gt; &lt;/script&gt;
&lt;/b:if&gt;
Kemudian klik Simpan Tema, setelah itu buka blog kamu apakah berhasil atau tidak atau reflesh blog kamu. 

Itulah tutorial Cara Membuat Infinite Scroll Blogger, selamat mencoba. Wassalam 

Post a Comment for "Membuat Infinite Scroll Blogger, Untuk Mempercepat Loading Blog"

Post a Comment