> > Memuat efek yang lebih untuk Blogger - Part 1

Memuat efek yang lebih untuk Blogger - Part 1

Posted on Sabtu, 16 Februari 2013 by Unknown

Memuat efek yang lebih untuk Blogger- part 1




Jika Anda menggunakan Facebook, Twitter atau melihat-lihat situs-situs baru, Anda dapat melihat sebagian besar dari mereka menggunakan teknik untuk memuat posting berikutnya secara otomatis, tanpa klik tombol Berikutnya atau Sebelumnya seperti yang kita lakukan sebelumnya. Teknik ini juga diterapkan untuk antarmuka Blogger Dinamis.
Dalam posting ini, saya akan menunjukkan kepada Anda bagaimana menggunakan teknik ini untuk membuat bergulir tak terbatas atau memuat efek yang lebih untuk blog Blogger biasa menggunakan nama plugin Scrollling Jquery Jquery Ajax.

Live Demo

Karena terlalu lama, jadi saya membagi posting ini menjadi 3 bagian dengan rincian sebagai bawah:
- Bagian 1: Penggunaan Dasar Scrolling Ajax Jquery dan menerapkannya ke default template Blogger
- Bagian 2: Bagaimana menerapkan teknik Scrolling tak terbatas untuk semua template Blogger.
- Bagian 3: Kombinasikan plugin ini Jquery dengan plugin lainnya (tata letak plugin seperti Masonry, Isotape, atau sistem komentar Disqus, Google Analytics)


Bagian 1: Penggunaan Dasar Scrolling Ajax Jquery dan menerapkannya ke default template Blogger
Anda mungkin mendengar sebuah teknologi yang diciptakan beberapa tahun lalu nama Ajax. Anda bisa google istilah ini untuk tahu lebih banyak. Namun dalam posting ini, Ajax adalah teknologi yang memungkinkan kita untuk bertukar data dengan server, dan memperbarui bagian-bagian dari suatu halaman web - tanpa reload seluruh halaman. Jquery adalah kerangka kerja yang mendukung Ajax kuat. Dengan Jquery, pengguna dapat mengakses bagian dari halaman HTML dari halaman lain, mendapatkan data dan kemudian menampilkan tanpa reload. Jadi Anda bisa bayangkan, jika kita berada di halaman 1, kita dapat menggunakan Ajax untuk mengakses konten halaman 2, kemudian menampilkan mereka di bawah isi dari halaman 1 tanpa reload, itu cara bahwa teknik Scrolling Tak Terbatas berlaku.
Untuk membuat fungsi ini lebih mudah dan ramah, Jeroen Fiege (http://www.fieg.nl) dibuat Jquery Ajax Plugin Scrolling. Alih-alih mengingat parameter untuk Ajax di Jquery, Anda dapat menggunakan pernyataan ramah di Scrolling Ajax Jquery.

Sekarang, saatnya untuk berlatih.

Instal Instruksi

1, Download Plugin Jquery Ajax di alamat ini:

https://nodeload.github.com/webcreate/infinite-ajax-scroll/zip/master
Anda dapat melihat pada dokumentasi dan contoh plugin ini di sini

http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin
2, Upload file Jquery Ajax Plugin Scrolling ke hosting Anda sendiri. Hanya satu file perlu meng-upload jquery.ias.min.js

3, Dalam posting ini, saya akan menunjukkan penggunaan dasar, dengan template standar Blogger (yang disediakan dalam tab Template Blogger Dashboard). Tutorial untuk mendaftar ke template kustom akan menjadi bagian 2.

Template Buka file dengan pergi ke Blogger Dashboard => Template => Edit HTML
Masukkan kode ini sebelum </ head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="your-own-hosting/jquery.ias.min.js" type="text/javascript"></script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type="text/javascript">

jQuery.ias({
container : '.blog-posts',
item: '.post-outer',
pagination: '#blog-pager',
next: '#blog-pager-older-link a',
loader: 'your-own-hosting/loading.gif'
});

</script>
</b:if>

Sekarang Anda dapat menyimpan perubahan dan melihat bagaimana cara kerjanya. Ingat ini tidak dapat bekerja jika blog Anda hanya memiliki satu halaman!

kode explaination
Dalam kode di atas
- Baris pertama:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </ script>
akan memanggil kerangka Jquery yang di-host oleh Google. Anda tidak dapat menggunakan Jquery tanpa menyebutnya sebelumnya.

- Baris kedua:

<script src="your-own-hosting/jquery.ias.min.js" type="text/javascript"> </ script>
akan memanggil Plugin Jquery: Ajax Scrolling.

- Kondisi Pernyataan:


<b:if cond='data:blog.pageType != "item"'>

.............

.....................

</ b: if>

Untuk memastikan script dalam pekerjaan hanya jika halaman saat ini bukanlah single post, jika tidak, itu hanya bekerja ketika halaman saat ini homepage atau halaman arsip.

- Hak script setelah:

jQuery.ias({  container  : ".blog-posts",    // Selector of the element which wrap all posts in Blog.    // In default Blogger template, this selector is class "blog-posts",      so I entered ".blog-posts" here.  item  : ".post-outer",  // Selector of each post.  // Make sure the elements are inside the container element.  pagination : "#blog-pager",  // Selector of element that contain Blogger navigation links.                // This will be hidden when IAS loads.  next  : "#blog-pager-older-link a",  // Selector of link element that links to next page.  // The href attribute of this element will be used      to get the items from the next page.  loader : "your-own-hosting/loading.gif"  // Url to the loader image. This image  // will be displayed when the next page with items  // is loaded via AJAX.});

Bagaimana cara kerjanya
- Pertama, ketika Anda Page 1 beban di browser pengguna, plugin ini akan mencari elemen HTML yang berisi link ke halaman berikutnya - Halaman 2 (menggunakan informasi dalam "pagination" dan "next" pilihan di atas).
- Kedua, menyimpan link ke halaman 2. Menyembunyikan "pagination" seluruh elemen.
- Ketiga, beban Page 2 dalam memori komputer, kemudian memindai seluruh halaman 2 untuk elemen ditentukan dalam pilihan "item"
- Keempat, item ditemukan untuk menambahkan "wadah".

kesimpulan
Itu semua untuk template standar Blogger. Karena struktur HTML template standar Blogger adalah sama, sehingga Anda dapat menerapkan posting ini untuk semua mereka (kecuali template Tampilan Dinamis).
Pada bagian berikutnya, saya akan menunjukkan kepada Anda bagaimana menerapkan bergulir tak terbatas ke template Blogger kustom.
Terima kasih untuk membaca, dan merasa bebas untuk meninggalkan saya umpan balik.
Jika anda suka dengan artikel ini silahkan like atau comment.
 




 


Category Article

One Response to “Eggi Janitra's Blog”

What's on Your Mind...

Jika ingin berkomentar,berkomentar lah yang sopan.Jika ada komentar yang menjelek-jelekan blog ini jangan salahkan jika kami menghapus komentar anda.

Diberdayakan oleh Blogger.