I recently got to know about list.js, it is an awesome script. With it, you can filter in more responsive way, which is the major feature I like and you don’t need to code much for that and sorting.

The following example is only for conceptual purpose, it’s incomplete and CSS style is not so good looking.

(any Blogger blog URL)

Filter: Sorting by: Title Published date

    The actual JavaScript code is only about 30 lines, please view the source of this page, note that the code is licensed under the MIT License.

    The only issue I had was how to get the data when click on post title. I put the id data from Blogger API, which provides an unique way to lookup via List.get list.js API. It should be able to just use post title, but there is a chance that posts could have same title.

    This is not suitable for real use because it only gets recent 50 posts. It’s simple to do a multiple requests for getting all posts. As far as I know, you can get 500 posts at once via Blogger API, if I recall correctly. But the problem is not the coding but how much data has to be returned from Blogger. With only 50 posts, the returned data is already around 27KB. This blog has more than 750 posts, it could be around 400KB and more.

    For performance issue, I think it might be better to pre-process in order to reduce the data size and process time, then merge with recent posts which is retrieved directly from API. It could be last # of posts or the current month, Blogger API allows you to query by time range.

    As you may know my Labels page, which use different approach. Basically, in Labels page, the query is processed on Blogger’s server, but this list.js method is processing on client browser. They have different pros and cons.

    If you need any explanation of my code or have any feedback, feel free to ask in comments.