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>and replace it with:
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
<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>and replace it with:
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
<select name="ArchiveMenu" onChange="location.href=this.options[this.selectedIndex].value;"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.
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>
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.
16 Comments:
I have a "team" blog - www.chicalac.blogspot.com - which has about 28 posts. I really like the idea of being able to list them in the sidebar using a drop down box (There are not really enough posts to us a daily, weekly or monthly Archive function). So using your suggested code as a model, I inserted the following code into the template:
{h2 class="sidebar-title"*}Previous Posts*{/h2}
{select name="PreviousItemsMenu"
onChange="location.href=this.options[this.selectedIndex].value;"
style="background-color:#CCDDBB; color:#333333; font-family: Trebuchet MS; width: 123px;" }
{option value="/"}From the Archives...{/option}
{BloggerPreviousItems}
{option value="{$BlogItemPermalinkURL$}"}{$BlogPreviousItemTitle$}{/option}
{/BloggerPreviousItems}
{/select}
Everything works absolutely perfectly when I use the Preview function before saving the changed template - I get the box just the way I want it, and when I open it, it opens with a scroll bar, initially showing the most recent 10 or so posts, and allowing me to scroll down through all 28. But when I save changes and republish the blog, the drop down box displays only the most recent 10 posts, and there is no scroll bar to scroll down to the rest. Have I missed something, like the difference between "Recent" and "Previous" posts? Is it because I'm not using the Archive function - I have it set to None on the dashboard settings -? Thanks!
Sorry - Just realized blogger wouldn't accept my Comment with the HTML brackets, so I replaced them with curly ones - the code on the blog does have the right ones!
@Bob e, I don't know if there is a work around for this because blogger limits the number displayed to 10.
But, I think I have another answer for you. Did you see my "Table of Contents" on the top of my sidebar? That is actually a list of all my previous posts! Read Table of Contents - Another Method to see how it is done. Click on my "A list of all previous posts" link to see it in action.
BTW, I love your blog! What a wonderful idea! The old photos are great.
Annie - you made my day! Real quick - the camp was in existence from about 1956-1965. None of us were in touch for maybe 40+ years. The web allowed some industrious alumni to arrange a 2 day reunion in July, 2005 in New Jersey They came from CA,TX,NC,FL,IL,Ottawa. It was pure magic (There's a link to the photo slide show on the site). After a smaller gettogether in Dec, 2005, I figured it was time to learn what a blog was, since it sort of sounded like it fit our needs - and it sure has. I love to play with it, which is how I found your blog - amazing. You are doing what I'd love to do. I love learning, experimenting, staying up all hours only to get frustrated - but to receive a complement from an experienced blogger - I mean it. Thanks!
As to my question, I figured as much, but am still scratching my head as to why it works - scroll bar and all - in preview mode. So, while I wait for Beta Blogger to "invite" me to migrate the team blog over to it - somehow, they're waiting to do for team blogs - I'll check out your suggestion, and read through you fantastic resource for more ideas.
This is fun - great community, and allows me the knowledge that the brain cells are still working!
Bob
@Bob E, Did you ever hit the nail on the head...staying up all hours only to get frustrated. I do love playing with my template, thus the birth of this blog. I figured that if I didn't know how to do it, there were others out there that didn't know either. So I learned and shared as I went. I'm far from an expert. I'm more on the stubborn and persistent side of the equation.
I didn't know that Blogger was holding out on team blogs. Hang in there, I have a feeling it shouldn't be much longer.
Annie - I decided to try the drop box, even with the limit of 10 "previous" posts. Works fine in Firefox 2.0, but much too big in IE. The whole blog looks different in both programs, and I think the point may be moot when I get to beta blogger. But I'm getting too old to stay up to 3 am and remain frustrated!
Thanks. Bob
@Bob, late nights are getting to me too. Or maybe it's the frustration. Or both.
It drives me crazy that things look so different in different browsers. Some days I feel like saying to heck with it and only worry about how it looks in Firefox, then I look at some stats and see how many people still use IE and change my mind. Probably my strongest influence is my husband...he is a die hard IE user.
And it seems I'm getting more and more emails for assistance. Not that I mind, but I'm so dang slow! It doesn't come to me that easily. I just love figuring it out! I think I'm bull-headed! One saving grace that happened with the new Firefox update...it has a wonderful spell checker built in. It checks everything that I type. I love it!
Blogger 'Previous Posts' & 'Archives' Drop Down Menu in Chinese
Hi, i need your assistance. but before anything else, thank you so much for the code. It works on my blog. =P
Anyway, i need your help. I want to extend the number of previous post that appears in the dropdown menu from 10 posts to more than that... let's say 20 or more. Do you have a code on that?
Please reply me back. Thanks
THANK YOU!!! I found BOTH answers in ONE post..LOL
This was a big help, thank you. I'm using classic template so it's frustrating not having access to all of the widgets.
Is there any way to do a drop down list like this for labels?
@Mike, I feel your pain. My Buttermilk Clouds blog (link in sidebar) is also classic. I do have a way to do it with widgets, but haven't worked on a way for a classic template.
thanks alot!!!!!! really appreciate it~~
Thanks lots!
Thank you so much for this! :)
This is a nice place! Thank you very much for this amazing blog! ^^
But i wonder, if there is a way to show ALL the previous POST in a box.
Example, this is my blog -> http://crimson-box.blogspot.com/ and in the TAGBOARD box there are just the RECENT post...
I don't know if there is a way to add ALL THE POSTS there.
Can you help me?
Yes working,Thansk