Cara Membuat Halaman Tanpa Batas dan Tanpa Reload di Blog
JASA SEO WEBSITEBiasanya ketika membuka halaman lain dari sebuah blog, khususnya yang berplatform blogger, browser akan melakukan reload atau refresh terlebih dulu sebelum pergi ke halaman yang dituju. Itu merupakan salah satu faktor pemborosan kuota dan waktu bagi pengunjung blog. Setiap artikel yang ada didalam blog adalah artikel download yang harus kita tunggu beberapa detik atau menit. Jadi untuk mengantisipasi dan mempermudah pengunjung blog, maka cara ini lebih efisien.
Kode script yang akan aku bagikan ini akan memuat halaman berikutnya dari blogger tanpa perlu reload atau di refresh lagi. Jadi pengunjung gak perlu download-download lagi. Tapi sebelum itu, ada dua jenis infinite scroll yang tersedia berdasarkan event yang dilakukan:
Auto load on scroll.
Kode script yang akan aku bagikan ini akan memuat halaman berikutnya dari blogger tanpa perlu reload atau di refresh lagi. Jadi pengunjung gak perlu download-download lagi. Tapi sebelum itu, 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. Jika sudah paham, silahkan ikuti panduan pembuatannya dibawah ini :
Cara membuat infinite scroll blogger tanpa reload
#1. Buka blogger.
#2. Pilih menu tema > pilih edit html.
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. Jika sudah paham, silahkan ikuti panduan pembuatannya dibawah ini :
Cara membuat infinite scroll blogger tanpa reload
#1. Buka blogger.
#2. Pilih menu tema > pilih edit html.
#3. Pastikan blog sudah terpasang library jQuery. Tapi, jika belum ada simpan kode berikut dibawah <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" async="async"/>
#4. 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 {...}
#5. 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}
#6. Kemudian carilah kode ini.
<b:includable id='nextprev'>
#7. Kalau tidak ada carilah kode ini. Pasti ada banyak. Pilihlah yang berada di dalam area widget Blog1.
<b:includable id='postPagination' var='post'>
#8. Lalu hapus semua dan ganti dengan kode berikut.Dengan tekan tombol ctrl + f > lalu cari <b:includable id='nextprev'> atau <b:includable id='postPagination' var='post'> ganti isinya 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. Sobat bisa ganti sesukanya.
#9. Simpan script dari infinite scroll blogger ini diatas </body>
#10. Selesai.
<b:if cond='data:view.isMultipleItems'>
<script> //<![CDATA[
// Infinite Scroll Blogger
!function(ignielScroll) {
var auto = true; // true atau false
var img = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-je27XIFPFTQRM6WP-rxeK_3_w0-xMWLaDZ7_4ECynMcmLwzk086cr8QSbsTD0G_vebwgvLrLE8bHSFOFAUzRODmaCm2-sBwyKscKMgfPOSD4zr4GEkWhNN3-oBOaGK9wzLgMRSJfBIfF/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>
Keterangan
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 yang dibuat.
Tambahan
#4. 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 {...}
#5. 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}
#6. Kemudian carilah kode ini.
<b:includable id='nextprev'>
#7. Kalau tidak ada carilah kode ini. Pasti ada banyak. Pilihlah yang berada di dalam area widget Blog1.
<b:includable id='postPagination' var='post'>
#8. Lalu hapus semua dan ganti dengan kode berikut.Dengan tekan tombol ctrl + f > lalu cari <b:includable id='nextprev'> atau <b:includable id='postPagination' var='post'> ganti isinya 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. Sobat bisa ganti sesukanya.
#9. Simpan script dari infinite scroll blogger ini diatas </body>
#10. Selesai.
<b:if cond='data:view.isMultipleItems'>
<script> //<![CDATA[
// Infinite Scroll Blogger
!function(ignielScroll) {
var auto = true; // true atau false
var img = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-je27XIFPFTQRM6WP-rxeK_3_w0-xMWLaDZ7_4ECynMcmLwzk086cr8QSbsTD0G_vebwgvLrLE8bHSFOFAUzRODmaCm2-sBwyKscKMgfPOSD4zr4GEkWhNN3-oBOaGK9wzLgMRSJfBIfF/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>
Keterangan
| Variable | Keterangan |
|---|---|
| var auto | Pengaturan untuk auto load atau tidak. true: Postingan berikutnya akan 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. |
Tambahan
Kalau menu navigasi homepage di template sobat sudah dilengkapi dengan script custom lain seperti navigasi bernomor, maka scriptnya wajib dihapus agar tidak terjadi bentrok atau error. Aku rasa sudah cukup detail dengan artikel kali ini, karena pengaturannya memang tidak banyak. Sobat hanya perlu teliti mencari nama class dan id CSS HTML didalamnya, karena kode setiap template berbeda. Dibutuhkan kesabaran, keikhlasan dan ketelitian tingkat tinggi biar berhasil hehehe.
this is one of the best posts, when was the last time you made an article post? visit our website Tel U
ReplyDeleteInteresting reading. Enjoyed article.
ReplyDeleteสล็อต joker FISH HUNTER HAIBA JACKPOT は中国風の魚のシューティング ゲームです。プレイヤーは時間を忘れるほどワクワクし、素晴らしいBOSSシステムがあなたに莫大な報酬をもたらします。時間を忘れるほど楽しくてドキドキします。
ReplyDelete
ReplyDeleteMuch impressed by this article.
Comprare Patente B
fuhrerschein-kaufen
Thanks for sharing.
Thank you for the information. B2B Lead Generation
ReplyDeleteTo get a laptop for free from the government, you can either try to get it from a local shop, a local TV store, or a local web store. Free Laptop from the government
ReplyDeleteFashion Shop 12 is a fashion company that offers a variety of men and women's' clothing and accessories in USA. We produce our own design and brand merchandise by delivering a wide range of fashionable yet affordable clothes and accessories for our customers including youngsters that seek to express their own dressing style. Till date, we have outlets in America and we continue to expand our service.
ReplyDeleteBest Indian HNI database Privoder India
ReplyDeleteTrust is the first step to love.
ReplyDeleteVery Nice Information
ReplyDeleteTina turner Theatre Tickets
Very Nice Information
ReplyDeletesoftware developers company
this would one say one is of the best posts, when did you last make an article post? visit our site Tel U udhaar
ReplyDeleteI will trust this post and positive step thank you for sharing the advises!
ReplyDeletehttps://clippingservicestudio.com/
Your humility and modesty are rare qualities in today's world. Despite your many accomplishments, you remain humble and grounded, never forgetting where you came from. Your humility is a testament to your character and I deeply respect you for it. Digital Marketing Course In Hisar
ReplyDeleteI'm exceptionally glad to peruse this article. Gratitude for giving us Astonishing data. Fabulous post. Gratitude For Sharing such an educational article. baribaby
ReplyDeleteThat’s quite interesting. Thank you for sharing it with us! Hire kotlin developers
ReplyDeleteNice article
ReplyDeleteterima kasih ilmu nya mas
ReplyDeletebarangkali perlu Sewa bus pariwisata Bandung
A drill bit is a cutting tool that is attached to a drill to create holes in materials such as wood, metal, or plastic.
ReplyDeleteThank you so much for sharing!
ReplyDeleteFind Mini Secret Wireless Camera in India for Home or Office security reasons at Online Shopping Stores. Tiny Cameras Solutions. Easy to return.
Thanks for sharing this blog, it was very helpful and informative.
ReplyDeletehttps://ekspedisikalimatan.wordpress.com/
ReplyDeletehttps://auraabadilogistiksurabaya.wordpress.com/
https://jasapengirimanbarangkalimatan.wordpress.com/
https://jasapengirimanalatberatantarpulau.wordpress.com/
Danke, dass Sie diese hilfreichen Tipps für einen erfolgreichen Umzug mit uns teilen. Als jemand, der schon mehrfach umgezogen ist, kenne ich die damit verbundenen Herausforderungen. Ihr Blog bietet wertvolle Einblicke und praktische Ratschläge, die den gesamten Prozess weniger überwältigend machen können. Es ist schön, ein Umzugsunternehmen zu sehen, das sich wirklich um seine Kunden kümmert und die Extrameile geht, um ihre Zufriedenheit sicherzustellen.
ReplyDeleteUmzugsfirma Berlin
Umzugsunternehmen Berlin
Umzug Berlin
are you planing for a vacation in kufri? must visit Agate Pandora Hotel , Luxury Hotel In Kufri. With its impeccable hospitality and world-class amenities, Agate Pandora Hotel offers a truly indulgent experience for guests.
ReplyDeleteif you are looking for a hotel in udaipur, must visit Rame Royal , With its exceptional hospitality, luxurious amenities, and impeccable service, Ramee Royal ensures a memorable experience for its guests.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteYour writing is very good, I recommend this website to you, the indoor fountain inside is also very good, worth buying.
ReplyDeletehttps://www.luckyincense.com/
ReplyDeleteداروخانه اینترنتی ایرونی برای راحتی شما زوجین کلیک کن
برای خرید محصولات زناشویی و تقویت و افزایش سایز الت با قرص های گیاهی بزن روش از داروخانه اینترنتی جنسی بهره ببرید
Thanks For this valuable informative post
Good information!
ReplyDeleteHi, your blog post is interesting and well-written. I've never tried the comments technique before and I'm excited to try it out on my blog. I'm looking forward to getting some traffic from this post.SEO for Contractors - Why General Contractors Need SEO
ReplyDeleteI just wanted to let you know that your article is equally impressive.
ReplyDeleteYour message is just outstanding in terms of clarity,
and I believe you are an expert in this field.
So, with your permission,
I'd like to introduce you to the feed, which will keep you informed about future posts.
cyberlink powerdirector 16 free download
autocad 2010 crack
autocad crack
typing master pro crack
corel draw x5 crack
Mengapa penting untuk memastikan bahwa blog sudah terpasang library jQuery sebelum membuat infinite scroll? Regard Telkom University
ReplyDeleteAbsolutely mesmerized by the transformative journey Golden Tsunami offers! From rejuvenating our spaces to nourishing our spirits, it's a holistic approach to wellness and prosperity. Can't wait to explore more on their website!
ReplyDeleteVery informative blog about Cara Membuat Halaman Tanpa Batas dan Tanpa Reload di Blog.
ReplyDeletePay Someone To Take My GED Exam