How To Add An All-In-One Posts Widget With A Banner On Blogger?

In the last few months, I've been doing some cleaning up for my blogger site, looking at ways to offer more to my readers without cluttering the layout of my site and having my widgets compete for traffic so I introduce to you my all-in-one posts widget.

I call it this because I am able to link three RSS feeds and have my posts display based on these 3 links. I've been blogging for years and trying to figure the best post widget for my readers be it a recent, random or related posts widget so I feel this widget answers all my questions.

This widget focuses on the most recent posts seeing as they incorporate RSS and I set mine to 24 posts and each time only 3 posts load. Rather than linking it to all my posts I prefer linking certain URLs as I feel this would be the perfect way to get readers to explore more of my site.

I got this widget with the sole purpose of promoting my static pages which is where this banner comes in. Similar to the posts widget, I get multiple images with links to load randomly as this would help give these pages more visibility.

By sharing this code, I hope it helps give your posts the recognition it deserves.

1. Code for posts widget that will only appear on posts pages which I added on my Blogger HTML 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div id='randomised-posts-widget'>

  <!-- Navigation Collage Banner (Top) -->

  <div id='random-banner' style='margin-bottom: 15px;'/>

  <!-- Posts Section -->

  <h4>More From Insidus ZA</h4>

  <div id='randomised-inner'>Loading randomised posts...</div>

</div>

<style>

  #randomised-posts-widget { 

    margin: 30px 0 20px; 

    padding: 15px; 

    background: #fd0000; 

    border-radius: 8px; 

    border: 1px solid #eee; 

  }

  #randomised-posts-widget h4 { 

    margin: 0 0 12px; 

    font-size: 17px; 

    text-align: center; 

    color: #fff; 

    border-bottom: 2px solid #ffffff; /* blue line like your edit */

    padding-bottom: 6px; 

  }

  .randomised-item { 

    margin-bottom: 12px; 

    overflow: hidden; 

  }

  .randomised-item img { 

    float: left; 

    margin-right: 10px; 

    width: 72px; 

    height: 72px; 

    object-fit: cover; 

    border-radius: 4px; 

    border: 2px solid #fff;

  }

  .randomised-item a { 

    text-decoration: none; 

    color: #fff; 

    display: block; 

  }

  .randomised-item strong { 

    display: block; 

    line-height: 1.3; 

    font-size: 14px; 

  }

  #random-banner img {

    width: 100%;

    height: auto;

    border-radius: 6px;

    display: block;

  }

</style>

<script type='text/javascript'>

//<![CDATA[

var allPosts = [];

var feedsComplete = 0;

var totalFeeds = 3;

// === YOUR BANNERS (use the collage images you created) ===

var banners = [

{

    img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eKGXdvPDcwCyNN1rd7v2zHBpxYpE8MfybZwsEDuXO5iS6ae6HtfAskP3ic_Fs6tVsgVHJt11mWWmT3cLzMpkS4cX9OGHQmgHgKXcPf6s-D-zwoUmI4EF0rGOKBJ_fPXB-mhj9yMSxZJLEpzP8WUKeGk0pmoKC7p5bJrJm1U-UfWSFly_s14cNDVDz4k/s1920/InShot_20260818_132236328.jpg",   // the one you just made

    url: "https://prsdube17.blogspot.com/p/featured-posts-from-insidus-plus.html?m=1",

    alt: "InsidusPlus - Featured"

  },

  {

    img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjRNv5w7CW1C3yzDGtmtoooYI_4jklhAn8zqnY1m7n5NB1MZZVph6g2jn5zJkEV734PfUOUr94Rs0ZsbFjOMvlzUmjDJSaVDBzaKyQqXnqqK89FL8WNqAiVxrHcVDmrTfXDQGADep389-gd-KzRYieIAgYgk88B9wrgBihcztOhAGfuU0A-v9_UkWfTCM/s1920/InShot_20260818_131739037.jpg",   // the one you just made

    url: "https://www.insidus.co.za/p/featured-attractions.html",

    alt: "InsidusZA - Featured"

  },

  {

    img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzk_5fguQdn4BCJM3WEAEhofI-prOVHkqv7bflE2d1Z8ZYDQwVk3gnM57KROL_F39pG3O_zqk7hXwyqwz5FlMnbvyYX98cbSeUlF4TDwuQQqMNzVWOqT3eBccEtjveSsIB1Y_PSZfCdt1xO8HRj7FKzi4S-qF8HquNbJhCCarMrQBS980CRS0DH6E5_Ko/s2048/InShot_20260804_184206849.jpg",

    url: "https://www.insidus.co.za/p/posts-you-might-like.html",

    alt: "InsidusZA - More Posts"

  },

  {

    img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwBUK2H694GQR2Ra18SnQbCy6waeh68LbtvlwC4ZmqDGLXJ-Hv56OIWpT-mKVn6qyVAs_9TDR9Vz9Ei3kjVK3MBcomisfc-rvX-11IsYnpoJSqhXCLr0jN5Z5SKWlgfpekDfQ-s2YRpynUR3MFPFITHDsqqEhPTC3qKQQBviqn7YRBin1uxAQNASvJZE/s1920/InShot_20260818_133348111.jpg",

    url: "https://taplink.cc/prsdube16",

    alt: "InsidusZA - Social"

  },

  {

    img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqh4w4lsPQ2kYscZbK0MZq-UIrA0X4ZZyW1JA05nitV8PBgNs5GQeWNXtWCslbt4hpQ9omf6nDJHDvOXmf8wcE0u7Sb8Uw89vrrGv8IzUrJgw1n5es7HuKBNbqD40tsTT8WqW0kwhTtcToquTxdp8ip083hokkMxFHKU0wsH2k6mR-aEz1GtBFw2l67LU/s2048/InShot_20260731_191519618.jpg",

    url: "https://prsdube18.blogspot.com/p/posts-you-might-like.html",

    alt: "InsidusZA - Games & Comics"

  }

];

