Listing Post Titles In Alphabetical Or Chronological Order

9:21:00 AM |

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 Widget Showcase.
The list comes with several options:
  1. List them inside a widget or inside a post 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

view sourceprint?
01<!-- Alphabetical/chronological Post Title Listing with comment count Start -->
02<script type="text/javascript">
03function getYpipeTL(feed) {
04 document.write('<ul style="font-weight:bold">');
05 var i;
06 for (i = 0; i < feed.count ; i++)
07 {
08var href = "'" + feed.value.items[i].link + "'";
09var pTitle = feed.value.items[i].title;
10var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
11var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
12 document.write(pList);
13 document.write(pComment); //to remove comment count delete this line
14 document.write('</a></li>');
15 }
16 document.write('</ul>');
17 }
18 </script>
19 <script src="http://pipes.yahoo.com/pipes/pipe.run?
20 YourBlogUrl=http://www.bloggersentral.com
21 &Order=alphabet
22 &_id=401e43055731c1a29f1e1d3eb5e8e13f
23 &_callback=getYpipeTL
24 &_render=json"
25type="text/javascript"></script>
26<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>
27<!-- 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 Settingsheading, select Ignore newlines. 
    post options
  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!