Adding Infinite Scroll and Full Posts to the Homepage of a Blog in Blogger

Someone asked how I added infinite scroll to a Blogger template - one of the latest free themes shared by Google years ago. 

This is the code to add before the </body> tag. 

<!-- Infinite Scroll for Blogger starts -->
    
<b:if cond='data:view.isHomepage'>
<style>
  .status-msg-wrap { display:none !important; }
  #load-more-btn {
    display: block;
    margin: 30px auto;
    padding: 12px 25px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #222;
    background: #222;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  #load-more-btn:hover { background: #444; }
  #infinite-loader {
    text-align: center;
    padding: 20px;
    display: none;
  }
  #infinite-loader img { width: 32px; }
</style>

<script>
//<![CDATA[
(function() {
    var nextPage = "";
    var loading = false;
    var containerSelector = "div.blog-posts";
    var observer;
    var button;
    var loader;
    var scriptStrip = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;

    function init() {
        var pager = document.querySelector("a.blog-pager-older-link");
        if (!pager) return;

        nextPage = pager.href;
        var blogPager = document.getElementById("blog-pager");
        if (blogPager) blogPager.style.display = "none";

        // Create Load More Button
        button = document.createElement("button");
        button.id = "load-more-btn";
        button.innerText = "Load More Posts";

        // Create Loader Image
        loader = document.createElement("div");
        loader.id = "infinite-loader";
        loader.innerHTML = '<img src="https://blogger.googleusercontent.com/img/a/AVvXsEj1QlHkHewAivRf0n5S6aMiyGVzrw_9Bd0JNkynJpr3xI0J9jpRzhdsIK59OvJVtMIc9yfKZAJ6K6HWMu0Z-meBdoAnnjUd3EfK0nWXBMgaEzHnTfzu0Dj8jQVQvzFbLFFaJZbLuN_Yei3QtCVrae7ir2onLLmWErre2TpIs8q3bs9AA5JpYB3Ldq8Xgg=w640-h640" alt="Loading...">';

        if (blogPager && blogPager.parentNode) {
            blogPager.parentNode.insertBefore(button, blogPager);
            blogPager.parentNode.insertBefore(loader, blogPager);
        }

        button.addEventListener("click", function() {
            loadPosts();
            startObserver();
        });
    }

    function startObserver() {
        observer = new IntersectionObserver(function(entries) {
            if (entries[0].isIntersecting && !loading) {
                loadPosts();
            }
        }, { rootMargin: "400px" });
        observer.observe(button);
    }

    function loadPosts() {
        if (loading || !nextPage) return;

        loading = true;
        button.style.display = "none";
        loader.style.display = "block";

        fetch(nextPage)
            .then(res => res.text())
            .then(function(htmlText) {
                var cleanHtml = htmlText.replace(scriptStrip, "");
                var parser = new DOMParser();
                var doc = parser.parseFromString(cleanHtml, "text/html");

                var newPosts = doc.querySelectorAll(containerSelector + " > *");
                var currentContainer = document.querySelector(containerSelector);

                newPosts.forEach(function(post) {
                    currentContainer.appendChild(post);
                });

                // Crucial for Soho: Tell the theme to recalculate layout
                window.dispatchEvent(new Event('resize'));

                var newPager = doc.querySelector("a.blog-pager-older-link");
                if (newPager) {
                    nextPage = newPager.href;
                    loader.style.display = "none";
                    button.style.display = "block";
                } else {
                    nextPage = "";
                    loader.style.display = "block";
                    loader.innerHTML = "<span>No more posts to show</span>";
                    if(observer) observer.disconnect();
                }

                loading = false;
            })
            .catch(err => {
                console.error("Infinite Scroll Error:", err);
                loading = false;
            });
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
    } else {
        init();
    }
})();
//]]>
</script>
</b:if>
        
<!-- Infinite Scroll for Blogger ends -->

The code works fine with a Soho theme modified (strm.xml) - I didn't test the other themes. 

Note that infinite scrolls can have detrimental effects for SEO. But many readers love it and that's what really matters - I don't care anymore about SEO. LOL. 

Extra: Do you also want to show full posts in homepage? 

This mod implies to edit the XML code of the themes. Process explained in the following links:

1. For Notable.
2. For Contempo. 
3. For Essential Light in this forum thread.

I hope this helps.