Trik Membuat Scroll Di Blog Tak Terbatas/Infinite 2014

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?

1. 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").
2. Lalu, akan menyimpan link untuk menuju Page 2. Menyembunyikan seluruh "pagination" element
3. Selanjutnya, Halaman 2 akan di-load di dalam memori komputer, kemudian memindai seluruh halaman 2 untuk elemen dengan pilihan "item"
4. Terakhir, menambahkan item yang ditemukan ke dalam "container".

SELAMAT MENCOBA.