How to Add a Random Posts Widget

If you have many published posts on your blog, older articles can easily get buried beneath newer ones, making them harder for visitors to discover. With this Blogger Random Posts Widget, your posts will be displayed randomly, giving older articles another chance to be seen.

In this tutorial, you'll learn how to add a lightweight Random Posts Widget to your Blogger blog. It features a sleek loading spinner, a responsive layout with a maximum height of 500px (which you can easily adjust), and a JavaScript configuration section at the top for quick and easy customization.

What is a Random Posts Widget?

A Random Posts Widget displays random posts on your blog. It's a great way to introduce readers to more of your content and give older posts a chance to be discovered instead of letting them get buried under newer posts.

The widget I've created allows you to display a list of random posts with thumbnails, snippets, comment counts, and post dates. You can customize it to hide thumbnails, adjust their size and alignment (if you're familiar with CSS), change the length of the snippets, and display posts from specific categories or labels.

If you want to see all your posts instead of just random ones, you can also check out my HTML sitemap.

• Add an HTML Sitemap with Live Search
• Add a Crunchyroll-Style HTML Sitemap

How to Add Random Posts Widget to a Blogger Gadget

1. In your Blogger Dashboard, navigate to Layout.
2. Choose where you want to display the widget (e.g., Sidebar or Footer) and click Add a Gadget.
3. From the pop-up list, select HTML/JavaScript.
4. Enter a Title (e.g., "Random Posts" or "Recommended For You"). In the Content box, copy and paste the code.

   <div id="random-posts-widget">
     <div class="rpw-loader">
       <div class="rpw-spinner"></div>
     </div>
     <div class="rpw-list" id="rpw-posts-container"></div>
   </div>
   
   <style>
       /*
   - Random Posts Widget
   - Source code: https://writewhim.blogspot.com/2026/10/adding-random-posts-widget.html
   */
   #random-posts-widget{max-height: 500px; overflow-y: auto; color: #333; padding: 5px; box-sizing: border-box; position: relative;}
   #random-posts-widget::-webkit-scrollbar{width: 6px;}
   #random-posts-widget::-webkit-scrollbar-thumb{background: #ccc; border-radius: 3px;}
   .rpw-loader{display: flex; justify-content: center; align-items: center; padding: 30px 0;}
   .rpw-spinner{width: 32px; height: 32px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: rpw-spin 0.8s linear infinite;}
   @keyframes rpw-spin{0%{transform: rotate(0deg);}
   100%{transform: rotate(360deg);}
   }
   .rpw-item{display: flex; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-top-color);}
   .rpw-item:last-child{border-bottom: none; margin-bottom: 0;}
   .rpw-thumb-wrap{flex-shrink: 0; width: 90px; height: 90px; border-radius: 6px; overflow: hidden; background-color: #f0f0f0;}
   .rpw-thumb-wrap img{width: 100%; height: 100%; object-fit: cover; display: block;}
   .rpw-content{flex-grow: 1; min-width: 0;}
   .rpw-title{margin: 0 0 6px 0; font-size: 15px; font-weight: 600; line-height: 1.3;}
   .rpw-title a{ text-decoration: none; transition: color 0.2s;}
   .rpw-title a:hover{color: #3498db;}
   .rpw-meta{font-size: 11px; color: #777; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
   .rpw-meta span{display: inline-flex; align-items: center;}
   .rpw-labels{margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px;}
   .rpw-label-tag{font-size: 10px; background: #eef2f5; color: #555; padding: 2px 6px; border-radius: 3px; text-decoration: none; text-transform: uppercase; font-weight: 500;}
   .rpw-label-tag:hover{background: #3498db; color: #fff;}
   .rpw-snippet{font-size: 12px; color: #555; line-height: 1.4; margin: 0;}
   @media (max-width: 480px){.rpw-thumb-wrap{width: 75px; height: 75px;}
   .rpw-title{font-size: 14px;}
   }
   .commentIcon::before{content: "\f27a"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px;}
   .authorIcon::before{content: "\f007"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px;}
   .dateIcon::before{content: "\f073"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px;}
   .rpw-labels a::before{content: "#";}
   </style>
   
   <script>
   const RPW_CONFIG = {
     numPosts: 5,             // Number of random posts to show
     showThumbnail: true,      // Show thumbnail (true / false)
     noImage: 'https://via.placeholder.com/150?text=No+Image', // Fallback image URL
     noPostText: 'No posts found.',
     
     // Post Meta Visibility Controls (true / false)
     showAuthor: true,        // Show author name
     showComments: true,      // Show comment count
     showDate: true,          // Show publication date
     showSnippet: true,       // Show post snippet text
     snippetLength: 120,       // Snippet character length
   
     // Label Controls
     maxLabels: 2,            // Maximum number of labels to show per post (e.g., 3, or set to 0 to hide all)
   
     // Custom Label Filtering
     useCustomLabel: false,   // Filter by a specific label? (true / false)
     labelName: 'Blogger'  // Exact label name (case-sensitive) if useCustomLabel is true
   };
   
   eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(o(){6 r=s.1Q(\'8-y-r\');6 E=s.1C(\'#1m-y-1E .8-E\');o L(1c){K 1c.J(/[&<>\'"]/g,q=>({\'&\':\'&1H;\',\'<\':\'&1S;\',\'>\':\'&1P;\',"\'":\'&#1R;\',\'"\':\'&1J;\'}[q]||q))}b B=\'/1q/y/m\';4(3.1w&&3.A.u()!==\'\'){B+=\'/-/\'+V(3.A.u())}B+=\'?X=17-18-i&S-12=0&14=1s\';o U(x){6 i=s.1L(\'i\');i.x=x;s.1O.1I(i)}1a.1s=o(D){6 T=1F(D.1o.1G$1M.$t,10);4(T===0){E.1g.1d=\'1e\';r.H=\'<5 7="15">\'+L(3.1f)+\'</5>\';K}6 1r=N.S(1,T-3.13+1);6 19=N.1D(N.1m()*1r)+1;b G=\'/1q/y/m\';4(3.1w&&3.A.u()!==\'\'){G+=\'/-/\'+V(3.A.u())}G+=\'?X=17-18-i&1K-1N=\'+19+\'&S-12=\'+3.13+\'&14=1b\';U(G)};1a.1b=o(D){E.1g.1d=\'1e\';6 M=D.1o.2||[];4(M.Z===0){r.H=\'<5 7="15">\'+L(3.1f)+\'</5>\';K}b 9=\'\';M.21(2=>{b z=\'#\';4(2.1k){6 R=2.1k.2l(l=>l.1n===\'2m\');4(R)z=R.w}6 f=2.f.$t||\'2n\';b W=3.2k;4(2.P$Q&&2.P$Q.1h){W=2.P$Q.1h.J(/\\/2j(-c)?\\//,\'/2f-2g-p-k-2p-2i/\')}6 e=(2.e&&2.e[0]&&2.e[0].16)?2.e[0].16.$t:\'\';b F=\'\';4(2.O&&2.O.$t){6 d=2o 2q(2.O.$t);F=d.1T(2t,{2r:\'1z\',2s:\'2u\',2h:\'1z\'})}b Y=\'0\';4(2.1y$1B){Y=2.1y$1B.$t+\'\'}b C=\'\';4(2.1A&&3.1v>0){6 1p=2.1A.2d(0,3.1v);C=1p.20(I=>`<a 7="8-v-q"1n="q"w="/2e/v/${V(I.1t)}">${I.1t}</a>`).1u(\'\')}b n=\'\';4(3.1i&&2.m&&2.m.$t){n=2.m.$t.J(/<[^>]*>/g,\'\').22(0,3.1x);4(2.m.$t.Z>3.1x)n+=\'...\'}9+=`<5 7="8-1Z">`;4(3.1Y){9+=`<5 7="8-1U-1V"><a w="${z}"1j-v="${f}"><1W x="${W}"X="${f}"1X="23"/></a></5>`}9+=`<5 7="8-24">`;9+=`<1l 7="8-f"><a w="${z}"1j-v="${f}">${f}</a></1l>`;6 j=[];4(3.2a)j.11(`<h 7="2b">${Y}</h>`);4(3.2c&&e)j.11(`<h 7="29">${e}</h>`);4(3.28&&F)j.11(`<h 7="25">${F}</h>`);4(j.Z>0){9+=`<5 7="8-26">${j.1u(\'\')}</5>`}4(C){9+=`<5 7="8-27">${C}</5>`}4(3.1i&&n){9+=`<p 7="8-n">${n}</p>`}9+=`</5></5>`});r.H=9};U(B)})();',62,155,'||entry|RPW_CONFIG|if|div|const|class|rpw|html||let|||author|title||span|script|metaItems|||summary|snippet|function||tag|container|document||trim|label|href|src|posts|postUrl|labelName|feedUrl|labelsHTML|data|loader|dateStr|fetchUrl|innerHTML|cat|replace|return|escapeHTML|entries|Math|published|media|thumbnail|linkObj|max|totalPosts|loadScript|encodeURIComponent|thumbUrl|alt|commentCount|length||push|results|numPosts|callback|noPostxt|name|json|in|startIndex|window|rpwRenderPosts|str|display|none|noPostText|style|url|showSnippet|aria|link|h4|random|rel|feed|limitedCategories|feeds|maxIndex|rpwGetTotalPosts|term|join|maxLabels|useCustomLabel|snippetLength|thr|numeric|category|total|querySelector|floor|widget|parseInt|openSearch|amp|appendChild|quot|start|createElement|totalResults|index|body|gt|getElementById|39|lt|toLocaleDateString|thumb|wrap|img|loading|showThumbnail|item|map|forEach|substring|lazy|content|dateIcon|meta|labels|showDate|authorIcon|showComments|commentIcon|showAuthor|slice|search|w150|h150|day|nu|s72|noImage|find|alternate|Untitled|new|no|Date|year|month|undefined|short'.split('|'),0,{}))
   </script>

5. Click Save
6. Once you've saved the gadget, click View blog to check whether the Random Posts widget appears on your blog.

Configuration Setup Guide

At the top of the <script> section, edit the RPW_CONFIG values to match your preferences:

Pro Tip for Custom Labels: If you enable the Custom Label option, make sure the label exists on your Blogger posts and matches the casing exactly (e.g., Tech vs tech).

Customize Your Random Posts (Optional)

If you're not satisfied with the current style of your random posts, you can customize them to better match your blog's theme.

1. Change Post Title Color & Hover Color

To adjust how post titles look in normal state and when hovered over:

• Modify .rpw-title a for the main title color.
• Modify .rpw-title a:hover for the hover color.

.rpw-title a {
  color: #111111; /* Main post title color */
}
.rpw-title a:hover {
  color: #3498db; /* Title color when hovering */
}

2. Change Thumbnail Image Size

To make the post thumbnail images larger or smaller:

• Modify both width and height inside .rpw-thumb-wrap. (Keep them equal for square images).
• Don't forget to update the mobile screen rules inside @media (max-width: 480px) if needed.

.rpw-thumb-wrap {
  width: 90px;  /* Change thumbnail width (e.g., 100px) */
  height: 90px; /* Change thumbnail height (e.g., 100px) */
}

@media (max-width: 480px) {
  .rpw-thumb-wrap {
    width: 75px;  /* Adjust mobile thumbnail width */
    height: 75px; /* Adjust mobile thumbnail height */
  }
}

3. Change Metadata Color (Author, Date, Comments)

To change the text color for the date, author name, and comment counter:

• Locate .rpw-meta and adjust the color property.

.rpw-meta {
  color: #777777; /* Meta text color */
}

4. Change Meta Icons (Comment, Author, Date)

If you want to use different Font Awesome icons for comments, author, and date, update the content hex values:

.commentIcon::before {
  content: "\f27a"; /* Replace with new Font Awesome Unicode */
}
.authorIcon::before {
  content: "\f007"; /* Replace with new Font Awesome Unicode */
}
.dateIcon::before {
  content: "\f073"; /* Replace with new Font Awesome Unicode */
}

5. Replace # Before Label Tags with a Tag Icon

To replace the # hash symbol in your tags with a Font Awesome tag icon :

• Find .rpw-labels a::before
• Change content: "#"; to content: "\f02b"; (the Unicode for a tag icon) and declare the Font Awesome font family.

.rpw-labels a::before {
  content: "\f02b"; /* Unicode for Font Awesome Tag icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 4px;
}

Can I add random posts from other Blogspot blogs, not just my own?

Yes, you can add multiple blogs, including your own blog and one or more external Blogger/Blogspot sites. Just replace your existing script with this updated version.

It includes a new setting called blogUrl. If you leave it blank (''), the script will automatically fetch random posts from your current blog.

<script>
const RPW_CONFIG = {
  // Target Blog URLs Array:
  // - Leave as [] to show posts ONLY from your own blog.
  // - Add one or multiple blog URLs in quotes separated by commas, e.g.:
  blogUrls: [
    'https://blogone.blogspot.com',
    'https://blogtwo.blogspot.com'
  ], 

  numPosts: 5,             // Total number of random posts to show in the widget
  showThumbnail: true,      // Show thumbnail (true / false)
  noImage: 'https://via.placeholder.com/150?text=No+Image', // Fallback image URL
  noPostText: 'No posts found.',
  
  // Post Meta Visibility Controls (true / false)
  showAuthor: true,        // Show author name
  showComments: true,      // Show comment count
  showDate: true,          // Show publication date
  showSnippet: true,       // Show post snippet text
  snippetLength: 80,       // Snippet character length

  // Label Controls
  maxLabels: 3,            // Maximum number of labels to show per post (0 to hide)

  // Custom Label Filtering
  useCustomLabel: false,   // Filter by a specific label across all blogs? (true / false)
  labelName: 'Technology', // Exact label name (case-sensitive) if useCustomLabel is true

  // Link Behavior
  openInNewTab: true       // Open post & label links in a new tab? (true / false)
};

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(m(){6 D=N.23(\'f-P-D\');6 M=N.27(\'#19-P-28 .f-M\');m 18(1Q){1b 1Q.L(/[&<>\'"]/g,G=>({\'&\':\'&21;\',\'<\':\'&1Z;\',\'>\':\'&26;\',"\'":\'&#29;\',\'"\':\'&2j;\'}[G]||G))}8 13=(2.16&&2.16.i>0)?2.16.1M(I=>I.C().L(/\\/$/,\'\')):[\'\'];8 z=[];8 14=13.i;v.j=v.j||{};m 11(E){6 s=N.2i(\'s\');s.E=E;N.2k.2n(s)}13.J((o,A)=>{6 h=\'2g\'+A+\'1q\'+15.1v();8 T=o+\'/1m/P/u\';4(2.1K&&2.V.C()!==\'\'){T+=\'/-/\'+1f(2.V.C())}T+=\'?1j=1D-1y-s&W-1s=0&1B=j.\'+h;v.j[h]=m(O){1C v.j[h];6 U=2a(O.1x.2d$2f.$t,10);4(U>0){z.Q({o,U})}14--;4(14===0){1F()}};11(T)});m 1F(){4(z.i===0){M.1I.1H=\'1w\';D.1g=\'<7 9="1G">\'+18(2.1p)+\'</7>\';1b}8 H=[];8 1d=z.i;z.J((K,A)=>{6 h=\'2c\'+A+\'1q\'+15.1v();6 1c=r.W(1,r.2b(2.1o/z.i));6 1l=r.W(1,K.U-1c+1);6 1z=r.2m(r.19()*1l)+1;8 F=K.o+\'/1m/P/u\';4(2.1K&&2.V.C()!==\'\'){F+=\'/-/\'+1f(2.V.C())}F+=\'?1j=1D-1y-s&25-A=\'+1z+\'&W-1s=\'+1c+\'&1B=j.\'+h;v.j[h]=m(O){1C v.j[h];6 n=O.1x.3||[];n.J(e=>{e.1L=K.o});H=H.2O(n);1d--;4(1d===0){1J(H)}};11(F)})}m 1J(n){M.1I.1H=\'1w\';4(n.i===0){D.1g=\'<7 9="1G">\'+18(2.1p)+\'</7>\';1b}n.2S(()=>r.19()-0.5);6 1r=n.1U(0,2.1o);6 Z=2.2U?\' 2M="2I" 1V="2v"\':\'\';8 b=\'\';1r.J(3=>{6 o=3.1L||\'\';8 Y=\'#\';4(3.1t){6 17=3.1t.2J(l=>l.1V===\'2x\');4(17)Y=17.X}6 B=3.B.$t||\'2u\';8 1h=2.2t;4(3.1e$12&&3.1e$12.I){1h=3.1e$12.I.L(/\\/2r(-c)?\\//,\'/2s-2y-p-k-2z-2F/\')}6 q=(3.q&&3.q[0]&&3.q[0].1R)?3.q[0].1R.$t:\'\';8 R=\'\';4(3.1a&&3.1a.$t){6 d=2G 15(3.1a.$t);R=d.2H(2E,{2D:\'1S\',2A:\'2B\',2C:\'1S\'})}8 1i=\'0\';4(3.1T$1X){1i=3.1T$1X.$t+\'\'}8 S=\'\';4(3.1W&&2.1E>0){6 1N=3.1W.1U(0,2.1E);S=1N.1M(1k=>`<a 9="f-1Y-G"X="${o}/2q/1Y/${1f(1k.1u)}"${Z}>${1k.1u}</a>`).1O(\'\')}8 x=\'\';4(2.1P&&3.u&&3.u.$t){x=3.u.$t.L(/<[^>]*>/g,\'\').2V(0,2.1n);4(3.u.$t.i>2.1n)x+=\'...\'}b+=`<7 9="f-2T">`;4(2.2L){b+=`<7 9="f-2K-2p"><a X="${Y}"${Z}><2N E="${1h}"1j="${B}"2R="2Q"/></a></7>`}b+=`<7 9="f-2P">`;b+=`<1A 9="f-B"><a X="${Y}"${Z}>${B}</a></1A>`;6 y=[];4(2.2w)y.Q(`<w 9="24">${1i}</w>`);4(2.22&&q)y.Q(`<w 9="20">${q}</w>`);4(2.2o&&R)y.Q(`<w 9="2l">${R}</w>`);4(y.i>0){b+=`<7 9="f-2h">${y.1O(\'\')}</7>`}4(S){b+=`<7 9="f-2e">${S}</7>`}4(2.1P&&x){b+=`<p 9="f-x">${x}</p>`}b+=`</7></7>`});D.1g=b}})();',62,182,'||RPW_CONFIG|entry|if||const|div|let|class||html||||rpw||callbackName|length|_rpwCallbacks|||function|entries|baseUrl||author|Math|script||summary|window|span|snippet|metaItems|blogData|index|title|trim|container|src|fetchUrl|tag|allCollectedEntries|url|forEach|blog|replace|loader|document|data|posts|push|dateStr|labelsHTML|feedUrl|totalPosts|labelName|max|href|postUrl|targetAttr||loadScript|thumbnail|targets|pendingRequests|Date|blogUrls|linkObj|escapeHTML|random|published|return|countToFetch|pendingFetchRequests|media|encodeURIComponent|innerHTML|thumbUrl|commentCount|alt|cat|maxIndex|feeds|snippetLength|numPosts|noPostText|_|selectedEntries|results|link|term|now|none|feed|in|startIndex|h4|callback|delete|json|maxLabels|rpwFetchRandomPosts|noPostxt|display|style|rpwRenderFinalList|useCustomLabel|_originBaseUrl|map|limitedCategories|join|showSnippet|str|name|numeric|thr|slice|rel|category|total|label|lt|authorIcon|amp|showAuthor|getElementById|commentIcon|start|gt|querySelector|widget|39|parseInt|ceil|rpwFetch_|openSearch|labels|totalResults|rpwCount_|meta|createElement|quot|body|dateIcon|floor|appendChild|showDate|wrap|search|s72|w150|noImage|Untitled|noopener|showComments|alternate|h150|no|month|short|day|year|undefined|nu|new|toLocaleDateString|_blank|find|thumb|showThumbnail|target|img|concat|content|lazy|loading|sort|item|openInNewTab|substring'.split('|'),0,{}))
</script>

• blogUrls Array: Add as many Blogger site URLs as you want to the array (e.g., ['https://site1.blogspot.com', 'https://site2.blogspot.com']).
• Smart Post Distribution and Shuffling: The system fetches random posts from each specified blog, combines them into a single collection, and shuffles them to provide a varied, randomized mix of content.
• openInNewTab Configuration Option: Choose whether clicking a post title or label opens its link in a new tab (true) or the current tab (false).

Final Thoughts

Now, with the Random Posts Widget, you can showcase not only your own blog posts but also posts from other blogs you follow or want to share with your visitors. I hope you find this article helpful! Feel free to let me know what you think.

If you enjoy the widgets I create and share on my blog, be sure to explore more widgets you can add to your Blogger website.

Have a widget idea in mind? You can also suggest a widget you'd like to see, and I'll be happy to create one for you! Thank you so much for visiting and supporting my blog!