Cara Membuat Autoload Page Navigation on Scroll

JejakSeru.com - Kali ini saya akan membuat tutorial tentang Autoload Page Navigation, dengan script ini maka postingan kamu akan load otomatis ketika halaman di scroll ke bawah. Script ini akan memudahkan untuk pengunjung melihat postingan lama beriktunya dan tidak perlu loading lagi untuk menuju ke index posting lama.



Untuk kamu yang tertarik memasangnya pada blog kamu silahkan ikuti tutorial di bawah ini:

Langkah 1 : Masuk ke Blogger > Template > Edit HTML > lalu tambahkan script di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script src='https://cdn.rawgit.com/JejakSeru/RianiDesign/bb655461/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://2.bp.blogspot.com/-xd8I2e-3048/WWhS4_r98DI/AAAAAAAAAKQ/AhFQp_TINRsf-pFiZdr_W5LTPgQOt2woQCLcBGAs/s1600/rianidesignloader.gif'
});
  </script>
</b:if>

Langkah 2 : Cari kode  <b:includable id='nextprev'>...</b:includable> Lalu ganti dengan kode di bawah :

<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>

Langkah 3 : Simpan template

Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.


Setiap template memiliki script page navigation yang berbeda, hapus script page number navigation yang ada di template kamu agar script autoload ini bisa berjalan dengan baik.

Blogger
Disqus
Pilih Sistem Komentar Yang Kamu Suka

4 comments

mntap nih buat blog ijin coba bro

Balas

Mantap nih, ijin coba gan..

Balas

iya silahkan dicoba gan

Balas

iya mas silahkan dicoba gan

Balas