How to list recent post titles by label

Do you want to list all or your most recent posts according to categories/labels? Well then, you’ve come to the right tutorial.

I’ve seen people use a LinkList gadget to accomplish this. However this method requires them to MANUALLY add each post link to the gadget every time they publish a post with the specified label. Not good.

We’re not going to do that, because we have a better, more elegant solution. Once added, the list will update itself automatically. The widget takes your blog’s label-specific feed, in JSON format and turn it into a list using Javascript. It other words it does the listing for you.

No more slow and tedious manual updating and rearranging. Sounds good? Here we go:

 

1. Installing the first list

1. Go to Layout Design > Page Elements.
2. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4. Enter a label as the title of your widget.
5. Copy the code below and paste it inside the content box.
6. Click Save.

<!-- Recent Posts by Label Start -->
<!-- code by BloggerSentral.com -->
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; 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 + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="YOUR_BLOG_URL/feeds/posts/summary/-/YOUR_LABEL?max-results=SHOW_HOW_MANY&alt=json-in-script&callback=recentpostslist"></script>
<span style="font-size: 80%; float:right;">Get this <a href="http://www.bloggersentral.com/2010/04/list-recent-posts-by-label.html">widget</a></span>
<!-- Recent Posts by Label End -->

• Replace YOUR_BLOG_URL in code line 21 with your own blog URL. For example if you were to list posts from BloggerSentral.com, you would have to replace it with http://www.bloggersentral.com (without the trailing slash).
• Replace YOUR_LABEL (line 21) with the label. Labels are case sensitive, make sure you get it right.
• Replace the value of SHOW_HOW_MANY (line 21) with the number of posts you want to display. To show all posts, use 500 (I believe 500 is the maximum. If you have more than 500 posts under a certain label, do leave a comment, we’ll work something out).
• The titles are bulleted due the use of ordered list <ul>. If you want them numbered instead, just replace ul (in line 5 and 18) with ol.

 

2. Adding subsequent lists

You need to add a HTML/Javascript gadget for each label. Repeat the same steps above for each label, with a slight difference:

• You don’t have to copy the whole code. Just copy the codes in lines 21 and 22 into each gadget.
• Make sure your first list (which contains the full code) is positioned on top of all other lists.

Enjoy!