Membuat Autoload Page Navigation On Scroll Di Blog

Halo teman Blanter semua, sambil menunggu template gres yang akan aku publikasikan di blog ini, ada baiknya aku menunjukkan tutorial terlebih dahulu untuk menambah pengetahuan teman wacana script-script pada Blogger. 😄

Mungkin beberapa dari teman sudah tau wacana Autoload Page Navigation ini, yakni sebuah script yang akan menciptakan page navigation default atau modifikasi yang sebelumnya harus di klik untuk menuju ke posting usang maka dengan script ini postingan akan load otomatis dikala halaman di scroll ke bawah.

Script ini akan memudahkan pengunjung untuk melihat postingan usang berikutnya yang pastinya halaman tidak perlu melaksanakan loading lagi untuk menuju ke index posting lama.

Nah bagi teman yang tertarik untuk memasangnya pada blog teman silahkan ikuti tutorial di bawah ini:

Langkah Pertama masuk ke Blogger > Template > Edit HTML > kemudian tambahkan Script di bawah ini sempurna di atas instruksi </head>

<b:if cond='data:blog.pageType == &quot;index&quot;'> <script src='https://cdn.rawgit.com/blanter/design/7a672c5d/autoloadpost.js' type='text/javascript'/> <script type='text/javascript'> jQuery.ias({     container : '.blog-posts',     item: '.post-outer',     pagination: '#blog-pager',     next: '#blog-pager-older-link a',     loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrfssNK7aGRtJUsTrgU-3Zof0nhGGI_Gtz4BHMCg7W8Q_tQeDvnO8L4mSKMQ3m6gdvkSLTUt3_13RG9ou99oZ9QuKAT2wFKoQVg4IeDLhFwCg0jh6KVJTPwqK_lt7Wo7_x1PsjZ9ptkE/s1600/idblanterloader.gif' });   </script> </b:if>

Selanjutnya cari instruksi di bawah ini : 🔍

<b:includable id='nextprev'>...</b:includable>

Lalu ganti dengan instruksi di bawah ini : 😁

<b:includable id='nextprev'> <b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>       <div class='blog-pager' id='blog-pager'>     <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'/>       </span>     </b:if>     <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'/>       </span>     </b:if>      <div class='mobile-link-button' id='blog-pager-home-link'>     <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'/>     </div> <b:if cond='data:mobileLinkUrl'>       <div class='blog-mobile-link'>         <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>       </div>     </b:if>   </div>     </b:if>       <div class='clear'/> </b:includable>

Simpan Template. ✅

Setiap Template mempunyai script page navigation yang berbeda, hapus script page number navigation yang ada pada template teman semoga script autoload ini sanggup berjalan dengan lancar.

Baca Juga : Cara Membuat Material Design Color Box di Blogger

Sekian tutorial yang sanggup aku bagikan kali ini, semoga tutorial ini bermanfaat bagi sobat. 😊

Sumber https://www.idblanter.com