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

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

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

الاثنين، 25 فبراير 2013

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

Link to SimplexDesign - free premium blogspot template

Infinite scrolling or load more effect for Blogger - part 2

Posted: 24 Feb 2013 10:22 AM PST

As introduced in last post on Jquery Ajax Scrolling plugin, the basic usage and how to apply it to default Blogger templates, this post, I will go further on the way to apply this technique to all custom Blogger template

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 2: How to apply Infinite Scrolling technique to all Blogger templates.

To install Ajax Scrolling plugin to a custom Blogger template, I recommend you read the part 1 first which I explain everything clearly.

Install instruction

1, Open your template file.

2, Search for <b:includable id='post' var='post'> , it will show you the "post" includable in "Blog post" widget. (For more information on what includable, what widget is, you can take a look at this post)
You will get something like this

<b:includable id='post' var='post'>
........code here ..........
<</b:includable>

Now just add HTML into these tags to make it look like this:

<b:includable id='post' var='post'>
<div class="ias_item">

........code here ..........

</div>
</b:includable>

3, Now we search for <b:includable id='main' var='top'>, it will show you the "main" includable in "Blog post" widget.
Something like this :

<b:includable id='main' var='top'>

.......code here...........
</b:includable>

Now, add HTML to make these tags above look like this:

<b:includable id='main' var='top'>
<div class="ias_container">

.......code here...........

</div>
</b:includable>

Ok done.
4, Now search for <b:includable id='nextprev'> , it will show you the "nextprev" includablein Blog post widget.

<b:includable id='nextprev'>

.......code here.......

</b:includable>

Add HTML tag to make code above look like this:

<b:includable id='nextprev'>
<div id="ias_pagination">

.......code here.......

</div>
</b:includable>

In the code "nextprev" includable above, find this HTML element : <a expr:href='data:olderPageUrl'> ............ </a> , this element can contain other things inside, but don't need to care about them, if you see expr:href='data:olderPageUrl' , it means you find the correct one.

Wrap <a expr:href='data:olderPageUrl'> ............ </a> by HTML tags like this:

<div id="ias_page_next"><a expr:href='data:olderPageUrl'> ............ </a></div>

5, After finish steps above, you can install Ajax Scrolling plugin as normal by adding this code right 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 : '.ias_container',
    item: '.ias_item',
    pagination: '#ias_pagination',
    next: '#ias_page_next a',
    loader: 'your-own-hosting/loading.gif'
});

</script>
</b:if>

Save template and see the result.

How it work

Until now, do you have the picture of what we are doing? Yes, in part 1 of this series for default Blogger template, I explained elements of Ajax Scrolling script with detail on "container", "item", "pagination", "next", "loader" in script.
In a custom Blogger templates, there's no "container", "item", "pagination", "next" element for you, so we add HTML elements and then assign this to Ajax scrolling script.

That's all for this post. I will post the next one at the soonest on the way to combination Ajax Scrolling plugin with Disqus, Masonry ...