Latest update Android YouTube
Home
Blogger
BlogSpot

Dynamic Post List Script for Blogger: Complete Guide with Examples

Estimated read time: 104 min

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).

PostImage | IndinTechnoEra

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?
<script type='text/javascript'>
/*<![CDATA[*/
(function() {
// Helper function to convert numbers to Roman numerals
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 to format date
function formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
}
// Function to fetch and render posts
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'; // New parameter
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 { // blank
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: &#39;Arial&#39;, sans-serif;
}
.postListDivTime.theme-adapt {
background-color: #ffffff; /* Default for light mode */
border-color: #e8ecef;
}
@media (prefers-color-scheme: dark) {
.postListDivTime.theme-adapt {
background-color: #1a1a1a; /* Dark mode background */
border-color: #333333;
}
}
.postListHeading {
font-size: 20px;
font-weight: 600;
color: #1a1a1a !important; /* Force dark color */
margin: 0 0 15px 0;
padding-bottom: 8px;
border-bottom: 2px solid #e8ecef;
}
.postListDivTime.theme-adapt .postListHeading {
color: #ffffff !important; /* White in dark mode for adaptive theme */
}
@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>
view raw BlogPostListingFormate.html hosted with ❤ by GitHub
<h2>Explore more posts:</h2>
<script type="application/json" data-post-list-config>
{
"label": "ServiceNow",
"sortOrder": "descending",
"maxResults": 5,
"openInNewTab": false,
"preText": "Chapter",
"numberingStyle": "numerical",
"numberAfterPretext": true,
"heading": "Tutorial Series",
"showThumbnail": true,
"notFoundThumbnail": "postLetter",
"showDate": true,
"showSnippet": true,
"snippetLength": 50,
"themeMode": "adapt"
}
</script>
<!-- How to use:
//label - Required: The exact post label to filter posts (e.g., "ServiceNow", "Aadhaar"). Case-sensitive.
//sortOrder - Required: Sort order; Options: "ascending" (oldest first), "descending" (newest first).
//maxResults - Optional: Number of posts to display; 0 for all, any positive integer (e.g., 5). Default: all.
//openInNewTab - Optional: Open links in new tab (true) or same tab (false). Default: true.
//preText - Optional: Prefix before titles (e.g., "Chapter", "→"). Default: empty string.
//numberingStyle - Optional: Numbering format; Options: "numerical" (1, 2), "roman" (I, II), "alphabetical" (A, B). Default: none.
//numberAfterPretext - Optional: Place number after preText (true) or before (false). Default: false.
//heading - Optional: Title above the list (e.g., "Tutorial Series"). Default: none.
//showThumbnail - Optional: Show 50x50px thumbnails (true) or not (false). Default: false.
//notFoundThumbnail - Optional: Fallback for missing thumbnails; Options: "blank" (empty space), "fill" (gray square), "postLetter" (title’s first letter). Default: "blank".
//showDate - Optional: Show publish date (e.g., "May 17, 2025") (true) or not (false). Default: false.
//showSnippet - Optional: Show post summary (true) or not (false). Default: false.
//snippetLength - Optional: Max characters for snippet (e.g., 50). Any positive integer. Default: 50.
//themeMode - Optional: Card appearance; Options: "fixed" (white card, dark heading), "adapt" (white/light, dark/dark mode). Default: "fixed".
-->
view raw HowToUse.html hosted with ❤ by GitHub

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

#Blogger #BlogSpot #FormateBlogspot

Post a Comment

Feel free to ask your query...
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.