Hallo Teman Kali Ini Saya Akan Share Cara Membuat Infinite Scroll Atau Scroll Tidak Terbatas Di Blog.
Hmm Trik ini Sama Seperti Facebook . Yaitu
Scrool Nya Tidak Terbatas Tanpa Mengclick Next Post Atau Previous Post.
Nah Sekarang Kita Terapkan Di Blog Anda.
1. Login ke Blogger.com
2. Pilih Template > Edit HTML
3. Cari kode ini <b:includable id='post' var='post'>. Maka akan muncul seperti di bawah ini:
<b:includable id='post' var='post'>
<div class="ias_item">
........Kode lainnya ..........
</div></b:includable>
NB: Kode Warna Merah yang ditambahkan.
4. Cari kode ini <b:includable id='main' var='top'>. Maka akan muncul seperti di bawah ini:
<b:includable id='main' var='top'>
<div class="ias_container">.......Kode lainnya...........</div>
</b:includable>
NB: Kode Warna Merah yang ditambahkan.
5. Cari kode ini <b:includable id='nextprev'>. Maka akan muncul seperti di bawah ini:
<b:includable id='nextprev'>
<div id=’ias_pagination’>.......Kode Lainnya....... </div>
</b:includable>
6. Cari kode ini <a expr:href='data:olderPageUrl'> ............ </a>. Mungkin belum akan ketemu kodenya. Yang terpenting bila anda telah mendapatkan kode expr:href='data:olderPageUrl' maka anda telah benar. Tambahkan kode berikut yang berwarna merah:
<div id=’ias_page_next’><a expr:href='data:olderPageUrl'> ............ </a></div>
NB: Mungkin akan ditemukan lebih dari satu kode (kemungkinan ada dua kode yang sama). Pasang pada kode yang pertama saja.
7. Setelah selesai semua langkah-langkah di atas, dilanjutkan dengan menginstall kode ajax jquerynya. Pasang kode di bawah ini di atas kode </head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script
src="https://sites.google.com/site/blognetfori/archive/JQueryAjaxScrolling.js"
type="text/javascript"></script><b:if
cond='data:blog.pageType != "item"'><script
type="text/javascript">
jQuery.ias({container
: '.ias_container',item: '.ias_item',pagination:
'#ias_pagination',next: '#ias_page_next a',loader:
'your-own-hosting/loading.gif'});</script></b:if>
NB: Jika kode jquery.min.js telah ada, tidak perlu ditambahkan lagi.
9. Simpan dan rasakan hasilnya.
Penjelasan Kode
1. Kode pertama:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Mengapa
harus ada ini? karena kode ini akan memanggil J query framework yang
terhosting di google. Kode ini penting karena bila tidak ditambahkan
maka, anda ridak dapat menggunakan kode jquery lainnya sebelum memakai
kode di atas.
2. Kode kedua:
<script
src="https://sites.google.com/site/blognetfori/archive/JQueryAjaxScrolling.js"
type="text/javascript"></script>
Kode ini yang bertugas untukmemanggil kode ajax scrolling yang telah dibahas di awal postingan.
3. Kode berikutnya:
<b:if cond='data:blog.pageType != "item"'><script type="text/javascript">
jQuery.ias({container
: '.ias_container',item: '.ias_item',pagination:
'#ias_pagination',next: '#ias_page_next a',loader:
'your-own-hosting/loading.gif'});</script></b:if>
Untuk
memastikan script hanya bekerja jika halaman lebih dari satu atau lebih
(bukan single post). Jika tidak halaman tersebut akan bekerja ketika
berada di halaman homepage atau halaman archive yang panjang.
Bagaimana Kode Tersebut Bekerja?
- Ketika Halaman 1 anda di-load oleh
browser, plugin ini akan mencari HTML Element yang berisi link Halaman
berikutnya. Halaman 2 (menggunakan informasi dalam "pagination" dan
"next").
- Lalu, akan menyimpan link untuk menuju Page 2. Menyembunyikan seluruh "pagination" element
- Selanjutnya, Halaman 2 akan di-load di dalam memori komputer, kemudian memindai seluruh halaman 2 untuk elemen dengan pilihan "item"
- Terakhir, menambahkan item yang ditemukan ke dalam "container".
SELAMAT MENCOBA.
