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 == "index"'>
<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/AVvXsEg-ZRkwyuYiRrAW1IfNl7A8deSDsarnTXTt5x_NQjPizw0OwwZLSSfx1j96iMUJrsM6MV_8x79DbNtSmGqzYuPXCy2vYMupMPI_z2xCvEE8B37rTdEuRg6NjPg7DYvLH_cqRla3umbmRHE/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 != "item" and data:blog.pageType != "static_page"'>
<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 + "_blog-pager-older-link"' 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 + "_blog-pager-newer-link"' 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
0 Comments