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:
- Auto load on scroll. Halaman berikutnya akan otomatis termuat saat halaman discroll sampai batas akhir sehingga konten baru akan selalu muncul.
- 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>| Variable | Keterangan |
|---|---|
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.
Kalo auto load di postingan selanjut nya saat di scroll ke bawah sprti jalantikus itu gmna mbak
BalasHapusTutorial diperbarui. Cek lagi scriptnya. Udah bisa auto load saat scroll.
HapusTidak Work dengan sempurna mbak, memang muncul load more nya, tapi tidak auto load ,sudah saya praktek satu".
HapusDi 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.
DEMO: www.bjita.com
HapusWork 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.
Work mbak, blum di hapus ternyata :D
Hapusjavascript nya jangan diobfuscator bisa mbak?
BalasHapussoalnya target elemen javascript di template yang saya beda
kalo versi dte punya saya begini mbak,
Hapus"target: {
posts: '.items',
post: '.card',
anchors: '.blog-pager',
anchor: '.blog-pager-older-link'
},"
kalo di versi mbak bagian mana nya yang harus diganti?
Tutorial diperbarui. Silakan cek lagi langkah ketiga. JSnya beda jadi lebih baik ganti HTMLnya aja biar lebih mudah.
Hapusiya, kenapa di deobfus sih? :(
Hapuskakak cantik lain kali jangan di deobfus dong, kita juga mau belajar kakak cantik :( gak cuma bisa copy paste aja kak :(
Hapushttps://rawcdn.githack.com/galih977/Autoload-Navigaton/0ab4a8ff7b2fee8bd4fce5009e0529b9705ccb71/autoloadscriptkiddie.js
awaoakwoak di igniel buat tutor aja ampe di Encript dobel pulak :'v , kalau template sih mending lah ini tutor :'v
HapusIni blog isinya soal tutorial blogging juragan. Bukan blog programming. Pikiran user emot pacman emang absurd.
HapusOoo emangnya kalau bukan bl0g pr0gramin6 ngasih tutorial blogger harus di enrypt ya?
Hapusemang tempat encript nya dimana si?
HapusNiche post mastih,,tapi gak ngaruh untuk template Viomax,,CSS nya sangat rumit,,
BalasHapusNggak 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.
Hapusasal sabar dan mau ngertiin cssnya bisa kok :D
HapusSudah saya coba mbak sesuai dengan tutor, memang sudah muncul load more nya tapi gak mau load otomatis,,jadi harus di klik manual,,
Hapusoh iya,,apa ini hanya berlaku untuk homepage saja? atau halaman postingan?
HapusSemua pertanyaan mas ada di postingan. Biasakan baca dulu sampai habis :)
Hapus- Kalau mau otomatis atur dulu di scriptnya. Di tutorialnya dijelaskan.
- Berlaku di halaman multiple items. Apa itu multiple items? Penjelasan ada di tutorialnya.
Ok saya coba lagi mbak,,terimakasih
Hapusini to blogger yang aku kira cowok haha
BalasHapuskira-kira ngebratin loading blog ngga mbak kalau postnya muncul semua (auto load post)
BalasHapussoalnya blog saya tentang mod-mod game..coba dilihat web saya mbak 18haulinindo.blogcepot.com
Nggak memberatkan. Kalau loadnya udah banyak banget sampai puluhan kali pasti berat. Tapi jarang juga ada visitor yang load sampai puluhan kali.
HapusPakai event onclick aja biar auto loadnya baru muncul kalau diklik.
Siap tak coba...
Hapusoh 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)
BalasHapuskalo punya mbak kan kelihatan wrapper postnya terlebih dahulu sebelum postnya ke load sempurna
Thank you :)
di save,, jadi pengan ganti template setelah baca yang ini..
BalasHapusbisa untuk yang amp ini atau tidak mbak
Belum bisa untuk AMP.
Hapussudah saya pasang dan work tapi di saat mau "load more" malah ke redirect gambar tumbhnail blog yah mbak?
BalasHapuscoba tolong cek apanya yang salah mbak diblog saya 18haulinindo.blogspot.com
Template yang dipake masih pake JS buat ambil thumbnail.
HapusSolusinya ngambil thumbnail harus pake kode Blogger aja.
Cek disini:
https://www.igniel.com/2018/08/membuat-resize-thumbnail-blogger-tanpa-script.html
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...
HapusMbak thumbnail script sudah saya ganti ngga pake script.. dan work tapi kok tampilannya jadi begini yah??
BalasHapusini gambarnya mbak
https://3.bp.blogspot.com/-zZjoRMy1SI0/XAudTFWRjzI/AAAAAAAABl4/sFKBEDTDdmMfwHm3yBBbkgfKBInMsZ1XQCLcBGAs/s320/anehbinajaib.jpg
tolong bantuannya mbak.. makasih :)
Ada apa dengan tampilannya? Keliatannya thumbnail muncul.
HapusKalau saya tampilan imagenya pas di load malah ngeblur mba adakah solusinya?
HapusThanks Mbak,Work.Terimakasih Izin Share Ulang Boleh ??
BalasHapusMba ketika sudah memuat ko gambarnya menjadi blur, adakah solusi nya, untuk gambar awal 2 setelah dimuat semuanya blur kecuali yang dua itu saja mba
BalasHapusthanks mbak sukses, saya senang hehe
BalasHapusSaya 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
BalasHapussaya juga gagal di blog yang saya punya, kenapa yaa... malah post blognya jadi berantakan
BalasHapusAku coba di template tektrim gabisa auto mbak... gmana .?
BalasHapusKode ngak hanya bekerja pada homepage saja..
BalasHapusdan tidak dapat loading otomatis pada posting..
disini saya terapkan tokofaradisa.blogspot.com
Ya memang cuma buat di homepage.
HapusApa ignil, com juga pake ini kak?
BalasHapusIya pake.
HapusCara menghilangkan status msg wrap di antara postingan itu bagaimana mbak?
BalasHapusmsg wrap apa ya? Kaya gimana?
HapusSaya 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..
BalasHapusdicoba di ignilplex, berhasil.. tapi gambarnya tidak muncul... prev: lirik.sanbersstudio.com
BalasHapussdh jadi... setelah sy rubah juga kode di Snippet-Thumbnail-nya... Thanks!!
HapusDirubah bagian mana bang? Di saya abis loading gk muncul postingannya pake template fiksioner.
Hapussaya 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.
BalasHapusBedanya cara masang kaya di penjelasan ama masukin kode ini doang di atas apa mbak?
BalasHapus<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'>
<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>
Kalo untuk dihalamn single post gimana mbak?contohnya kya yg di jalantikus.com
BalasHapusHii this is my blog https://whoopmeloud.blogspot.com/ .. auto load more post is not working . please help !!!
BalasHapusHii this is my blog :https://whoopmeloud.blogspot.com/ .Auto load more post is not working. Please Help !!!
BalasHapustutornya berhasil. cuman di halaman postingan jadi muncul navigasinya. cara ngilanginnya gimana.?
BalasHapusMau nanya kak kenapa javascriptnya dienkripsi?
BalasHapusUdah 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
BalasHapusUdah 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
BalasHapusBuang code ini async="async"
HapusCari di JQuery ajax
di blog saya tidak work atau tombol load morenya tidak jalan, blog saya menggunakan template bootstrap. Sepertinya tabrakan dengan jquery bootstrap saya
BalasHapuscoba buang code async="async"
Hapuswork gan di template saya
sangat bermanfaat sekali...!!!
BalasHapusSetelah saya terapkan kenapa ya kok thumbnail di next post nya jadi ngeblur? Mohon solusi nya mbak
BalasHapusKak igniel tambahin fungsi buat execute script after load.
BalasHapusPertanyaanku gak dijawab.
BalasHapusSaya Coba di viomagz versi terbaru gambar di next nya gak muncul mbak. mungkin karena bnetrok sama lazyload nya kali ya
BalasHapusKak URL sama page title gak berubah ya? Bantu biar URL, page title, serta hostory next page nya ada.
BalasHapusSaya sedang mencari auto load post pada page single item, apakah bisa?
BalasHapusDi fiksioner susah
BalasHapusmaz bikin artikel auto scroll dong
BalasHapusMasih bingung make tamplate viomagz
BalasHapusMbak 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.
BalasHapus