Cara Memasang Efek Autoload pada Navigasi Halaman Blogspot

Mediababe.net Memasang dan membuat autoload page navigation (halaman navigasi) on scroll di blogspot. Page navigation atau nomor halaman pada blogspot bisa kita edit dan modifikasi sesuka hati, hanya dengan cara mengetahui javascript beserta css dan htmlnya kita bisa dengan mudah memodifikasi tampilan navigasi halaman blog.

Mungkin disini kamu sudah pernah mengetahui tentang autoload pagination (Page Navigation) ini, yakni sebuah navigasi halaman yang sudah tergabung dan dimodifikasi dengan kode javascript agar halaman pada homepage blogspot kamu ketika di scroll menuju ke bawah akan otomatis menuju ke halaman tampilan posting terdahulu. Ini hampir sama sebenarnya dengan fungsi tombol halaman berikutnya atau menggunakan number page pagination.

Cara Memasang Efek Autoload pada Navigasi Halaman Blogspot

Script ini nantinya akan memudahkan pengunjung di dalam menelusuri blog kamu tanpa harus perlu menekan tombol nomor atau ke halaman selanjutnya dan mendirect halaman ke selanjutnya. Nah bagi kamu yang barangkali sedang mencari artikel ini maka ikuti langkah pemasangan dan cara memodifikasi navigasi halaman di blogspot.

Memasang Efek Autoload Navigasi Halaman Blogspot Ketika di Scroll ke bawah

1. Langkah pertama silahkan masuk ke dashboard blogger kamu, lalu pilihlah menu template > edit html.
2. Setelah melakukan langkah diatas, silahkan kamu hapus kode page navigation kamu terlebih dahulu kemudian tambahkan kode 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>


3. Langkah berikutnya silahkan kamu cari kode yang sama persis dengan kode di bawah ini.

<b:includable id=’nextprev’>…</b:includable>

Ganti kode tersebut dengan kode yang ada di bawah ini. Agar lebih mudah menggantinya silahkan regroup kode tersebut lalu diganti.

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

4. Tutorial selesai silahkan kamu simpan template kemudian lihatlah hasilnya.


Cara Memasang Efek Autoload pada Navigasi Halaman Blogspot | Akirra Lee | 4.5

Leave a Reply

Your email address will not be published.