Blogger posts on static sites using RSS

13 February 2022
This is how to parse and display a blogger feed on your website. Replace the URL of the API-call in the last script tag to change the RSS feed the script pulls. Update the months array to change the language for the date to English.
<script>  
let postTitle = new Array();  
let postContent = new Array();  
let postUrl = new Array();  
let postDate = new Array();  
  
let months = [&quot;januari&quot;, &quot;februari&quot;, &quot;maart&quot;, &quot;april&quot;, &quot;mei&quot;, &quot;juni&quot;, &quot;juli&quot;, &quot;augustus&quot;, &quot;september&quot;, &quot;oktober&quot;, &quot;november&quot;, &quot;december&quot;];  
  
let feedSize = 0;  
  
function callback(apiData) {  
    function load() {  
        if (&quot;entry&quot; in apiData.feed) {  
            let feedSize = apiData.feed.entry.length;  
            for (let i = 0; i &lt; feedSize; i++) {  
                let post = apiData.feed.entry[i];  
                console.log(post)  
  
                var p = post.published.$t.substring(5, 7);  
  
                for (var f = 0; f &lt; post.link.length; f++) {  
                    if (post.link[f].rel == &quot;alternate&quot;) {  
                        postUrl.push(post.link[f].href);  
                        break  
                    }  
                }  
  
                let postDateDay = post.published.$t.substring(8, 10);  
                let postDateMonth = months[parseInt(p, 10) - 1];  
                let postDateYear = post.published.$t.substring(0, 4);  
  
                postDate.push(`${postDateDay} ${postDateMonth} ${postDateYear}`);  
  
                postTitle.push(post.title.$t);  
                postContent.push(post.content.$t);  
            }  
        }  
    }  
  
    function display() {  
        let postCount = postTitle.length;  
        var currentPost = 0;  
        while (currentPost &lt; postCount) {          
            document.write(`  
                &lt;article class=&quot;post mt-10&quot;&gt;  
                    &lt;div class=&quot;text-center my-7 max-w-xl mx-auto&quot;&gt;  
                        &lt;h1 id=&quot;post-${currentPost}&quot; class=&quot;mb-0 text-4xl&quot;&gt;${postTitle[currentPost]}&lt;/h1&gt;  
                        &lt;p class=&quot;my-5 bold&quot;&gt;${postDate[currentPost]}&lt;/p&gt;  
                    &lt;/div&gt;  
      
                    &lt;section&gt;  
                        ${postContent[currentPost]}  
                    &lt;/section&gt;  
                &lt;/article&gt;  
      
                &lt;hr class=&quot;my-7 border-none&quot;&gt;  
            `);  
      
            currentPost++  
        }  
    }  
      
    load();  
    display();  
}  
</script>  
<script src="https://webdevelopment-en-meer.blogspot.com/feeds/posts/default?max-results=10&start-index=1&alt=json-in-script&callback=callback"></script>