Dropdown menu for post titles list

A reader asked me whether I could convert the All Post Titles List into a dropdown list, similar to the labels dropdown list. So here we go, as per requested -a tutorial for a dropdown list for all post title listing. If you have a mile long post title list, then this hack is just for you.

 

I. Converting Post Titles List to dropdown

Follow these simple steps:

1. Install the All Post Titles List widget.
2. Then come back here and replace the code from line 1 to line 18 (of All Post Titles List widget) with the code below. This code will convert the list into a dropdown list.
   

   <!-- Post Title Dropdown List Start --> 
   <script type="text/javascript">
   <!-- 
   document.write('<select style="width:100%;"  onchange="location=this.options[this.selectedIndex].value;">'); 
   function getYpipeTL(feed) { 
   var ddTitle = "<option>Click to choose 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(pComment); //to remove comment count delete this line 
   document.write('</option>'); 
   } 
   document.write('</select>'); 
   }
   //--> 
   </script>
   <!-- Post Title Dropdown List End -->

3. Save and view your blog.

II. Changing dropdown menu and list widths

• You can change the width of the menu by changing the value in select tag in code line 4.
• As for the width of dropdown list, change the value in option tag in code line 16. For some reason, applying the same width value (with that of the select tag) won’t get you the same width. Test with different values until you get your desired width.

 

III. Tooltip

Post titles that exceed the dropdown list width will be truncated. To make up for that I have added a tooltip to each title. This tooltip will show the full text when you hover a post title.

 

Enjoy!