Infinite Scroll Blogger. Memuat Halaman Berikutnya Tanpa Reload

Cara Membuat Infinite Scroll Blogger Tanpa Reload

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.

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

  1. Auto load on scroll. Halaman berikutnya akan otomatis termuat saat halaman discroll sampai batas akhir sehingga konten baru akan selalu muncul.
  2. Auto load on click. Pengunjung perlu melakukan klik pada tombol untuk memuat halaman berikutnya.

Infinite scroll akan otomatis memuat konten baru ketika pengunjung melakukan event yang ditentukan dan menempelkannya ke bagian terbawah menu navigasi halaman Blogger tanpa ada proses reload.


Cara Membuat Infinite Scroll Blogger Tanpa Reload

#1 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"/>


#2 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 dengan 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:600; border-radius:3px; padding:10px 20px; display:inline-block; position:relative; transition:0.3s}
#blog-pager-older-link a:hover {background:#ed4044}


#3 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 dengan 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>
Load More adalah tulisan di tombol. Kamu bisa ganti sesukanya.


#4 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>
VariableKeterangan
var auto Pengaturan 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 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 berdasarkan query.


Tambahan

Kalau menu navigasi homepage di template kamu sudah dilengkapi dengan script custom lain seperti navigasi bernomor 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.

Artikel Terkait

