Listing Blog Posts by Label in Blogger Using JavaScript

If you're a Blogger user and want to display a list of blog posts with a specific label keyword in a customized manner, you can achieve this by using JavaScript. In this tutorial, we'll guide you through the process of creating a script that lists your blog posts with a chosen label in reverse order (latest at the bottom and oldest at the top).

Prerequisites

Blogger Account: Make sure you have a Blogger account and have created blog posts with labels.

Basic HTML and JavaScript Knowledge: Familiarity with HTML and JavaScript will be beneficial.

Step 1: Accessing the Blogger API

Blogger provides an API that allows you to retrieve blog content in JSON format. To access this API, you need to construct a URL that fetches the posts with a specific label. Replace YOUR_LABEL with the actual label keyword you want to use.

  <script
  src="https://www.yourblog.com/feeds/posts/summary/-/YOUR_LABEL?max-results=150&amp;alt=json-in-script&amp;callback=recentpostslist"></script>

Step 2: Writing the JavaScript Function

Now, let's write the JavaScript function that will handle the JSON response and generate the list of blog posts. This function will iterate through the entries in reverse order.

<script type="text/javascript">
function recentpostslist(json) {
  document.write('<div class="postListDivTime">');

  for (var i = json.feed.entry.length - 1; i >= 0; i--) {
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }

    var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";
    var entryTitle = json.feed.entry[i].title.$t;

    var item = "<p>" + "<a class='postListDivCSS' href=" + entryUrl + '" target="_blank">' + entryTitle + "</a> </p>";
    document.write(item);
  }

  document.write('</div>');
}
</script>

Step 3: Integrating the Script

Now, integrate the script into your Blogger template. Place it where you want the list of blog posts to appear.

<!-- Mega List of Posts by Label Start -->
<script src="https://www.yourblog.com/feeds/posts/summary/-/YOUR_LABEL?max-results=150&amp;alt=json-in-script&amp;callback=recentpostslist"></script>
<!-- Mega List of Posts by Label End -->

Replace www.yourblog.com with your actual blog URL.

Demo

 

By following these steps, you can customize the script to list your blog posts with a specific label in the reverse order. Feel free to modify the HTML and CSS styles to match your blog's design.

This simple yet effective method adds a dynamic and interactive element to your Blogger site, allowing visitors to easily navigate through posts under a specific label.

Happy blogging! 📝🚀