Make Blogger.com Show a List Of Labels By Title Only

NOTE: I have since stopped using feed2js as blogged about below.  I’m writing a new post on how to do this using the Google Feeds API.

Do you use Blogger.com for your blogging?
One of the short comings of Blogger.com is the categorisation of posts.  Also known as tagging or labeling.
There is no neat way in Blogger.com that you can list all posts by a specific label.  The standard method produces a massive page listing all the contents of all the pages containing your selected label.
This is not very helpful if you’re looking for something and it’s also very slow to load.

After spending much time looking for a solution I found feed2js.  A Google Code project that allows you to embed an RSS feed into a web page using JavaScript.

Here’s an example I’ve been using on my blog since day one: https://www.it-implementor.co.uk/p/all-blog-posts.html
Not only is it just what I need, but I’ve managed to program it so that it can dynamically take a parameter on the end of the URL and display any specified label.
Example: https://www.it-implementor.co.uk/p/all-blog-posts.html?label=Musing   will only display pages containing the “Musing” label.

Want to see how it works?
Here’s the code:

<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
<!--
var mylabel='<MyDefaultLabel>';
var key='label';
var regex = new RegExp("[\?&]"+key+"=([^&#]*)");
var qs = regex.exec(window.location.href);
if(qs != null)
   mylabel = qs[1];
var cssStr = ".rss-title {visibility: hidden; margin: 0em; border: 0px; font-size: 1;} .rss-box {margin: 0em; border: 0px;}";
var style = document.createElement("style");
style.setAttribute("type", "text/css");
if(style.styleSheet){// IE
style.styleSheet.cssText = cssStr;
} else {// w3c
var cssText = document.createTextNode(cssStr);
style.appendChild(cssText);
}
document.write ('<h2>All Posts For Label: ', mylabel, '</h2>');
document.write('<script src="https://feed2js.org/feed2js.php?src=http%3A%2F%2F<BLOGURL>%2Ffeeds%2Fposts%2Fdefault%2F-%2F', mylabel, '&amp;desc=100&amp;date=y&amp;utf=y" type="text/javascript"></script>');
// -->
</script></div>
Thanks to <a href="https://feed2js.org/">feed2js.org</a>

Copy and paste the code (as text without formatting) into a new Page in your blog (not a Post!, a Page).  Call the new Page all-blog-posts.html
In the code (in “HTML” mode when editing the page) change the line containing “<MyDefaultLabel>” to be your default label name (case sensitive).

You should also change the text “<BLOGURL>” to be your blog’s URL without the “https://” bit.

By default the code is set to display 100 characters of each entry under it’s title.  You change the number 100 to be 0 for none or a larger/smaller number.

You can also choose to remove the “Thanks” line, but it’s nice to give recognition for hard work.

Now you can call the all-blog-posts.html page from anywhere in your blog (or outside your blog) and just append the label name (case sensitive) after the page URL plus a question mark and the text “label”.
E.g. https://yourblog.blogspot.com/p/all-blog-posts.html?label=MyLabel