How To Build An Archive Page for Blogger

Bloggers have discussed an archive page for blogger blogs, and the posts are grouped by month. Since I don’t have many posts, an archive page with posts archived by year is fine.

Method 1

I asked Google Gemini, and it provided me with a piece of JavaScript code. The code works properly, if you would like to add an archive page, follow the steps below.

1 Go to layout, add a gadget, and choose the Blog Archive gadget.
2 Add a new page, and pick a name you like. The page name will be the slug in the page URL.
3 Switch to HTML mode and paste the following code. Set the robots.txt meta tag for the page and hit the Publish button.

 //This code was generated by Google's Gemini AI.
<div id="custom-archive"></div>

<script type="text/javascript">
function createArchive() {
    // 1. Get blog URL (Blogger provides this automatically)
    var blogUrl = window.location.protocol + "//" + window.location.host;

    // 2. Function to fetch posts from the Blogger API
    function fetchPosts(start, callback) {
        var url = blogUrl + "/feeds/posts/default?alt=json-in-script&start-index=" + start + "&max-results=150&callback=?"; // Fetch up to 150 posts at a time
        $.getJSON(url, function (data) {
            callback(data.feed.entry || []); // Handle cases where there are no posts
        });
    }

    // 3.  Process the post data and organize by year (modified for reverse order)
    function processPosts(allPosts) {
        var archiveData = {}; // Store posts grouped by year

        allPosts.forEach(function (post) {
            var publishedDate = new Date(post.published.$t);
            var year = publishedDate.getFullYear();
            var month = publishedDate.getMonth() + 1;
            if (month < 10)
                month = "0" + month;
            var date = publishedDate.getDate();
            if (date < 10)
                date = "0" + date;

            if (!archiveData[year]) {
                archiveData[year] = [];
            }
            archiveData[year].push({
                title: post.title.$t,
                url: post.link.find(link => link.rel === 'alternate').href, // Find the permalink
                date: year + "-" + month + "-" + date  // Format date as YYYY-MM-DD
            });
        });

        // 4.  Build the HTML output (modified for reverse order)
        var html = '<ul>';
        // Sort the years in descending order
        const sortedYears = Object.keys(archiveData).sort((a, b) => b - a);

        for (const year of sortedYears) { // iterate over sorted years
            if (archiveData.hasOwnProperty(year)) {
                html += '<li><strong>' + year + '</strong><ul>';

                //Sort post in descending order in each year.
                archiveData[year].sort((a, b) => new Date(b.date) - new Date(a.date));

                archiveData[year].forEach(post => {
                    html += '<li><a href="' + post.url + '">' + post.title + '</a> <span class="post-date">(' + post.date + ')</span></li>'; // Added span with class
                });
                html += '</ul></li>';
            }
        }
        html += '</ul>';

        // 5.  Insert the HTML into the page
        document.getElementById('custom-archive').innerHTML = html;
    }

    // Initialize variables for fetching all
    var allPosts = [];
    var startIndex = 1; //Start from the beginning.

    function getAllPosts() {
        fetchPosts(startIndex, function (posts) {
            if (posts.length > 0) {
                allPosts = allPosts.concat(posts);
                startIndex += 150;
                getAllPosts();//Recursive call to grab next batch.
            }
            else {
                processPosts(allPosts);
            }

        });
    }

    // Start the process.
    getAllPosts();

}

// Make sure jQuery is loaded (Blogger usually includes it, but this is a safe check)
if (typeof jQuery == 'undefined') {
    var script = document.createElement('script');
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
    script.onload = createArchive; // Call createArchive after jQuery loads
    document.head.appendChild(script);
} else {
    createArchive(); // If jQuery is already loaded, run immediately
}
</script>

4 Add some CSS code to the theme so the archive page looks nice. Hit the Customize button in theme, scroll down to the bottom, add CSS, and paste the following code:

// This code was generated by Google's Gemini AI.
#custom-archive ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
}

#custom-archive li {
    margin-bottom: 0.5em; /* Add spacing between items */
}

#custom-archive li strong {
     display:block; /*Make year take up full width*/
    font-size: 1.2em; /* Make the year headings larger */
    margin-bottom: 0.5em; 
}
   #custom-archive li ul{
    margin-left: 2em; /*Add indent*/
}

5 Visit the page. Change the look and feel by fine-tuning the CSS code.
6 Remove the gadget if you like.

Method 2:

If you are familiar with HTML, write a static archive page with HTML.

Pros and cons:

In the first method, the search engine will see many lines of code on the archive page rather than the actual post titles and links. This is why I choose to set the page as noindex. But the JavaScript code will auto-fetch any new posts you publish, even if the blog has more than 150 posts.

The second method is good for SEO, as Gemini said: Search engines can easily crawl and index a well-structured static archive. But it won’t update automatically, and you will need to add the newest post manually.