Saturday 13 May 2006

Blogger 'Previous Posts' & 'Archives' Drop Down Menu

I have drop down menu issues. I know this. But, I'm learning to deal with it. And with the help of thrbr over at Blogger Forum I'm on the road to recovery. I basically had everything I needed on my personal journal, except I couldn't figure out how to make the drop down menu stay within my sidebar and not expand with long post titles. Breath easy, I now know how, and I'm going to share it here.

For recent or previous posts: Look for this code in your template
<h2 class="sidebar-title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
and replace it with:
<select name="PreviousItemsMenu" onChange="location.href=this.options[this.selectedIndex].value;" style="background-color:#ffffff; color:#555555; font-family: Trebuchet MS; width: 123px;" >
<option value="/">Previous Items</option>
<BloggerPreviousItems>
<option value="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$></option>
</BloggerPreviousItems>
</select>

For the archives: Look for this code in your template
<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
and replace it with:
<select name="ArchiveMenu" onChange="location.href=this.options[this.selectedIndex].value;"
style="background-color:#BDDEAD; color:#080808; font-family: Comic Sans MS; width: 130px;">
<option value="/">- Archives -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
<option value="/">Current Posts</option></select>
To modify the menu to fit the style of your blog, the code in red text is the place to go. My examples have different colors, fonts and sizes just to show different options.

If an ever-growing list of links in your sidebar bothers you, this may be your solution. I'm not saying that it is the answer to all sidebar issues. But it really works nicely for certain tasks. Another option that is not a drop down menu, but serves basically the same purpose is discussed in this post A drop-down menu alternative. I use that method for a complete list of all my posts.

post signature

No comments:

Post a Comment