// =======================================================

function handleFeed(json) {

  feedsComplete++;

  if (json && json.feed && json.feed.entry) {

    var entries = json.feed.entry;

    for (var i = 0; i < entries.length; i++) {

      var entry = entries[i];

      var title = entry.title.$t || "Untitled";

      var url = "";

      if (entry.link) {

        for (var j = 0; j < entry.link.length; j++) {

          if (entry.link[j].rel === "alternate") {

            url = entry.link[j].href;

            break;

          }

        }

      }

      var thumb = "https://via.placeholder.com/72?text=No+Img";

      if (entry.media$thumbnail && entry.media$thumbnail.url) {

        thumb = entry.media$thumbnail.url.replace(/\/s72-w\d+-c\//, "/s72-c/");

      }

      allPosts.push({title: title, url: url, thumb: thumb});

    }

  }

  if (feedsComplete >= totalFeeds) {

    renderRandomPosts();

  }

}

function renderRandomPosts() {

  var container = document.getElementById("randomised-inner");

  if (!container) return;

  

  if (allPosts.length === 0) {

    container.innerHTML = '<p style="color:#fff;">No posts available right now.</p>';

    return;

  }

  var shuffled = allPosts.slice();

  for (var i = shuffled.length - 1; i > 0; i--) {

    var j = Math.floor(Math.random() * (i + 1));

    var temp = shuffled[i];

    shuffled[i] = shuffled[j];

    shuffled[j] = temp;

  }

  var selected = shuffled.slice(0, 3); // change to 3 or 5 if you want

  var html = "";

  for (var k = 0; k < selected.length; k++) {

    var post = selected[k];

    html += '<div class="randomised-item"><a href="' + post.url + '">' +

            '<img loading="lazy" src="' + post.thumb + '" alt="' + post.title.replace(/"/g, '&quot;') + '" width="72" height="72">' +

            '<strong>' + post.title + '</strong></a></div>';

  }

  container.innerHTML = html;

}

// Show one random collage banner on top

function renderRandomBanner() {

  var container = document.getElementById("random-banner");

  if (!container || banners.length === 0) return;

  var randomBanner = banners[Math.floor(Math.random() * banners.length)];

  container.innerHTML = '<a href="' + randomBanner.url + '" target="_blank" rel="noopener">' +

                        '<img src="' + randomBanner.img + '" alt="' + randomBanner.alt + '" loading="lazy">' +

                        '</a>';

}

// Initialize

renderRandomBanner();

//]]>

</script>

<!-- Feed Scripts -->

<script defer='defer' src='https://insidus.co.za/feeds/posts/default/-/Upcoming?alt=json-in-script&amp;max-results=8&amp;callback=handleFeed'/>

<script defer='defer' src='https://insidus.co.za/feeds/posts/default/-/Featured%20Posts?alt=json-in-script&amp;max-results=8&amp;callback=handleFeed'/>

<script defer='defer' src='https://insidus.co.za/feeds/posts/default/-/Reviews?alt=json-in-script&amp;max-results=8&amp;callback=handleFeed'/>

</b:if>

2. Code for posts widget that will appear wherever you want it to be seen through the Blogger layout tab 

<div id='randomised-posts-widget'>

  <!-- Navigation Collage Banner (Top) -->

  <div id='random-banner' style='margin-bottom: 15px;'/>

  <!-- Posts Section -->

  <h4>More From Insidus ZA</h4>

  <div id='randomised-inner'>Loading randomised posts...</div>

</div>

<style>

  #randomised-posts-widget { 

    margin: 30px 0 20px; 

    padding: 15px; 

    background: #fd0000; 

    border-radius: 8px; 

    border: 1px solid #eee; 

  }

  #randomised-posts-widget h4 { 

    margin: 0 0 12px; 

    font-size: 17px; 

    text-align: center; 

    color: #fff; 

    border-bottom: 2px solid #ffffff; /* blue line like your edit */

    padding-bottom: 6px; 

  }

  .randomised-item { 

    margin-bottom: 12px; 

    overflow: hidden; 

  }

  .randomised-item img { 

    float: left; 

    margin-right: 10px; 

    width: 72px; 

    height: 72px; 

    object-fit: cover; 

    border-radius: 4px; 

    border: 2px solid #fff;

  }

  .randomised-item a { 

    text-decoration: none; 

    color: #fff; 

    display: block; 

  }

  .randomised-item strong { 

    display: block; 

    line-height: 1.3; 

    font-size: 14px; 

  }

  #random-banner img {

    width: 100%;

    height: auto;

    border-radius: 6px;

    display: block;

  }

