epsco: Simplex Design blog : Infinite scrolling or load more effect for Blogger

عنواين الرئيسيه

كشف حقيقة التربح غير المشروع لجمعيات الاسكان التعاونى وتوظيف الاموال ؟ جمع الاموال لمشروع بناء وهمى على ارض محل نزاع قضائى على الملكيه ؟-رسالة من أحد ضحايا كشف الفساد المالى والإدارى -فراد أسرة النائب العام متوغلون في إدارة شركات مكتظة بالفساد المالي -المهندس شريف سوسة رئيسا لشركة بدر الدين للبترول. -إهدار4 ملايين جنيه بشركة بدر الدين للبترول -فساد بـ4 ملايين جنيه بشركات البترول بمطروح-مذكره التي اثارت غضب بعض الافراد من شركه بدر الدين...

السبت، 16 فبراير 2013

Simplex Design blog : Infinite scrolling or load more effect for Blogger - part 1

Link to SimplexDesign - free premium blogspot template

Infinite scrolling or load more effect for Blogger - part 1

Posted: 15 Feb 2013 08:34 AM PST

If you are using Facebook, Twitter or take a look around new websites, you may see most of them use a technique to load next posts automatically, without click on Next or Previous button as we did before. This technique was also applied to Blogger Dynamic interface.
In this post, I will show you how to use this technique to make infinite scrolling or load more effect for normal Blogger blog using a Jquery plugin name Jquery Ajax Scrollling.

Live Demo

Because it too long, so I divide this post into 3 parts with detail as bellow:
- Part 1: Basic usage of Jquery Ajax Scrolling and apply it to default Blogger template
- Part 2: How to apply Infinite Scrolling technique to all Blogger templates.
- Part 3: Combine this Jquery plugin with other plugin ( layout plugins such as Masonry, Isotape, or Disqus comment system, Google Analytics)

Part 1: Basic usage of Jquery Ajax Scrolling and apply it to default Blogger templates

You may heard a technology which was invented several years ago name Ajax. You can google this term to know more. But in this post, Ajax is a technology that allow us to exchange data with a server, and update parts of a web page - without reloading the whole page. Jquery is a framework that support Ajax strongly. With Jquery, users can access a part of HTML page from another page, get the data and then display without reloading. So you can imagine, if we are in page 1, we can use Ajax to access content of page 2, then display them under content of page 1 without reloading, it's the way that Infinite Scrolling technique apply.
To make this function easier and friendly, Jeroen Fiege (http://www.fieg.nl) created Jquery Ajax Scrolling plugin. Instead of remembering parameters for Ajax in Jquery, you can use friendly statement in Jquery Ajax Scrolling.

Now, it's time for practicing.

Install Instruction

1, Download Jquery Ajax Plugin at this address:

https://nodeload.github.com/webcreate/infinite-ajax-scroll/zip/master

You can take a look on documentation and example of this plugin here

http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin

2, Upload Jquery Ajax Scrolling plugin files to your own hosting. Just one file need to upload jquery.ias.min.js

3, In this post, I will show you basic usage, with default Blogger templates (which is provided in Template tab of Blogger Dashboard). Tutorial for applying to custom templates will be part 2.

Open template file by going to Blogger Dashboard -> Template -> Edit HTML
Insert these code before </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 != "item"'>
    <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>

Now you can save changes and see how it work. Remember this can not work if your blog has only one page !

Code explaination

In the code above
- The first line:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

will call Jquery framework which is hosted by Google. You can not use Jquery without calling it before.

- The second line:

<script src="your-own-hosting/jquery.ias.min.js" type="text/javascript"></script>

will call Jquery plugin: Ajax Scrolling.

- Condition statement:

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

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

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

</b:if>

To make sure the script inside only work if current page is not a single post, otherwise, it only work when current page is homepage or archive page.

- The script right after:

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.
});

How it work

- First, when your Page 1 load in user browser, this plugin will search for HTML element which contain link to next page - Page 2 (use information in "pagination" and "next" options above).
- Second, it store the link to Page 2. Hide the whole "pagination" element.
- Third, load Page 2 in computer memory, then scan whole Page 2 for elements specified in "item" option
- Forth, appending items found to "container" .

Conclusion

That's all for default Blogger templates. Because HTML structure of Blogger default templates are the same, so you can apply this post to all them (except Dynamic Views templates).
In the next part, I will show you how to apply infinite scrolling to custom Blogger template.
Thanks for reading, and feel free to leave me feedbacks.