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:
- List them inside a widget or in a
- 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.
- Append (or not) a comment count at the end of each title.
- Choose numbered or bulleted list style.
Let’s get started,
1) The code
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.)
- Create a new page by going to Posting > Edit Pages and clicking the New Page button.
- Click Edit HTML tab to switch to HTML mode.
- Copy and paste the code into the editor.
- Click Post Options at the bottom of the editor. Under the Edit HTML Settings heading, select Ignore newlines.
- Publish and view your post . The list should appear inside the page.
- 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.
- 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.
- Go to Design > Page Elements.
- Click Add A Gadget link.
- Enter the title of your widget e.g. All Posts List.
- 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.
- 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
alphabetin code line 21 to
- 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
- 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:
- Go to the Yahoo! pipe.
- Log in to your Yahoo! account.
- Create a clone by clicking the Clone button.
- Click edit source to edit it in anyway you like.
- When you’re done editing and saving, test run it by clicking Run Pipe button to confirm the output of the pipe.
- 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.)
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.