IndianTechnoEra: Dynamic Post List Script for Blogger: Complete Guide with Examples

Dynamic Post List Script for Blogger: Complete Guide with Examples

Are you looking to enhance your Blogger site with organized, visually appealing post lists? Whether you’re sharing tutorials on MyLabel, guides on Aadhaar, or insights on the HPV vaccine, our custom Blogger Post List Script makes it easy to display posts by label with features like thumbnails, dates, snippets, and theme-aware styling. In this guide, we’ll explore the script’s powerful features, provide detailed examples, and show you how to implement it on your blog (like ours at indiantechnoera.blogspot.com).

Why Use This Script?

This script fetches posts from your blog’s JSON feed and displays them in a customizable list. It’s perfect for creating tutorial series, recent post summaries, or curated resource lists. With features like numbering, thumbnails, and metadata, it improves navigation and engagement, making your content more accessible to readers.

Features Overview

• Label-Based Filtering: Display posts with a specific label (e.g., "MyLabel").
• Sorting: Sort posts in ascending or descending order.
• Post Limit: Control the number of posts shown.
• Link Behavior: Open links in new or same tab.
• Custom Prefix: Add text like "Chapter" before titles.
• Numbering Styles: Use numerical (1, 2), Roman (I, II), or alphabetical (A, B) numbering.
• Heading: Add a title above the list.
• Thumbnails: Show post images with fallback options.
• Metadata: Display publish date and post snippets.
• Theme Support: Adapt to light/dark modes.
• Multiple Lists: Include multiple lists in one post.

Detailed Feature Explanations

1. Required Parameters

• label: The post label to filter (e.g., "MyLabel"). Case-sensitive, must match exactly.
• sortOrder: Sort posts by publish date:
  • "descending": Newest first.
  • "ascending": Oldest first.

2. Optional Parameters

• maxResults (number): Limit the number of posts (e.g., 5). Use 0 for all posts. Default: all.
• openInNewTab (boolean): Open links in a new tab (true, default) or same tab (false).
• preText (string): Prefix before titles (e.g., "Chapter", "→"). Default: none.
• numberingStyle (string): Numbering format:
  • "numerical": 1, 2, 3.
  • "roman": I, II, III.
  • "alphabetical": A, B, C.
• numberAfterPretext (boolean): Place number after preText (true) or before (false, default).
• heading (string): Title above the list (e.g., "Tutorial Series"). Default: none.
• showThumbnail (boolean): Show 50x50px post thumbnails (true) or not (false, default).
• notFoundThumbnail (string): Fallback for missing thumbnails when showThumbnail: true:
  • "blank": Empty 50x50px space.
  • "fill": Gray 50x50px square.
  • "postLetter": 50x50px box with post title’s first letter.
• showDate (boolean): Show publish date (e.g., "May 17, 2025"). Default: false.
• showSnippet (boolean): Show post summary. Default: false.
• snippetLength (number): Max characters for snippets (e.g., 50). Default: 50.
• themeMode (string): Control card appearance:
  • "fixed": White card, dark heading (default).
  • "adapt": White card in light mode, dark card in dark mode; heading adjusts.

How to Implement the Script

Follow these steps to add the script to your Blogger site:

