Blogger Widgets Without jQuery: Recent Posts, Random Posts and Recent Comments (2026)

Recent posts with thumbnails, random posts, latest comments, popular posts and a contact form are the five widgets almost every blog wants in its sidebar. Old tutorials (including the 2014 versions on this blog) relied on jQuery and scripts hosted on sites that no longer exist, so most of those widgets are broken today. This guide gives you modern, dependency-free versions that read your own blog's feed and work on any Blogger theme and custom domain.

How these widgets work

Every Blogger blog publishes a JSON feed of its posts and comments, for example /feeds/posts/summary?alt=json. A small script fetches that feed from your own domain, so no third-party server is involved, and builds the list in the browser.

Adding any widget

1. Go to Layout and click Add a Gadget in the sidebar.
2. Choose HTML/JavaScript, give it a title (for example "Recent posts"), and paste the code.
3. Click Save.

All the widgets below share this small stylesheet. Paste it once, at the top of the first widget:

<style>
.tw-list{list-style:none;margin:0;padding:0}
.tw-list li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(127,127,127,.2)}
.tw-list img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.tw-list a{font-weight:600;line-height:1.35;text-decoration:none}
.tw-list small{display:block;opacity:.7;font-size:12px;margin-top:2px}
</style>

1. Recent posts with thumbnails

<ul class="tw-list" id="tw-recent"><li>Loading...</li></ul>
<script>
(function () {
  var COUNT = 5;
  var box = document.getElementById('tw-recent');
  fetch('/feeds/posts/summary?alt=json&max-results=' + COUNT)
    .then(function (r) { return r.json(); })
    .then(function (data) {
      box.innerHTML = '';
      (data.feed.entry || []).forEach(function (e) {
        var link = e.link.filter(function (l) { return l.rel === 'alternate'; })[0];
        var img = e.media$thumbnail ? e.media$thumbnail.url.replace(/\/s72(-c)?\//, '/w128-h128-c/') : '';
        var date = new Date(e.published.$t).toLocaleDateString();
        var li = document.createElement('li');
        li.innerHTML = (img ? '<img alt="" loading="lazy" src="' + img + '">' : '') +
          '<div><a></a><small>' + date + '</small></div>';
        var a = li.querySelector('a'); a.href = link.href; a.textContent = e.title.$t;
        box.appendChild(li);
      });
    })
    .catch(function () { box.innerHTML = '<li>Could not load posts.</li>'; });
})();
</script>

Change COUNT to show more or fewer posts. Posts without images simply show the title.

2. Random posts

Random posts help old articles get read again. The script reads the total number of posts, picks random positions, and loads one post from each:

<ul class="tw-list" id="tw-random"><li>Loading...</li></ul>
<script>
(function () {
  var COUNT = 5, box = document.getElementById('tw-random');
  function get(url) { return fetch(url).then(function (r) { return r.json(); }); }
  get('/feeds/posts/summary?alt=json&max-results=0').then(function (d) {
    var total = +d.feed.openSearch$totalResults.$t, picks = [];
    while (picks.length < Math.min(COUNT, total)) {
      var n = 1 + Math.floor(Math.random() * total);
      if (picks.indexOf(n) === -1) picks.push(n);
    }
    return Promise.all(picks.map(function (n) {
      return get('/feeds/posts/summary?alt=json&max-results=1&start-index=' + n);
    }));
  }).then(function (results) {
    box.innerHTML = '';
    results.forEach(function (d) {
      var e = d.feed.entry[0];
      var link = e.link.filter(function (l) { return l.rel === 'alternate'; })[0];
      var li = document.createElement('li'), a = document.createElement('a');
      a.href = link.href; a.textContent = e.title.$t; li.appendChild(a); box.appendChild(li);
    });
  });
})();
</script>

3. Recent comments

<ul class="tw-list" id="tw-comments"><li>Loading...</li></ul>
<script>
(function () {
  var COUNT = 5, LENGTH = 70, box = document.getElementById('tw-comments');
  fetch('/feeds/comments/summary?alt=json&max-results=' + COUNT)
    .then(function (r) { return r.json(); })
    .then(function (data) {
      box.innerHTML = '';
      (data.feed.entry || []).forEach(function (e) {
        var link = e.link.filter(function (l) { return l.rel === 'alternate'; })[0];
        var text = (e.summary ? e.summary.$t : '').replace(/<[^>]+>/g, '');
        if (text.length > LENGTH) text = text.slice(0, LENGTH) + '...';
        var li = document.createElement('li');
        li.innerHTML = '<div><a></a><small></small></div>';
        li.querySelector('a').href = link.href;
        li.querySelector('a').textContent = e.author[0].name.$t + ':';
        li.querySelector('small').textContent = text;
        box.appendChild(li);
      });
    });
})();
</script>

Comment text is inserted with textContent, never as HTML, so a malicious comment can't inject code into your sidebar.

4. Popular posts: use Blogger's built-in gadget

Blogger tracks page views itself, so you don't need a script. Go to Layout > Add a Gadget > Popular Posts, choose the time range (7 days, 30 days or all time), the number of posts and whether to show thumbnails and snippets. It updates automatically.

5. Contact form

Blogger has a built-in Contact Form gadget (Layout > Add a Gadget > Contact Form). Messages go to the blog owner's email. It can only be placed in a gadget area such as the sidebar or footer, not inside a page.

For a contact form on its own page, embed a Google Form:

1. Create a form at forms.google.com with name, email and message fields.
2. Click Send > < > (Embed) and copy the iframe code.
3. In Blogger, create a Page, switch to HTML view, and paste:

<iframe src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true"
        width="100%" height="900" style="border:0" loading="lazy">Loading...</iframe>

In the form's Responses tab, turn on email notifications so you're told about new messages.

Troubleshooting

• "Loading..." never changes: check Settings > Site feed. "Allow blog feed" must not be None. Open /feeds/posts/summary?alt=json on your blog to confirm the feed works.
• Blurry thumbnails: the image in the post was uploaded small. Use images at least 640px wide.
• Works on blogspot.com but not on my domain: the scripts use relative URLs (/feeds/...), so they work on both. If you copied an older version with http:// URLs, the browser blocks it on HTTPS sites.

Want a related posts widget too? See Related Posts Widget for Blogger with Thumbnails.