82 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Rguezpjm
    2/2/22
    Profil: https://www.blogger.com/profile/11892825305161500944
    No funciona
  • KUSTIANA MARA
    5/1/22
    Profil: https://www.blogger.com/profile/14662716179159720139
    Wah makasih min info nya
  • Black Cinema
    14/10/21
    Profil: https://www.blogger.com/profile/00826145489072436920
    Bang Mau nanya, gua udah coba dan berhasil tapi saat ditekan load more berhasil keluar artikel tapi gambarnya menjadi burik
  • K K UPGRADER
    15/8/21
    Profil: https://www.blogger.com/profile/04316583289361519993
    Can i add any html content instead of image???
  • Rifqi Alfi
    12/5/21
    Profil: https://www.blogger.com/profile/14127912114433592941
    Mantap mbak...Dah jadi ni makasi banyak!...komentarnya banyak amat...kudu scroll 5 detik dulu
  • uji coba template
    15/2/21
    Profil: https://www.blogger.com/profile/08066987977044208980
    Mbak tolong buatin juga infinite scroll di dalam postingan dong mbak. supaya sehabis baca artikel sampai paling bawah/sampai footer, pengunjung langsung diarahkan ke artikel selanjutnya yang terbaru. ada ngga tutorialnya mbak? Terimakasih.
    • Jurnalis
      13/6/21
      Profil: https://www.blogger.com/profile/10668643000251508781
      Cari kode mentahnya di dte, disana ada kode mentahnya gak di enkripsi dan bisa dimodifikasi. Kalau yang ini nggak bisa dimodifikasi, gambar² sama iframe² yg dikasih Lazyload gak akan muncul kalau pake Yang ini.
  • Dwi Ari wijaya
    9/2/21
    Profil: https://www.blogger.com/profile/16464795224070262409
    Masih bingung make tamplate viomagz
  • Syarif Annur
    1/2/21
    Profil: https://www.blogger.com/profile/07454987486058578030
    maz bikin artikel auto scroll dong
  • Assa
    2/12/20
    Profil: https://www.blogger.com/profile/01181696575872615271
    Di fiksioner susah
  • Brianna Austin
    18/8/20
    Profil: https://www.blogger.com/profile/12977071835295501006
    Saya sedang mencari auto load post pada page single item, apakah bisa?
  • Jurnalis
    3/7/20
    Profil: https://www.blogger.com/profile/10668643000251508781
    Kak URL sama page title gak berubah ya? Bantu biar URL, page title, serta hostory next page nya ada.
  • Arjun Lap
    2/7/20
    Profil: https://www.blogger.com/profile/18040695121857603984
    Saya Coba di viomagz versi terbaru gambar di next nya gak muncul mbak. mungkin karena bnetrok sama lazyload nya kali ya
    • karirjogja
      12/3/22
      Profil: https://www.blogger.com/profile/17892957027512683508
      benar viomag versi lama bisa versi baru tidak mau
  • Jurnalis
    29/6/20
    Profil: https://www.blogger.com/profile/10668643000251508781
    Pertanyaanku gak dijawab.
  • Jurnalis
    15/6/20
    Profil: https://www.blogger.com/profile/10668643000251508781
    Kak igniel tambahin fungsi buat execute script after load.
  • Nakama Shinbun
    14/5/20
    Profil: https://www.blogger.com/profile/10988635916726447537
    Setelah saya terapkan kenapa ya kok thumbnail di next post nya jadi ngeblur? Mohon solusi nya mbak
  • Leo nandos
    13/4/20
    Profil: https://www.blogger.com/profile/10185256827686988403
    sangat bermanfaat sekali...!!!
  • ndisaen.com
    25/3/20
    Profil: https://www.blogger.com/profile/12027183432486620009
    di blog saya tidak work atau tombol load morenya tidak jalan, blog saya menggunakan template bootstrap. Sepertinya tabrakan dengan jquery bootstrap saya
    • Wernayasa
      1/4/20
      Profil: https://www.blogger.com/profile/09171272848542294839
      coba buang code async="async"
      work gan di template saya
  • Master Search
    31/12/19
    Profil: https://www.blogger.com/profile/06474149002048504696
    Udah bolak balik aku embak terap gax bisa di template viotoko udah lambat alon2 aku teliti .ahh malah pusing .coba deh embak pasangin di viotoko nanti aku liat demo nya
    • Wernayasa
      4/3/20
      Profil: https://www.blogger.com/profile/09171272848542294839
      Buang code ini async="async"
      Cari di JQuery ajax
  • Master Search
    31/12/19
    Profil: https://www.blogger.com/profile/06474149002048504696
    Udah bolak balik aku embak terap gax bisa di template viotoko udah lambat alon2 aku teliti .ahh malah pusing .coba deh embak pasangin di viotoko nanti aku liat demo nya
  • Jurnalis
    28/12/19
    Profil: https://www.blogger.com/profile/10668643000251508781
    Mau nanya kak kenapa javascriptnya dienkripsi?
  • Yayan Andriansyah
    21/12/19
    Profil: https://www.blogger.com/profile/01724588373619213598
    tutornya berhasil. cuman di halaman postingan jadi muncul navigasinya. cara ngilanginnya gimana.?
  • sumit
    5/10/19
    Profil: https://www.blogger.com/profile/05046674015142461990
    Hii this is my blog :https://whoopmeloud.blogspot.com/ .Auto load more post is not working. Please Help !!!
  • sumit
    5/10/19
    Profil: https://www.blogger.com/profile/05046674015142461990
    Hii this is my blog https://whoopmeloud.blogspot.com/ .. auto load more post is not working . please help !!!
  • Abdul Rahim
    29/9/19
    Profil: https://www.blogger.com/profile/18324895804097516935
    Kalo untuk dihalamn single post gimana mbak?contohnya kya yg di jalantikus.com
  • Riza Pinandita
    28/9/19
    Profil: https://www.blogger.com/profile/03685002514100777991
    Bedanya cara masang kaya di penjelasan ama masukin kode ini doang di atas apa mbak?

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    function resizeThumb(e,n){for(var t=document.getElementById(e).getElementsByTagName("img"),a=0;a<t.length;a++)t[a].src=t[a].src.replace(//s72-c/,"/s"+n+"-c")}window.labelfx=function(){var e=function(e){var n=e||{},t=n.url_blog||window.location.host,a=n.id_labelcontent||"#labelfxn";$.ajax({url:"https://"+t+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var n=e.feed.category,t="";if(void 0!==n){t="<ul class='labelx'>";for(var i=0;i<n.length;i++)t+='<li><a href="/search/label/'+encodeURIComponent(n[i].term)+'" target="_blank">'+n[i].term+"</a></li>";t+="</ul>",$(a).html(t)}else $(a).html("<span>No Label!</span>")},error:function(){$(a).html("<strong>Error Loading Feed!</strong>")}})};return function(n){e(n)}}(),resizeThumb("main",250),labelfx(),function(e){function n(n){e.getScript("http://"+n+".disqus.com/blogger_index.js")}function t(){s||(s=!0,o?(r.find("a").hide(),r.find("img").show(),e.ajax(o,{dataType:"html"}).done(function(t){var a=e("<div></div>").append(t.replace(l,"")),i=a.find("a.blog-pager-older-link");i?o=i.attr("href"):(o="",r.hide());var p=a.find(d).children(".date-outer");e(d).append(p),resizeThumb("main",250),window._gaq&&window._gaq.push(["_trackPageview",o]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&n(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),r.find("img").hide(),r.find("a").show(),s=!1})):r.hide())}function a(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(o=e("a.blog-pager-older-link").attr("href"))){var n=e('<a class="loadpost" href="javascript:;" style="text-decoration:none;font:11px Open Sans, sans-serif;letter-spacing:1px;padding:14px 20px;background:#0d82df;color:#ffffff;">Load More</a>');n.click(t);var a=e('<img src="'+i+'" style="display: none;">');(r=e('<div style="display:block;text-align:center;margin:20px auto;"></div>')).append(n),r.append(a),r.insertBefore(e("#blog-pager")),e("#blog-pager").hide()}}var i="https://1.bp.blogspot.com/-6_Eha7PSRy0/WXI6jskHE9I/AAAAAAAAMB0/6iFQ2qywS2kaNA2evWgsUb51zjRFf69cQCLcBGAs/s1600/loader.gif",o="",r=null,d="div.blog-posts",s=!1,l=(e(window),e(document),/<scriptb[^<]*(?:(?!</script>)<[^<]*)*</script>/gi);e(document).ready(a)}(jQuery);
    //]]>
    </script>
    </b:if></b:if>
  • Malestea
    20/9/19
    Profil: https://www.blogger.com/profile/01230509647052706348
    saya coba not work mba di template dengan v3 seperti milik contempo malah seperti next prev biasanya paling jika ada work cuman tidak tampil apapun alias blank ngak bertambah postnya.
  • Sanbers Studio
    11/9/19
    Profil: https://www.blogger.com/profile/00399540338304472941
    dicoba di ignilplex, berhasil.. tapi gambarnya tidak muncul... prev: lirik.sanbersstudio.com
    • Sanbers Studio
      13/9/19
      Profil: https://www.blogger.com/profile/00399540338304472941
      sdh jadi... setelah sy rubah juga kode di Snippet-Thumbnail-nya... Thanks!!
    • Ikhsan Maulana
      6/1/20
      Profil: https://www.blogger.com/profile/16332222388883358041
      Dirubah bagian mana bang? Di saya abis loading gk muncul postingannya pake template fiksioner.
  • Josie kartika
    5/8/19
    Profil: https://www.blogger.com/profile/13461952989630812030
    Saya sudah berkeliling banyak tutorial blogspot yang kasih cara untuk buat auto load next page...tapi saya rasa cuma yang ini yang terbaik...dan sudah saya terapkan di blog saya... terima kasih mba atas tutorial nya...boleh saya share ulang yah mba..dan pasti saya sebutkan sumber artikel nya...semoga sukses..
  • Erik Hariansah
    15/7/19
    Profil: https://www.blogger.com/profile/02694044177157308115
    Cara menghilangkan status msg wrap di antara postingan itu bagaimana mbak?
    • Igniel
      16/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      msg wrap apa ya? Kaya gimana?
  • akhy
    8/7/19
    Profil: https://www.blogger.com/profile/11548272598357368918
    Apa ignil, com juga pake ini kak?
    • Igniel
      9/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya pake.
  • Admin
    26/4/19
    Profil: https://www.blogger.com/profile/14379259235687138877
    Kode ngak hanya bekerja pada homepage saja..
    dan tidak dapat loading otomatis pada posting..
    disini saya terapkan tokofaradisa.blogspot.com
    • Igniel
      9/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ya memang cuma buat di homepage.
  • deva
    25/4/19
    Profil: https://www.blogger.com/profile/00000406049880204254
    Aku coba di template tektrim gabisa auto mbak... gmana .?
  • Andrie Kristianto
    3/3/19
    Profil: https://www.blogger.com/profile/08210527234493534744
    saya juga gagal di blog yang saya punya, kenapa yaa... malah post blognya jadi berantakan
  • Zenny
    18/2/19
    Profil: https://www.blogger.com/profile/11077035248093956513
    Saya coba edit di template igniplex tapi sayang na gagal. setelah saya coba ganti dari beberapa kode di atas, tiba" postingan saya keredirect ke blog nya mba. :D Apa salah saya, :D
  • Surya Fitrianto
    27/12/18
    Profil: https://www.blogger.com/profile/12899565055973334374
    thanks mbak sukses, saya senang hehe
  • Zuhri Nevata
    21/12/18
    Profil: https://www.blogger.com/profile/01047625226218691166
    Mba ketika sudah memuat ko gambarnya menjadi blur, adakah solusi nya, untuk gambar awal 2 setelah dimuat semuanya blur kecuali yang dua itu saja mba
  • Giri Diwa Adam
    19/12/18
    Profil: https://www.blogger.com/profile/11346759223421693465
    Thanks Mbak,Work.Terimakasih Izin Share Ulang Boleh ??
  • Rohim Nurarifin
    8/12/18
    Profil: https://www.blogger.com/profile/17707752688993059273
    Mbak thumbnail script sudah saya ganti ngga pake script.. dan work tapi kok tampilannya jadi begini yah??

    ini gambarnya mbak

    https://3.bp.blogspot.com/-zZjoRMy1SI0/XAudTFWRjzI/AAAAAAAABl4/sFKBEDTDdmMfwHm3yBBbkgfKBInMsZ1XQCLcBGAs/s320/anehbinajaib.jpg

    tolong bantuannya mbak.. makasih :)
    • Igniel
      10/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada apa dengan tampilannya? Keliatannya thumbnail muncul.
    • Zuhri Nevata
      22/12/18
      Profil: https://www.blogger.com/profile/01047625226218691166
      Kalau saya tampilan imagenya pas di load malah ngeblur mba adakah solusinya?
  • Rohim Nurarifin
    16/11/18
    Profil: https://www.blogger.com/profile/17707752688993059273
    sudah saya pasang dan work tapi di saat mau "load more" malah ke redirect gambar tumbhnail blog yah mbak?

    coba tolong cek apanya yang salah mbak diblog saya 18haulinindo.blogspot.com
    • Igniel
      16/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Template yang dipake masih pake JS buat ambil thumbnail.

      Solusinya ngambil thumbnail harus pake kode Blogger aja.

      Cek disini:
      https://www.igniel.com/2018/08/membuat-resize-thumbnail-blogger-tanpa-script.html
    • Rohim Nurarifin
      17/11/18
      Profil: https://www.blogger.com/profile/17707752688993059273
      oh ngaruh mbak... iyah template saya versi tahun 2015 skrng lagi saya design ulang salah satunya page navigationnya error yang lama jadi skrng mau saya rubah...
  • defantri.com
    13/11/18
    Profil: https://www.blogger.com/profile/07126573827912835475
    di save,, jadi pengan ganti template setelah baca yang ini..
    bisa untuk yang amp ini atau tidak mbak
    • Igniel
      13/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Belum bisa untuk AMP.
  • Rohim Nurarifin
    7/11/18
    Profil: https://www.blogger.com/profile/17707752688993059273
    oh iya satu lagi mbak... punya css atau script load page? soalnya blog saya kalo reload suka ngeblank dulu baru muncul postnya (ngga berat sih loadnya,tapi suka blank dulu kalo load)

    kalo punya mbak kan kelihatan wrapper postnya terlebih dahulu sebelum postnya ke load sempurna

    Thank you :)
  • Rohim Nurarifin
    6/11/18
    Profil: https://www.blogger.com/profile/17707752688993059273
    kira-kira ngebratin loading blog ngga mbak kalau postnya muncul semua (auto load post)
    soalnya blog saya tentang mod-mod game..coba dilihat web saya mbak 18haulinindo.blogcepot.com
    • Igniel
      6/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak memberatkan. Kalau loadnya udah banyak banget sampai puluhan kali pasti berat. Tapi jarang juga ada visitor yang load sampai puluhan kali.

      Pakai event onclick aja biar auto loadnya baru muncul kalau diklik.
    • Rohim Nurarifin
      7/11/18
      Profil: https://www.blogger.com/profile/17707752688993059273
      Siap tak coba...
  • Ahmad Farid
    5/11/18
    Profil: https://www.blogger.com/profile/02411160940732599413
    ini to blogger yang aku kira cowok haha
  • Kaila Sherly Sifabella
    5/11/18
    Profil: https://www.blogger.com/profile/16948221399226909608
    Niche post mastih,,tapi gak ngaruh untuk template Viomax,,CSS nya sangat rumit,,
    • Igniel
      5/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak juga. Udah saya coba di template yang disebutkan dan work. Baca dan coba lagi pelan-pelan ya. Tinggal cari aja nama CSS yang sesuai dengan tutorial di atas dan ganti.
    • Fizi
      5/11/18
      Profil: https://www.blogger.com/profile/12664816184934381226
      asal sabar dan mau ngertiin cssnya bisa kok :D
    • Kaila Sherly Sifabella
      5/11/18
      Profil: https://www.blogger.com/profile/16948221399226909608
      Sudah saya coba mbak sesuai dengan tutor, memang sudah muncul load more nya tapi gak mau load otomatis,,jadi harus di klik manual,,
    • Kaila Sherly Sifabella
      5/11/18
      Profil: https://www.blogger.com/profile/16948221399226909608
      oh iya,,apa ini hanya berlaku untuk homepage saja? atau halaman postingan?
    • Igniel
      5/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Semua pertanyaan mas ada di postingan. Biasakan baca dulu sampai habis :)
      - Kalau mau otomatis atur dulu di scriptnya. Di tutorialnya dijelaskan.
      - Berlaku di halaman multiple items. Apa itu multiple items? Penjelasan ada di tutorialnya.
    • Kaila Sherly Sifabella
      5/11/18
      Profil: https://www.blogger.com/profile/16948221399226909608
      Ok saya coba lagi mbak,,terimakasih
  • Admin
    3/11/18
    Profil: https://www.blogger.com/profile/03567087638626893824
    javascript nya jangan diobfuscator bisa mbak?
    soalnya target elemen javascript di template yang saya beda
    • Admin
      3/11/18
      Profil: https://www.blogger.com/profile/03567087638626893824
      kalo versi dte punya saya begini mbak,
      "target: {
      posts: '.items',
      post: '.card',
      anchors: '.blog-pager',
      anchor: '.blog-pager-older-link'
      },"

      kalo di versi mbak bagian mana nya yang harus diganti?
    • Igniel
      4/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tutorial diperbarui. Silakan cek lagi langkah ketiga. JSnya beda jadi lebih baik ganti HTMLnya aja biar lebih mudah.
    • Galih Budi Prakoso
      20/11/18
      Profil: https://www.blogger.com/profile/15387026996590778516
      iya, kenapa di deobfus sih? :(
    • Galih Budi Prakoso
      20/11/18
      Profil: https://www.blogger.com/profile/15387026996590778516
      kakak cantik lain kali jangan di deobfus dong, kita juga mau belajar kakak cantik :( gak cuma bisa copy paste aja kak :(
      https://rawcdn.githack.com/galih977/Autoload-Navigaton/0ab4a8ff7b2fee8bd4fce5009e0529b9705ccb71/autoloadscriptkiddie.js
    • Ketua Osis
      19/11/19
      Profil: https://www.blogger.com/profile/07190853703685442078
      awaoakwoak di igniel buat tutor aja ampe di Encript dobel pulak :'v , kalau template sih mending lah ini tutor :'v
    • Igniel
      19/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ini blog isinya soal tutorial blogging juragan. Bukan blog programming. Pikiran user emot pacman emang absurd.
    • Ketua Osis
      1/12/19
      Profil: https://www.blogger.com/profile/07190853703685442078
      Ooo emangnya kalau bukan bl0g pr0gramin6 ngasih tutorial blogger harus di enrypt ya?
    • Rafiqi, S.Kom.
      4/12/19
      Profil: https://www.blogger.com/profile/04859597823618848770
      emang tempat encript nya dimana si?
  • Wanjay
    3/11/18
    Profil: https://www.blogger.com/profile/14032211075180381343
    Kalo auto load di postingan selanjut nya saat di scroll ke bawah sprti jalantikus itu gmna mbak
    • Igniel
      5/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tutorial diperbarui. Cek lagi scriptnya. Udah bisa auto load saat scroll.
    • Wanjay
      6/11/18
      Profil: https://www.blogger.com/profile/14032211075180381343
      Tidak Work dengan sempurna mbak, memang muncul load more nya, tapi tidak auto load ,sudah saya praktek satu".

      Di bagian home masih muncul navigasi number + tidak load postingan sebelumnya dan di bagian post tidak auto load.

      Mungkin karena saya belum paham betul dengan coding, bisa di jelaskan dengan detail mbak.

      Coba praktekkan di template viomagz dan di beri demo mbak :D terima kasih.
    • Igniel
      6/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      DEMO: www.bjita.com
      Work dengan baik.

      Navigasi nomor? Blogger gak pake navigasi nomor. Kalau ada itunya berarti template tersebut dah dipasangin custom navigation. Hapus dulu script navigasi nomornya. Nanti scriptnya bentrok.
    • Wanjay
      6/12/18
      Profil: https://www.blogger.com/profile/14032211075180381343
      Work mbak, blum di hapus ternyata :D
    • Rifqi Alfi
      12/5/21
      Profil: https://www.blogger.com/profile/14127912114433592941
      mba kalo mau ganti warna background tombolnya gimana?
    • ཞıʄզı ąƖʄı
      12/5/21
      Profil: https://www.blogger.com/profile/10582652113899801611
      Tutorialnya berhasil mba, tp tombol load more nya tembus ke postingan artikel...seblum diganti tombolnya "postingan berikutnya" pas dah diganti jadi "Load More" ini gimana ya mba cara perbaikinya?

      https://dzuhalah.blogspot.com/2021/04/cara-membuat-efek-transisi-pada-gambar.html