1. Add the Script to Your Template:
   • Go to Blogger Dashboard > Theme > Edit HTML.
   • Paste the following script before </body> and save:

   <script type='text/javascript'>
   /*<![CDATA[*/
   (function() {
     function toRomanNumeral(num) {
       if (isNaN(num) || num < 1) return '';
       const romanMap = [
         { value: 1000, numeral: 'M' }, { value: 900, numeral: 'CM' },
         { value: 500, numeral: 'D' }, { value: 400, numeral: 'CD' },
         { value: 100, numeral: 'C' }, { value: 90, numeral: 'XC' },
         { value: 50, numeral: 'L' }, { value: 40, numeral: 'XL' },
         { value: 10, numeral: 'X' }, { value: 9, numeral: 'IX' },
         { value: 5, numeral: 'V' }, { value: 4, numeral: 'IV' },
         { value: 1, numeral: 'I' }
       ];
       let result = '';
       for (const { value, numeral } of romanMap) {
         while (num >= value) {
           result += numeral;
           num -= value;
         }
       }
       return result;
     }
   
     function formatDate(dateString) {
       const date = new Date(dateString);
       return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
     }
   
     function renderPostList(config, container, index) {
       if (!config || !config.label || !config.sortOrder) {
         console.error('Invalid postListConfig: label and sortOrder are required.', config);
         return;
       }
   
       const sortOrder = config.sortOrder.toLowerCase();
       const openInNewTab = config.openInNewTab !== false;
       const preText = config.preText || '';
       const numberingStyle = config.numberingStyle ? config.numberingStyle.toLowerCase() : '';
       const numberAfterPretext = config.numberAfterPretext || false;
       const heading = config.heading || '';
       const showThumbnail = config.showThumbnail || false;
       const notFoundThumbnail = config.notFoundThumbnail || 'blank';
       const showDate = config.showDate || false;
       const showSnippet = config.showSnippet || false;
       const snippetLength = config.snippetLength || 50;
       const themeMode = config.themeMode || 'fixed';
       const blogUrl = 'https://indiantechnoera.blogspot.com';
       const maxResultsQuery = config.maxResults && config.maxResults > 0 ? `max-results=${config.maxResults}` : '';
       const feedUrl = `${blogUrl}/feeds/posts/summary/-/${encodeURIComponent(config.label)}?${maxResultsQuery}&alt=json-in-script&callback=renderPosts_${index}`;
   
       console.log('Fetching posts with URL:', feedUrl);
   
       const loadingDiv = document.createElement('div');
       loadingDiv.className = 'postListLoading';
       loadingDiv.textContent = 'Loading related posts...';
       container.appendChild(loadingDiv);
   
       const script = document.createElement('script');
       script.src = feedUrl;
       script.onerror = () => {
         loadingDiv.textContent = 'Error loading posts. Please check the label or try again later.';
         console.error('Failed to load feed for label:', config.label, 'URL:', feedUrl);
       };
       document.head.appendChild(script);
   
       window[`renderPosts_${index}`] = function(json) {
         try {
           const entries = json.feed.entry || [];
           if (entries.length === 0) {
             loadingDiv.textContent = 'No posts found for this label. Please verify the label name.';
             return;
           }
   
           const postListDiv = document.createElement('div');
           postListDiv.className = `postListDivTime theme-${themeMode}`;
   
           if (heading) {
             const headingElement = document.createElement('h3');
             headingElement.className = 'postListHeading';
             headingElement.textContent = heading;
             postListDiv.appendChild(headingElement);
           }
   
           const sortedEntries = sortOrder === 'ascending' ? entries.slice().reverse() : entries;
   
           sortedEntries.forEach((entry, idx) => {
             const link = entry.link.find(l => l.rel === 'alternate');
             if (!link) return;
   
             const entryUrl = link.href;
             const entryTitle = entry.title.$t;
             let displayText = entryTitle;
   
             let number = '';
             if (numberingStyle) {
               if (numberingStyle === 'numerical') {
                 number = `${idx + 1}> `;
               } else if (numberingStyle === 'roman') {
                 number = `${toRomanNumeral(idx + 1)}> `;
               } else if (numberingStyle === 'alphabetical') {
                 number = `${String.fromCharCode(65 + idx)}> `;
               }
             }
   
             if (preText && number) {
               displayText = numberAfterPretext ? `${preText} ${number}${entryTitle}` : `${number}${preText} ${entryTitle}`;
             } else if (preText) {
               displayText = `${preText} ${entryTitle}`;
             } else if (number) {
               displayText = `${number}${entryTitle}`;
             }
   
             if (showDate || showSnippet) {
               displayText += ' [';
               if (showDate) {
                 displayText += formatDate(entry.published.$t);
               }
               if (showDate && showSnippet) {
                 displayText += ' - ';
               }
               if (showSnippet && entry.summary && entry.summary.$t) {
                 const snippet = entry.summary.$t.substring(0, snippetLength) + (entry.summary.$t.length > snippetLength ? '...' : '');
                 displayText += snippet;
               }
               displayText += ']';
             }
   
             const item = document.createElement('p');
             item.className = 'postListItem';
   
             if (showThumbnail) {
               if (entry.media$thumbnail && entry.media$thumbnail.url) {
                 const thumbnailUrl = entry.media$thumbnail.url.replace(/s72-c/, 's50-c');
                 const img = document.createElement('img');
                 img.src = thumbnailUrl;
                 img.className = 'postListThumbnail';
                 img.alt = `${entryTitle} thumbnail`;
                 item.appendChild(img);
               } else {
                 if (notFoundThumbnail === 'fill') {
                   const img = document.createElement('img');
                   img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACR8e3HAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYSURBVFhH7cEBAQAAAIIg/69uSEABANu7AhcT9lRiAAAAAElFTkSuQmCC';
                   img.className = 'postListThumbnail';
                   img.alt = 'Placeholder thumbnail';
                   item.appendChild(img);
                 } else if (notFoundThumbnail === 'postLetter') {
                   const letterDiv = document.createElement('div');
                   letterDiv.className = 'postListThumbnailLetter';
                   letterDiv.textContent = entryTitle.charAt(0).toUpperCase();
                   item.appendChild(letterDiv);
                 } else {
                   const placeholder = document.createElement('div');
                   placeholder.className = 'postListThumbnailPlaceholder';
                   item.appendChild(placeholder);
                 }
               }
             }
   
             const linkElement = document.createElement('a');
             linkElement.className = 'postListDivCSS';
             linkElement.href = entryUrl;
             linkElement.target = openInNewTab ? '_blank' : '_self';
             linkElement.textContent = displayText;
             item.appendChild(linkElement);
   
             postListDiv.appendChild(item);
           });
   
           container.replaceChild(postListDiv, loadingDiv);
         } catch (e) {
           loadingDiv.textContent = 'Error rendering posts.';
           console.error('Error processing feed:', e, 'Label:', config.label);
         }
       };
     }
   
     function initializePostLists() {
       const scripts = document.querySelectorAll('script[type="application/json"][data-post-list-config]');
       scripts.forEach((script, index) => {
         try {
           const config = JSON.parse(script.textContent);
           const container = document.createElement('div');
           container.id = `postListContainer_${index}`;
           script.parentNode.insertBefore(container, script.nextSibling);
           renderPostList(config, container, index);
         } catch (e) {
           console.error('Error parsing postListConfig:', e, 'Script content:', script.textContent);
         }
       });
     }
   
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initializePostLists);
     } else {
       initializePostLists();
     }
   })();
   /*]]>*/
   </script>
   
   <style>
   .postListDivTime {
     margin: 20px 0;
     padding: 15px;
     background-color: #ffffff;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     border: 1px solid #e8ecef;
     max-width: 800px;
     font-family: 'Arial', sans-serif;
   }
   
   .postListDivTime.theme-adapt {
     background-color: #ffffff;
     border-color: #e8ecef;
   }
   
   @media (prefers-color-scheme: dark) {
     .postListDivTime.theme-adapt {
       background-color: #1a1a1a;
       border-color: #333333;
     }
   }
   
   .postListHeading {
     font-size: 20px;
     font-weight: 600;
     color: #1a1a1a !important;
     margin: 0 0 15px 0;
     padding-bottom: 8px;
     border-bottom: 2px solid #e8ecef;
   }
   
   .postListDivTime.theme-adapt .postListHeading {
     color: #ffffff !important;
   }
   
   @media (prefers-color-scheme: dark) {
     .postListDivTime.theme-adapt .postListHeading {
       border-bottom-color: #333333;
     }
   }
   
   .postListItem {
     margin: 8px 0;
     padding: 12px;
     border-radius: 6px;
     transition: background-color 0.3s ease, transform 0.2s ease;
     display: flex;
     align-items: center;
     gap: 10px;
     min-height: 50px;
   }
   
   .postListItem:hover {
     background-color: #f1f3f5;
     transform: translateX(5px);
   }
   
   .postListDivTime.theme-adapt .postListItem:hover {
     background-color: #2a2a2a;
   }
   
   .postListItem:last-child {
     border-bottom: none;
   }
   
   .postListDivCSS {
     color: #0052cc;
     text-decoration: none;
     font-size: 16px;
     font-weight: 600;
     transition: color 0.3s ease;
     flex: 1;
   }
   
   .postListDivCSS:hover {
     color: #003087;
     text-decoration: underline;
   }
   
   .postListThumbnail {
     width: 50px;
     height: 50px;
     object-fit: cover;
     border-radius: 5px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     flex-shrink: 0;
   }
   
   .postListThumbnailPlaceholder {
     width: 50px;
     height: 50px;
     flex-shrink: 0;
     background-color: transparent;
   }
   
   .postListThumbnailLetter {
     width: 50px;
     height: 50px;
     background-color: #e8ecef;
     border-radius: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     font-weight: bold;
     color: #1a1a1a;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     flex-shrink: 0;
   }
   
   .postListDivTime.theme-adapt .postListThumbnailLetter {
     background-color: #333333;
     color: #ffffff;
   }
   
   .postListLoading {
     font-style: italic;
     color: #6c757d;
     text-align: center;
     padding: 12px;
     background-color: #f8f9fa;
     border-radius: 6px;
     font-size: 14px;
   }
   
   .postListDivTime.theme-adapt .postListLoading {
     color: #aaaaaa;
     background-color: #2a2a2a;
   }
   </style>
         

