×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Memasang Infinite Scroll (No Reload) di Blogger


Haii teman-teman blogger, pada postingan blog kali ini saya akan membuat bagaimana cara memasang infinite scroll (no reload) diblogger, tutorial ini sebenarnya udah ada diblog Igniel.com, disitu dijelaskan dengan baik mengenai infinite scroll.

Infinite scroll merupakan sebuah script yang berguna untuk memuat halaman tanpa harus refresh ke halaman berikutnya, yang berarti jika kamu menggunakan infinite scroll pada web kamu khususnya platform blogger kamu tidak perlu melakukan refresh halaman jika ingin ke postingan berikutnya.

Infinite scroll juga ada 2 jenis, yaitu :
  1. Auto load on scroll, jenis ini merupakan jenis infinite scroll tanpa perlu harus mengklik tombol Load More (Infinite Scroll), jadi dengan menggunakan ini tidak perlu lagi repot repot mengklik tombolnya,
  2. Auto load on click, jenis ini merupakan jenis infinite scroll yang diharuskan untuk mengklik tombol Load More (Infinite Scroll). jadi untuk memuat postingan berikutnya kamu harus mengklik tombol tersebut.
Pengguna platform blogger banyak menggunakan infinite scroll, namun saya pernah membaca disalah satu web LogRocket ( salah satu situs blog dari barat ) bahwa menggunakan infinite scroll itu tidak perlu (walaupun saya tetap make sih :v), Mengapa ? Dipostingan berikutnya akan saya bahas :'D soalnya ada begitu banyak penjelasannya :v. Oke langsung saja simak tutorial dibawah ini.

Cara Memasang Infinite Scroll DiBlogger
Penting !! Pastikan kamu sudah memasang jquery diblog kamu, jika belum salin script dibawah ini dan letakkan tepat diantara <head> </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>
  1. Pertama, login dulu ke Blogger,
  2. Buka menu Tema > Edit HTML,
  3. Jika kamu menggunakan template Viomagz, kamu tidak perlu menghapus #blog-pager seperti yang disarankan Igniel.com, kemudian copy kode CSS dibawah ini dan letakkan tepat dibawah </b:template-skin>,
    <b:if cond='!data:view.isSingleItem'>
      <style type='text/css'>
    #blog-pager svg {height:24px;width:24px;vertical-align:-6px;margin-right:10px}
    #blog-pager svg path {fill:#fff}
    #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:#ff69b4;float: none;color:#fff; font-size:14px; font-weight:600; border-radius:3px; padding:7px 15px; display:inline-block; position:relative; transition:0.3s}
    #blog-pager-older-link a:hover {background: #e60073;}
    </style>
      </b:if>
    
    namun jika kalian tidak menggunakan template Viomagz, kalian hapus  #blog-pager, kurang lebih seperti ini kode CSSnya, 
    #blog-pager-older-link {...} 
    #blog-pager-older-link:hover {...} 
    a.blog-pager-older-link {...} 
    a.blog-pager-older-link:hover {...}
    
  4. Selanjutnya, masih di Edit HTML, kalian copy kode javascript dibawah ini dan letakkan tepat diatas  </body>,
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <b:if cond='data:view.isMultipleItems'>
      <script> //<![CDATA[
      // Infinite Scroll Blogger
      !function(ignielScroll) {
        var auto = false;
        var img = 'https://1.bp.blogspot.com/-R9YKzIdHZAc/Xf3b-A-7fnI/AAAAAAAABMM/j8vlGdYVHDggAJOMMFO9Da-zrjW2-u-kwCLcBGAsYHQ/s1600/AnirockLoading.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>
      </b:if>
    </b:if>
  5. Kemudian cari kode berikut <b:includable id='nextprev'> atau
     <b:includable id='postPagination' var='post'>, dan hapus semua kode HTML yang ada didalam tersebut, dan ganti dengan kode HTML dibawah ini
     <b:includable id='nextprev'> 
    <!-- DIBAWAH INI ADALAH ISINYA -->
     <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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Prev</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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
                   <b:if cond='data:blog.pageType == &quot;item&quot;'>Next<b:else/><svg viewBox='0 0 24 24'><path d='M2 12C2 16.97 6.03 21 11 21C13.39 21 15.68 20.06 17.4 18.4L15.9 16.9C14.63 18.25 12.86 19 11 19C4.76 19 1.64 11.46 6.05 7.05C10.46 2.64 18 5.77 18 12H15L19 16H19.1L23 12H20C20 7.03 15.97 3 11 3C6.03 3 2 7.03 2 12Z'/></svg>Load More</b:if>
            </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'/>
    <!-- BATAS ISINYA -->
    </b:includable>
  6. Jika template kamu menggunakan halaman navigasi bernomor, silahkan hapus.
    Untuk template Viomagz silahkan cari kode dibawah ini dan HAPUS SEMUANYA, jika kamu bukan pengguna template Viomagz silahkan cari sendiri kode navigasinya.
    <b:if cond='data:blog.isMobile == &quot;false&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <!-- JAVASCRIPT NAVIGASI HALAMAN BERNOMOR -->
    <script>
    var perPage=8;
    var numPages=6;
    var firstText ='<b:switch var='data:blog.locale'><b:case value='id' />Pertama<b:default />First</b:switch>';
    var lastText ='<b:switch var='data:blog.locale'><b:case value='id' />Terakhir<b:default />Last</b:switch>';
    var prevText ='&#8250; <b:switch var='data:blog.locale'><b:case value='id' />Sebelumnya<b:default />Prev</b:switch>';
    var nextText ='<b:switch var='data:blog.locale'><b:case value='id' />Selanjutnya<b:default />Next</b:switch> &#8250;';
    var urlactivepage=location.href;
    var home_page="/";
    </script>
    <script>
    //<![CDATA[
    if(numberedPagination==1){
    if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;
    ...
    ...
    ...
    label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}
    };
    //]]>
    </script>
    </b:if>
    </b:if>
    </b:if>
    
  7. Terakhir simpan template/save.
Untuk demonya kalian dapat melihat dihomepage atau beranda blog ini, jika ada kesalahan saya dalam menuliskan kode atau tidak dapat kamu mengerti silahkan beri komentar, Itulah tutorial singkat yang dapat saya bagikan.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

5 Responses to "Cara Memasang Infinite Scroll (No Reload) di Blogger"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Work bang, enak pake auto scroll. tapi lama kelamaan blog bisa berat karena banyak yang dimuat.

    ReplyDelete
    Replies
    1. Iya mas betul juga, makanya saya udah berencana untuk melepas auto scroll ini

      Delete
  2. Cara buat tampilan profil penulis dibawah postingan itu.. Ada kode nya nga yaa..

    ReplyDelete
    Replies
    1. Enggak ada kodenya

      itu cuma kode yang udah aja dipindahin

      Delete
  3. Mantap Sangat bermanfaat~ sering - sering buat kek beginian ya~

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With