Scroll Tak Terbatas Di Blog - Pasti anda semua pernah menggunakan Facebook. Facebook merupakan web sosial paling terkenal di dunia. Atau mungkin Twitter, pasti anda pernah menggunakannya. Atau yang paling terlihat pada saat anda membuka 1cak.Tetapi pernahkah anda memperhatikan kebanyakan dari situs tersebut menggunakan teknik Nge-Load secara otomatis untuk menampilkan post berikutnya. Tanpa harus menge-klik next atau previous button.
Teknik seeperti ini sebenarnya juga bisa diaplikasikan di blog. Dalam artikel ini saya akan menjelaskan bagaimana teknik scroll tak terbatas dengan menggunakan JQuery. Untuk nama J Querynya sendiri adalah JQuery Ajax Scrolling. Oke berikut langkah-langkahnya.
1. Login ke Blogger.com
2. Pilih Template > Edit HTML
3. Cari kode ini . Maka akan muncul seperti di bawah ini:
........Kode lainnya ..........
NB: Kode Warna Merah yang ditambahkan.
4. Cari kode ini . Maka akan muncul seperti di bawah ini:
<div class="ias_container">.......Kode lainnya...........</div>
</b:includable>
NB: Kode Warna Merah yang ditambahkan.
5. Cari kode ini . Maka akan muncul seperti di bawah ini:
<b:includable id='nextprev'>
<div id=’ias_pagination’>.......Kode Lainnya....... </div>
</b:includable>
6. Cari kode ini ............ . 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:
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
NB: Jika kode jquery.min.js telah ada, tidak perlu ditambahkan lagi.
9. Simpan dan rasakan hasilnya.
Penjelasan Kode
1. Kode pertama:
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:
Kode ini yang bertugas untukmemanggil kode ajax scrolling yang telah dibahas di awal postingan.
3. Kode berikutnya:
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".
Oke sekian dulu tutor "singkanya". Terimakasih. Bila ada pertanyaan bisa tanya di kotak komentar.
