Listing Post Titles in Blogger.

List the latest post Titles up to more than 1000post using RSS Feed through Yahoo Pipe.Just you need to add JavaScript and publish it.The old way is not so easy way.People show the post titles by adding link of each post Titles and publish it.But what if you got more than 1000 post.You will suffer from headache.One of the easiest way is to list using Yahoo Pipe.The content gets updated regularly.For Demo you can go this link.If you want to do so lets do it.

JavaScript Code of Yahoo Pipe for Listing Post Titles

1. The JavaScript Code for listing post is given below.

   <!-- Post Title Listing -->
   <div style="height:300px;width:500px;overflow: auto; id='listpost'">
   <script type="text/javascript">
   function getYpipeTL(feed) {
    document.write('<ol>');
    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);
   document.write('</a></li>');
    }
    document.write('</ol>');
    }
    </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?
    BlogUrl=http://bloggerrounder.blogspot.com
    &Order=alphabet
    &_id=364fef2aa699b7ec391dd3c3c1c91eb2
    &_callback=getYpipeTL
    &_render=json" 
   type="text/javascript"></script>
   <span style="font-size: 80%; float:right;">Get <a href="http://bloggerrounder.blogspot.com/2011/04/listing-post-titles-in-blogger.html" target="_blank">it</a></span>
   </div>
   <!--Post Title Listing End -->

2. Where,
   1. In Line 2 change height:300px and width:500 px to change height and width.If if don’t want to keep in scroll box then remove line 2 and line 27
   2. In Line 5 and Line 17 change ol to ul for bulleted list.If your list does not get bulleted then you need to apply css from here.
   3. Remove Line 14 for removing comment counter.
   4. In Line 21 change bloggerrounder.blogspot.com with your Blog URL without including slash(/)
   5. In Line 22 change alphabet to chrono for listing post tiles in chronological order.

Listing Post Title

In Static page.

1. Go to Blogger Dashboard>Edit HTML>Edit Page
2. Click on New Page.
3. Switch to HTML mode.
4. Add the List Post Title JavaScript code.
5. In post Option select Ignore New Lines. If you wont the codes gets attacked by line break(<br/>) which result problem.
   
   
6. Click on Publish Button without switching to Compose Mode.

In Widget

1. Go to Blogger Dashboard>Layout
2. Click on Add A Gadget
3. Select HTML/JavaScript
4. In Content box add the “List post Title JavaScript Code”
5. Click on Save Button

Styling the List.

To style the list just add CSS in Blogger HTML like this.

#listpost {
/*Styling codes here*/
}

Style for adding background,border,margins,paddings etc.If you don’t know how to add CSS then you can learn from here.

Cloning the Pipe.

You can clone the pipe to be independent although pipe works smoothly but it may encounter problem so its better to clone.To clone follow this.

• Sign in at Yahoo.
• Go to This Yahoo pipe.
• Click on clone.
• After cloning copy the id of your pipe from adress at the end of your pipe URL.
  
• After getting The Id of Yahoo Pipe change id of our pipe in line 23 with your id.

Using Drop Menu for Listing Post Titles.

If you want to use Drop menu instead of listing them noramally the replace line 3 to line 19 of Listing post Titles JavaScript codes

<script type="text/javascript">
<!-- 
document.write('<select style="width:95%;"  onchange="location=this.options[this.selectedIndex].value;">'); 
function getYpipeTL(feed) { 
var ddTitle = "<option>Click to chose a Post</option>"; 
document.write(ddTitle); 
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 = "<option style='width:210px;' value=" + href + 'title="' + pTitle + '">' + pTitle; 
document.write(pList); 
document.write('</option>'); 
} 
document.write('</select>'); 
}
//--> 
</script>

Where

• In Width:95% you can change as your taste.
• You can change “Click to choose a post” as you like.
• You can remove line 15 to remove comment count.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.