Listing post titles in alphabetical or chronological order

In this tutorial I will show you how to list the titles of your blog’s 1000 2000 most recent  posts. If you are looking for an alternative to Blogger’s Archive gadget, then this might be it. This list can also be used as a Table Of Contents. This list is made possible with the use of Yahoo! Pipe.

See the demo in Blogger Sentral Widget Showcase.

The list comes with several options:

1. List them inside a widget or in a post static page.
2. Arrange the titles in alphabetical or chronological order. If you use your blog as an online serial novel, then chronological order is just what you need.
3. Append (or not) a comment count at the end of each title.
4. Choose numbered or bulleted list style.

Let’s get started,

 

1) The code

<!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function getYpipeTL(feed) {
 document.write('<ul style="font-weight:bold">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ul>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.bloggersentral.com
 &Order=alphabet
 &_id=401e43055731c1a29f1e1d3eb5e8e13f
 &_callback=getYpipeTL
 &_render=json" 
type="text/javascript"></script>
<span style="font-size: 80%; float:right;">Get this <a href="http://www.bloggersentral.com/2009/12/list-post-titles-in-alphabetical-order.html" target="_blank">widget</a></span>
<!-- Alphabetical Post Title Listing End -->

 

2) Put the list in a (dedicated) post page

Use this option if you want to put the list on a separate page. (You can then access it via a tab.)

1. Create a new page by going to Posting > Edit Pages and clicking the New Page button.
2. Click Edit HTML tab to switch to HTML mode.
3. Copy and paste the code into the editor.
4. Click Post Options at the bottom of the editor. Under the Edit HTML Settings heading, select Ignore newlines.
   
5. Publish and view your post . The list should appear inside the page.
6. Then add a link to the page from your homepage. This can be done by adding navigation tabs. If you have the page gadget installed, this is added automatically by Blogger.
7. If you want to remove the extras (sidebars, footer etc.) from the page, read Apply different layout/styling to static pages.

3) Put the list in a gadget

Use this option if you want to put the list on a sidebar, making it visible at all times.

1. Go to Design > Page Elements.
2. Click Add A Gadget link.
3. Select HTML/Javascript gadget.
4. Enter the title of your widget e.g. All Posts List.
5. Copy and paste the code inside the content box.

   Replace http://www.bloggersentral.com (the value of YourBlogUrl) in code line 20 with your own blog URL. Do not include the trailing slash (as in .com/). Refer to step 4 for options/customizations.

   Reminder: In the process of editing your code, never switch to Rich Text mode. Doing so will add line breaks (<br/>) in your code, rendering the code useless.

6. Save and view your blog.

 

4) Customizing the list

Below are a few available customizations/options:

• Listing order -the default order is alphabetical. To change to chronological order, just change the word alphabet in code line 21 to chrono.
• Comment count - comment count is displayed by default. To remove comment count, delete code line 13.
• List style -the default is bulleted list. To change to numbered list, replace ul (in line 4 and 16) with ol.
• Style the list with the inline style attribute in line 4.
• If your list becomes too long, you might want to put it in a scroll box

 

5) Editing the pipe (optional)

If you want further customize the widget output, you need to edit the (Yahoo) pipe itself. Follow the steps below:

1. Go to the Yahoo! pipe.
2. Log in to your Yahoo! account.
3. Create a clone by clicking the Clone button.
4. Click edit source to edit it in anyway you like.
5. When you’re done editing and saving, test run it by clicking Run Pipe button to confirm the output of the pipe.
6. To use your edited pipe, copy the pipe id and paste it to replace the existing id in line 22. (To get the id, look in your browser’s address bar. The id is the end part the URL when you are viewing or editing the pipe.)

Enjoy!

 

Updates:

Nov 2011: Increase number of posts from 1000 to 2000.

Mar 28 2010: “undefined” comment count. Blogger renamed the comments count item (in posts feed), thus causing the error. I fixed the pipe, it’s okay now. If you cloned my pipe before, please clone again.

Dec 21 2009: Revised code and pipe to include comment count, with removal option. Also added chronological order option.