</style>

<script type='text/javascript'>

//<![CDATA[

var allPosts = [];

var feedsComplete = 0;

var totalFeeds = 3;

// === YOUR BANNERS (use the collage images you created) ===

var banners = [

{

    img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eKGXdvPDcwCyNN1rd7v2zHBpxYpE8MfybZwsEDuXO5iS6ae6HtfAskP3ic_Fs6tVsgVHJt11mWWmT3cLzMpkS4cX9OGHQmgHgKXcPf6s-D-zwoUmI4EF0rGOKBJ_fPXB-mhj9yMSxZJLEpzP8WUKeGk0pmoKC7p5bJrJm1U-UfWSFly_s14cNDVDz4k/s1920/InShot_20260818_132236328.jpg",   // the one you just made

    url: "https://prsdube17.blogspot.com/p/featured-posts-from-insidus-plus.html?m=1",

    alt: "InsidusPlus - Featured"

  },

  {

    img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjRNv5w7CW1C3yzDGtmtoooYI_4jklhAn8zqnY1m7n5NB1MZZVph6g2jn5zJkEV734PfUOUr94Rs0ZsbFjOMvlzUmjDJSaVDBzaKyQqXnqqK89FL8WNqAiVxrHcVDmrTfXDQGADep389-gd-KzRYieIAgYgk88B9wrgBihcztOhAGfuU0A-v9_UkWfTCM/s1920/InShot_20260818_131739037.jpg",   // the one you just made

    url: "https://www.insidus.co.za/p/featured-attractions.html",

    alt: "InsidusZA - Featured"

  },

  {

    img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzk_5fguQdn4BCJM3WEAEhofI-prOVHkqv7bflE2d1Z8ZYDQwVk3gnM57KROL_F39pG3O_zqk7hXwyqwz5FlMnbvyYX98cbSeUlF4TDwuQQqMNzVWOqT3eBccEtjveSsIB1Y_PSZfCdt1xO8HRj7FKzi4S-qF8HquNbJhCCarMrQBS980CRS0DH6E5_Ko/s2048/InShot_20260804_184206849.jpg",

    url: "https://www.insidus.co.za/p/posts-you-might-like.html",

    alt: "InsidusZA - More Posts"

  },

  {

    img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwBUK2H694GQR2Ra18SnQbCy6waeh68LbtvlwC4ZmqDGLXJ-Hv56OIWpT-mKVn6qyVAs_9TDR9Vz9Ei3kjVK3MBcomisfc-rvX-11IsYnpoJSqhXCLr0jN5Z5SKWlgfpekDfQ-s2YRpynUR3MFPFITHDsqqEhPTC3qKQQBviqn7YRBin1uxAQNASvJZE/s1920/InShot_20260818_133348111.jpg",

    url: "https://taplink.cc/prsdube16",

    alt: "InsidusZA - Social"

  },

  {

    img: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqh4w4lsPQ2kYscZbK0MZq-UIrA0X4ZZyW1JA05nitV8PBgNs5GQeWNXtWCslbt4hpQ9omf6nDJHDvOXmf8wcE0u7Sb8Uw89vrrGv8IzUrJgw1n5es7HuKBNbqD40tsTT8WqW0kwhTtcToquTxdp8ip083hokkMxFHKU0wsH2k6mR-aEz1GtBFw2l67LU/s2048/InShot_20260731_191519618.jpg",

    url: "https://prsdube18.blogspot.com/p/posts-you-might-like.html",

    alt: "InsidusZA - Games & Comics"

  }

];

