Infinite Post Scrolling Effect for Custom Blogger Templates

P

reviously i shared  Infinite Post Scrolling Effect for Default Blogger Templates, and in this post, I will go to show you how to apply this technique to all custom Blogger templates, so as this tutorial was really big, so simplex design divided its content into 3 posts, so 1 post was posted for only the default templates provided by blogger so if you were using the default then you can follow the previous post, and if you are using the custom made blogger template then this tutorial is for you.

How To Apply Infinite Post Scrolling Effect In Custom Blogger Templates?

• Go to Blogger –> Template –> Edit HTML.
• Now click on Expand Template Widgets.
• Press Ctrl + F and search for <b:includable id='post' var='post'> and you will find some code like below.

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

• Now just add some HTML codes between to make them look like below code.

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

    <-- code here -->

    </div>
    </b:includable>

• Now again search for <b:includable id='main' var='top'> and you will see codes like below.

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

    <-- code here -->

    </b:includable>

• Now just add another HTML codes between them to make them look like below code.

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

    <-- code here -->

    </div>
    </b:includable>

• Now again search for <b:includable id='nextprev'> and you will see some code like below.

    <b:includable id='nextprev'>

    <-- code here -->

    </b:includable>

• Now just add another HTML code between them to make them look like below one.

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

    <-- code here -->

    </div>
    </b:includable>

• Now right inside this nextprev includable tag you will find another HTML tag some like <a expr:href='data:olderPageUrl'> --------- </a> just add some HTML code between them and make them look like below code.

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

• Now just click on Save Template, if you find any error during save you might have messed up something and you should better check steps again.
• Now older steps are remaining that we used in other post check below.
• Now search for </head> tag and paste below code above it.

    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <script src='http://www.fieg.nl/wp-content/themes/fieg-b/js/jquery.ias.min.js' type='text/javascript'></script>
    <script type='text/javascript'>

    jQuery.ias({
        container : '.ias_container',
        item: '.ias_item',
        pagination: '#ias_pagination',
        next: '#ias_page_next a',
        loader: 'http://www.henley-putnam.edu/Portals/_default/Skins/henley/images/loading.gif'
    });
      
    </script>

• Now if you already have that red jquery line installed just remove it.
• Now Save Template once again and refresh your blog to see this awesome infinite loading effect. Well that clears the whole tutorial and ends it up.

---

Once again thanks to Simplex Design for creating this awesome tutorial, well you can visit their page for getting more insights on this script.