In this tutorial I will show you how to list all your post titles. 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 inside a post.
- Select whether to arrange them in alphabetical or chronological order. If you use your blog as an online serial novel, then chronological order is just what you need.
- Select whether to include comment count at the end of each title.
- Select ordered (numbered) or unordered (bulleted) list style.
Make your own
Put list in a (dedicated) post
- For the code to work, you must disable line breaks conversion in your blog. Go to Settings > Formatting and on Convert Line Breaks, select No.
- Go to Blogger Post Editor.
- Switch to Edit HTML mode.
- Copy and paste the code in the editing window.
- Save your post and view it. The list should be showing inside the post.
- You may want to add a direct link to the post from your homepage. This can be done by adding navigation tabs or better still turn the dedicated post into a static page.
Put list in a gadget e.g. sidebar
- 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.
- Save and view your blog.
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.
Selecting the 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 as 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
Customizing 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.)