Blogger'da Sonsuz Kaydırma

Blogger yıllardır kullandığım bir platform ama bazı özellikleri hâlâ eksik. Bunlardan biri de sonsuz kaydırma özelliği. Günümüzde çoğu sosyal medya ve haber sitesinde aşağı indikçe yeni içerikler otomatik yüklenirken Blogger'da hâlâ sayfalar arasında geçiş yapmak gerekiyor. Neyse ki bunu birkaç satır JavaScript ile değiştirmek mümkün.

Aşağıdaki JavaScript kodunu temanızda </body> etiketinden hemen önce ekleyebilirsiniz.

<script>
document.addEventListener("DOMContentLoaded", function () {
    let loading = false;

    async function loadNextPage() {
        if (loading) return;

        const nextLink = document.querySelector(".blog-pager-older-link");
        if (!nextLink) return;

        loading = true;

        try {
            const response = await fetch(nextLink.href);
            const html = await response.text();

            const parser = new DOMParser();
            const doc = parser.parseFromString(html, "text/html");

            const newPosts = doc.querySelectorAll(".post");
            const container = document.querySelector(".blog-posts");

            newPosts.forEach(post => {
                container.appendChild(post);
            });

            const newNext = doc.querySelector(".blog-pager-older-link");

            if (newNext) {
                nextLink.href = newNext.href;
            } else {
                nextLink.remove();
            }
        } catch (e) {
            console.error(e);
        }

        loading = false;
    }

    window.addEventListener("scroll", () => {
        if (
            window.innerHeight + window.scrollY >=
            document.body.offsetHeight - 300
        ) {
            loadNextPage();
        }
    });
});
</script>

Bu kod her temada birebir çalışmayabilir. Çünkü bazı Blogger temalarında gönderilerin class adı .post yerine farklı olabiliyor. Aynı şekilde yazıların bulunduğu alan da .blog-posts yerine başka bir class kullanabiliyor. Kendi temanızdaki HTML yapısına göre değiştirmeniz gerekebilir.