2. Add Configurations to Posts:
   • In the Blogger post editor (HTML view), add a configuration like this:

   <p>Explore our tutorials:</p>
   <script type="application/json" data-post-list-config>
   {
     "label": "MyLabel",
     "sortOrder": "descending",
     "heading": "Tutorial Series",
     "showThumbnail": true,
     "notFoundThumbnail": "postLetter",
     "showDate": true
   }
   </script>
         

   • Replace "MyLabel" with your label.
   • Customize other parameters as needed.
3. Verify Settings:
   • Go to Settings > Other > Site Feed and set to “Full”.
   • Ensure your blog is public.

Example Configurations

Here are some practical examples to try on your blog:

1. Simple List with Thumbnails

<p>Quick links to tutorials:</p>
<script type="application/json" data-post-list-config>
{
  "label": "MyLabel",
  "sortOrder": "descending",
  "openInNewTab": false,
  "heading": "Quick Links",
  "showThumbnail": true,
  "notFoundThumbnail": "fill",
  "themeMode": "fixed"
}
</script>
  

Output: Heading "Quick Links", [Thumbnail or Gray Square] PostTitle

2. Tutorial Series with Numbering and Metadata

<p>Explore our tutorial series:</p>
<script type="application/json" data-post-list-config>
{
  "label": "MyLabel",
  "sortOrder": "descending",
  "preText": "Chapter",
  "numberingStyle": "numerical",
  "numberAfterPretext": true,
  "heading": "Tutorial Series",
  "showThumbnail": true,
  "notFoundThumbnail": "postLetter",
  "showDate": true,
  "showSnippet": true,
  "snippetLength": 50,
  "themeMode": "fixed"
}
</script>
  

