Load Posting Otomatis dan Scroll Tidak Terbatas di Blog

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.

Demo Live

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

---

Oke sekian dulu tutor "singkanya". Terimakasih. Bila ada pertanyaan bisa tanya di kotak komentar. Dikembangkan lagi oleh ini dari sini. Baca juga Cara Membuat Archive Blog yang Lebih Baik (Fresh Trick). 

Artikel Terkait :

Bagi yang merasa artikel ini menarik, dan ingin menyebarluaskannya dimohon bagi siapa pun yang ingin mengutip diwajibkan untuk mencantumkan kode link di bawah ini. Hargailah karya cipta orang lain. Terimakasih.
<a href="http://netfori.blogspot.com/2013/03/scroll-tidak-terbatas-di-blog.html">Load Posting Otomatis dan Scroll Tidak Terbatas di Blog</a>

Get Free Unlimited Post Update !

Jika Anda tertarik untuk Berlangganan artikel ini
Silahkan masukkan alamat email anda: