17 January 2017

Membuat Autoload Page Navigation on Scroll di Blog

Membuat Autoload Page Navigation on Scroll di Blog

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://4.bp.blogspot.com/-kpYZSwETm70/WH3S5iFyYdI/AAAAAAAAFRE/wsLi021UrfQhyAEGMnxVDZfyE_zWIfXuwCLcB/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. 😊
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Emoticon
Konversi Code
Out Of Topic
😊
😉
😀
😁
😎
😍
😜
😑
😇
💖
😯
😱
😭
👍
🍻