Membuat Autoload Page Navigation Ketika di Scroll di Blog

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Membuat Autoload Page Navigation Ketika di Scroll di Blog, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, Javascript, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Artikel pertama yang saya posting adalah tutorial Membuat Autoload Page Navigation on Scroll di Blogger, tutorial ini bisa Anda terapkan di blog Anda agar jumlah post tanpa harus membuka halaman selanjutnya pada page blog Anda.

Tutorial ini saya dapatkan di blog Dunia Blanter, tutorial ini sudah saya lihat pada blog percobaannya, dan saya lihat memang benar tutorial tersebut bekerja atau berjalan dengan baik tanpa error.

Baca juga : Modifikasi Halaman Page Not Found (404) Efek Parallex

Script ini bisa Anda coba pada halaman utama atau homepage, caranya cukup Anda scroll kebawah lalu secara otomatis postingan lama Anda yang tadinya terlihat pada halaman selanjutnya dan sekarang tampil pada homepage blog Anda.

Berikut ini merupakan cara penerapan Autoload Page Navigation Ketika di Scroll di Blog.

Autoload Page Navigation on Scroll di Blogger

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda copykan kode atau script dibawah ini 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/AVvXsEio2mgLkZlVx1KkiZEOqweoQxhnkmysRyzPRzPbV_YqRnCC4xGNB79v4uxHxOzHDDbAl8I7Cbqx0zHk9_pxkDcQe6pPoJ35BkaTceLbltqf9wg-kOk98HwIySkyaHZG1DbKTLP-iGw1sig/s1600/idblanterloader.gif'
});

  </script>

</b:if>

Langkah kedua :

Carilah kurang lebih kode seperti dibawah ini

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

Lalu Anda ganti dengan kode dibawah 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>

Lalu Anda Save.

Setiap template memiliki script page navigation berbeda, hapus script page number navigation yang berada pada template Anda agar script autoload ini dapat berjalan dengan baik.

Demikian tutorial yang bisa saya berikan pertama saya posting kali ini semoga bermanfaat bagi Anda.

Source : http://www.idblanter.com/2017/01/membuat-autoload-page-navigation-on-scroll.html