List Posts in Alphabetical order

All Post Titles in Alphabetical Order | List Posts in Alphabetical


In this tutorial I will show you how to list the titles of your blog’s 10002000 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.

Post in Albabetical


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
Post Options
  1. Publish and view your post . The list should appear inside the page.
  2. 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.
  3. If you want to remove the extras (sidebars, footer etc.) from the page, readApply 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!

    3 comments:

    1. Hi, thanks for the code and instructions, its been a great help.

      Do you by any chance know how I might get my posts to arrange numerically-- that is, not 'chronological', as in order in which they were published, but numerically?

      The reason I need to do this is because each individual post on my blog is an excerpts taken from a book, with the title beginning with the date of its publication. For my 'table of contents' to work I need to have it arrange my posts in numerical order.

      Here is a link to my current table of contents: http://theartofgovernment.blogspot.com.au/p/table-of-contents.html

      ReplyDelete
    2. Sorry, I did try however it is not working for me

      ReplyDelete
    3. I found your this post while searching for information about blog-related research ... It's a good post .. keep posting and updating information. book series

      ReplyDelete