// =======================================================

function handleFeed(json) {

  feedsComplete++;

  if (json && json.feed && json.feed.entry) {

    var entries = json.feed.entry;

    for (var i = 0; i < entries.length; i++) {

      var entry = entries[i];

      var title = entry.title.$t || "Untitled";

      var url = "";

      if (entry.link) {

        for (var j = 0; j < entry.link.length; j++) {

          if (entry.link[j].rel === "alternate") {

            url = entry.link[j].href;

            break;

          }

        }

      }

      var thumb = "https://via.placeholder.com/72?text=No+Img";

      if (entry.media$thumbnail && entry.media$thumbnail.url) {

        thumb = entry.media$thumbnail.url.replace(/\/s72-w\d+-c\//, "/s72-c/");

      }

      allPosts.push({title: title, url: url, thumb: thumb});

    }

  }

  if (feedsComplete >= totalFeeds) {

    renderRandomPosts();

  }

}

function renderRandomPosts() {

  var container = document.getElementById("randomised-inner");

  if (!container) return;

  

  if (allPosts.length === 0) {

    container.innerHTML = '<p style="color:#fff;">No posts available right now.</p>';

    return;

  }

  var shuffled = allPosts.slice();

  for (var i = shuffled.length - 1; i > 0; i--) {

    var j = Math.floor(Math.random() * (i + 1));

    var temp = shuffled[i];

    shuffled[i] = shuffled[j];

    shuffled[j] = temp;

  }

  var selected = shuffled.slice(0, 3); // change to 3 or 5 if you want

  var html = "";

  for (var k = 0; k < selected.length; k++) {

    var post = selected[k];

    html += '<div class="randomised-item"><a href="' + post.url + '">' +

            '<img loading="lazy" src="' + post.thumb + '" alt="' + post.title.replace(/"/g, '&quot;') + '" width="72" height="72">' +

            '<strong>' + post.title + '</strong></a></div>';

  }

  container.innerHTML = html;

}

// Show one random collage banner on top

function renderRandomBanner() {

  var container = document.getElementById("random-banner");

  if (!container || banners.length === 0) return;

  var randomBanner = banners[Math.floor(Math.random() * banners.length)];

  container.innerHTML = '<a href="' + randomBanner.url + '" target="_blank" rel="noopener">' +

                        '<img src="' + randomBanner.img + '" alt="' + randomBanner.alt + '" loading="lazy">' +

                        '</a>';

}

// Initialize

renderRandomBanner();

//]]>

</script>

<!-- Feed Scripts -->

<script defer='defer' src='https://insidus.co.za/feeds/posts/default?alt=json-in-script&amp;max-results=8&amp;callback=handleFeed'/>

<script defer='defer' src='https://insidus.co.za/feeds/posts/default/-/Featured%20Posts?alt=json-in-script&amp;max-results=8&amp;callback=handleFeed'/>

<script defer='defer' src='https://insidus.co.za/feeds/posts/default/-/Reviews?alt=json-in-script&amp;max-results=8&amp;callback=handleFeed'/>

Notes

• YOUR BANNERS (img: image URL, src: link to the site, alt: text)

• var selected = shuffled.slice(0, 3), you can set to any number of random posts 

• Feed Scripts: By script defer SRC you can replace with your URL and the max number of posts you want to have displayed on that particular label.