Membuat Autoload Page Navigation on Scroll di Blog

Membuat Autoload Page Navigation on Scroll di Blog

Rio Ilham Hadi

17 January 2017

Halo sobat Blanter semua, sambil menunggu template baru yang akan saya publikasikan di blog ini, ada baiknya saya memberikan tutorial terlebih dahulu untuk menambah pengetahuan sobat tentang script-script pada Blogger. 😄

Mungkin beberapa dari sobat sudah tau tentang Autoload Page Navigation ini, yaitu sebuah script yang akan membuat page navigation default atau modifikasi yang sebelumnya harus di klik untuk menuju ke posting lama maka dengan script ini postingan akan load otomatis ketika halaman di scroll ke bawah.

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

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

Langkah Pertama masuk ke Blogger > Template > Edit HTML > lalu tambahkan Script di bawah ini tepat di atas kode </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/AVvXsEiqcsAFvy70HuNft9gqFLGNFXyjdhaQHI7ljUQmxwpR-zr6yodEQ6Z8GvhBxQcGPQNy3PJOjTCvBkynpe7RbNHMhGFGKjeUXTfmVdxz8ouMvor4RVhmSV0qWHOcAi9NdgXIPOSlGMY9znc/s1600/idblanterloader.gif'
});
  </script>
</b:if>

Selanjutnya cari kode di bawah ini : 🔍

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

Lalu ganti dengan kode 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 memiliki script page navigation yang berbeda, hapus script page number navigation yang ada pada template sobat agar script autoload ini dapat berjalan dengan lancar.

Baca Juga : Cara Membuat Material Design Color Box di Blogger

Sekian tutorial yang bisa saya bagikan kali ini, semoga tutorial ini bermanfaat bagi sobat. 😊

Share This