Output: Heading "Tutorial Series", [Thumbnail or Letter Box] Chapter 1> [May 17, 2025 - Snippet...] PostTitle

3. Recent Posts with Theme Adaptation

<p>Recent guides for you:</p>
<script type="application/json" data-post-list-config>
{
  "label": "MyLabel",
  "sortOrder": "ascending",
  "preText": "→",
  "numberingStyle": "roman",
  "numberAfterPretext": false,
  "maxResults": 5,
  "openInNewTab": false,
  "heading": "Recent Guides",
  "showThumbnail": true,
  "notFoundThumbnail": "blank",
  "showDate": true,
  "themeMode": "adapt"
}
</script>
  

Output: Light mode: White card, dark heading; Dark mode: Dark card, white heading; [Thumbnail or Empty Space] I> → [May 17, 2025] PostTitle

4. Multiple Lists in One Post

<p>Complete tutorial series:</p>
<script type="application/json" data-post-list-config>
{
  "label": "MyLabel",
  "sortOrder": "descending",
  "preText": "Chapter",
  "numberingStyle": "numerical",
  "numberAfterPretext": true,
  "heading": "Complete Series",
  "showThumbnail": true,
  "notFoundThumbnail": "postLetter",
  "showDate": true,
  "themeMode": "fixed"
}
</script>
<p>Recent tutorials:</p>
<script type="application/json" data-post-list-config>
{
  "label": "MyLabel",
  "sortOrder": "ascending",
  "maxResults": 5,
  "preText": "→",
  "numberingStyle": "roman",
  "numberAfterPretext": false,
  "heading": "Recent Tutorials",
  "showThumbnail": true,
  "notFoundThumbnail": "fill",
  "showSnippet": true,
  "snippetLength": 50,
  "themeMode": "adapt"
}
</script>

  

Output:

• White card, dark heading "Complete Series", [Thumbnail or Letter Box] Chapter 1> [May 17, 2025] PostTitle
• Light mode: White card, dark heading; Dark mode: Dark card, white heading; [Thumbnail or Gray Square] I> → PostTitle: Snippet...

Troubleshooting Tips

• No Posts Display:
  • Verify the label exists in Posts > Labels.
  • Check the feed: https://yourblog.blogspot.com/feeds/posts/summary/-/YourLabel?alt=json.
  • Ensure Site Feed is set to “Full”.
• Thumbnails Missing:
  • Posts need images in the feed. Use notFoundThumbnail for fallbacks.
  • Inspect alignment with browser dev tools (F12).
• Heading Invisible in Dark Mode:
  • Use themeMode: "fixed" for consistent dark headings or "adapt" for theme-aware styling.
• Script Errors:
  • Check the console (F12 > Console) for JSON parsing or feed errors.
  • Ensure the script is placed before </body>.

Gist

👉 How to Use?

Conclusion

The Blogger Post List Script is a versatile tool to showcase your content in an organized, engaging way. Whether you’re creating a MyLabel tutorial series or a resource hub for Aadhaar guides, its features like thumbnails, metadata, and theme support will elevate your blog’s user experience. Try the examples above, experiment with configurations, and share your results in the comments!

Want to customize further? Consider adding pagination, category filters, or styled thumbnails (e.g., blurry borders). Stay tuned for future updates, and happy blogging!

Published on May 17, 2025, by IndianTechnoEra