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!

    19 comments to "Dropdown menu for post titles list"

    Mbafeung FM June 8, 2010 at 7:11 AM    

    Thanks a bunch Greenlava for this tutorial. It works perfectly well! Thanks again for always keeping your promise to help some of us who are barely grappling with blogging techniques.

    METAGLOSSIA June 8, 2010 at 8:41 AM    

    Many thanks again Greenlava. The tips works marvellously. Cheers!
    Now, permit me to ash another question.
    How can one customise the blogpost interface with textboxs to accompany the main post text?
    Thank you for your invaluable help to bloggers that we are.

    Greenlava June 8, 2010 at 3:49 PM    

    @Mbafeung FM
    My pleasure

    @Mbafeung FM
    In Layout>Page Elements, add a Text gadget to the sidebar. Then drag it to the top of or below Blog Posts box.
    Does that answer your question?

    Mbafeung FM June 8, 2010 at 4:38 PM    

    Don't mention Greenlava. The pleasure is really mine.
    Now, concerning your suggestion, it works superbly for the blog page template on the whole rather than the blogpost or specific "blog article" itself. The question is whether one can actually insert a text box or a text gadget inside an individual post (e.g. for special effects or for illustration purposes), in a much similar way to what one currently does to add an image or a video.

    Greenlava June 8, 2010 at 10:31 PM    

    @Mbafeung FM
    You can't put a gadget inside a post.
    As an alternative, you can use a HTML table. For example this post uses a table How to find people and blogs to read on Blogger.
    Learn about tables on W3Schools

    Anup@Hack Tutors June 8, 2010 at 10:40 PM    

    Nice job Greenlava. You're very good in coding. I applied your tricks in my blog :)

    Mbafeung FM June 9, 2010 at 5:41 AM    

    OK Greenlava. I shall explore that path and let you know the result later. Thanks for always being there.

    BioGal July 17, 2010 at 1:28 AM    

    Hello, Greenlava - Are you able to be awesome and produce these fantastic tips non-stop, or do we have to share you with a day job?

    Anyway that isn't my question.
    I would like to know if the chrono order can be reversed so that the most recent posts are at the top of the drop down list...

    Many thanks.

    Greenlava July 17, 2010 at 4:23 PM    

    @BioGal
    I'm jobless (unless bumming around is considered a job) :)

    Back to answering your question
    You have to clone and edit the pipe -remove all modules between Rename and Pipe Output modules, then connect the two modules.

    BioGal July 17, 2010 at 8:53 PM    

    Erm, okay, that is WAY too advanced for me! Maybe in a year or two I'll manage that! :)

    All that sounded like to me was space talk! Do you have affiliations with NASA?

    Modules, pipes, clones...crumbs!

    Tibor Szabo February 12, 2011 at 9:33 PM    

    Thank you!

    This works nicely at my blog over at http://plebswithkids.blogspot.com.

    Good work!

    EP March 22, 2011 at 11:56 AM    

    hey where do i paste the code? do i edit in html?

    Greenlava March 22, 2011 at 9:45 PM    

    @EP
    As stated in step 1, first you install All Post Titles List.
    Then use the code in step 2 as a patch.

    Tony Timmins May 28, 2011 at 3:12 AM    

    Brilliant piece of code, I love this blog. Keep up the great tips. One question - is it possible to wrap the text inside the dropdown box? My post headings seem to be rather long!

    Greenlava May 30, 2011 at 11:57 PM    

    @Tony Timmins
    I'm afraid that's not possible.

    Anonymous,  July 13, 2011 at 11:07 PM    

    I was using this on my blog for about a month and it was working fine but now when I click on it it just shows "Click to Choose A Post" in the dropdown menu and not the actual list of posts like it used to. What happened?

    Greenlava July 14, 2011 at 5:18 PM    

    @Anonymous
    There was something with the new Yahoo Pipe v2 engine. But it's been fixed. Your menu should've returned to normal now.

    PTVADIKTUS February 20, 2012 at 10:54 AM    

    hello how to change the background color?

    Greenlava February 20, 2012 at 4:06 PM    

    @PTVADIKTUS
    Add background property in the style attribute in line 4, like so:
    document.write('<select style="width:100%; background: PUT_COLOR_CODE_HERE;" onchange="location=this.options[this.selectedIndex].value;">');

    Post a Comment

    We love to hear from you! Leave us a comment.

    To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

    Click to go to top Click to comment