Drop Down Menus for Categories + Archives

Let's start with a pretty easy hack that's also quite useful: Drop down menus for categories and archives. I found this hack at Colleen's blog. I've simplified her instructions a bit to make this easy, but you might want to read her post to see how she applied styles to the menus.

Drop down menus are a great hack that probably ought to be a standard form of Typelist. Currently you can only do this if you have a pro account and can alter your template code. Aside from making navigation easier and saving space in your sidebar, there's another thing I really like about these menus— they allow you to make your full archives available in an obvious way. If you've been blogging for over ten months, you may have noticed that the standard TypePad list for archives is limited to displaying only ten months. I find this annoying for two reasons: it makes it harder for readers to find older entries and it obscures the fact that you've been blogging for a longer period of time. I do take bloggers more seriously when I can see that they've been at it for over a year, and I doubt I'm alone in that. It turns out that the archives title is a link to an automatically generated page which has links to the full archives, but I don't think that is very clear… I would never have figured that out if Typepad Tech support hadn't told me.

If you look near the top of the sidebar in this blog, you can see how the menus look. Click on the extended post link for full instructions and easy cut+paste code.

To Make drop down archive menus follow these steps. You must have a TypePad Pro account and be using advanced templates in order to use this hack.

1. Go to your design tab for the blog you want to add drop down menus to.

2. Click the template for your sidebar. If you have more than two columns, make sure you choose the correct sidebar template.

3. Copy your existing code and paste it into a text document in case you make a mistake and need to start from scratch. This is always recommended when you alter template code.

4. find the typelist in which you want to insert your archives. It will look something like this:
<!--#include virtual="/lists/tph_subscribe/module.inc"-->

Actually, you will be inserting the menu between Typelists… I don't think there is a way to position it in the middle of an existing Typelist. Because it has no header/headline, it will show up at the bottom of the list above it as though it were part of that list.

5. Insert the follwing code, verbatim:

        <div class="module-content">
            <ul class="module-list">
<form>
<select style="width:150px; margin: 0px 0px 10px 5px; font-family: verdana, Arial, sans-serif; font-size: 11px;" onChange="document.location=options[selectedIndex].value;">
<option value="">archives by month</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$></option>
</MTArchiveList>
</select>

<select style="width:150px; margin: 0px 0px 10px 5px; font-family: verdana, Arial, sans-serif; font-size: 11px;" onChange="document.location=options[selectedIndex].value;">
<option value="">archives by category</option>
<MTArchiveList archive_type="Category">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</option>
</MTArchiveList>
</select>
</form>
            </ul>
        </div>

6. click "save" then "publish."
7. Reload your blog. You should now have menus. Yay!

You don't have to do menus for both sets of archives if you only want one. You can choose one or the other by selecting just one of the code paragraphs above.

Tags: typepad, blog, movabletype, blogs, blogging, web2.0, weblogs, design, typelist, hacks, typepadhacks, categories, archives, tags, advanced templates

Comments

[Posted: May 31, 2007 4:16:23 PM]

Hi,

What if you just want to use weekly archives?

Thanks!

[Posted: Jun 14, 2007 4:39:50 PM]

Hi Lisa,

Where the code above says: archive_type="Monthly" you would just replace the word Monthly with Weekly. It is case sensitive, so be sure to capitalize Weekly.

[Posted: Jun 24, 2007 11:31:26 AM]

Hi John,

I've searched and found a few posts or comments about the requested hack to add a "nex/previous" link on the main page to navigate to the 10 newer and older posts directly from the main page but it seems that no hack has been found so far ? The typepad support answers to me that it's possible but involves some javascript stuff. Have any idea how can I implement this ?

[Posted: Jun 5, 2008 5:08:32 AM]

I love this drop down box, thank you! I installed it a few months ago and it's been working fine, but for some reason it's only showing about 1/3 of my total categories. The others have just dropped off. Can you think of any reason why this might be?

Joanna

[Posted: Aug 1, 2008 8:30:39 PM]

John, did you ever find a hack for adding "MORE" at bottom of homepage in order to see the next "page" of most recent posts?

[Posted: Aug 2, 2008 7:35:17 PM]

@James:

Update your templates to include the pagination options.

[Posted: Oct 24, 2008 11:33:56 PM]

Goodness, how I wish you could add this code to the CSS in the Design area or to Typelist Notes and not have to have Advanced template mode. I have a pro account, but really like using the user-friendly layout to navigate and design my blog. Is there a way to create the dropdown box (which I did in Typelists using notes) and connect it to the list you want? I added the code to the Typelist Notes and it came up in my blog, the only problem is, obviously, is that it didn't show the monthly archives. There's gotta be a way. If you figure it out, please let me know.

Susan
http://www.raisin-toast.com

[Posted: Mar 9, 2009 7:59:36 PM]

@Susan (and others with non-Advanced template access):

Like you I do not have a TypePad Pro account; alas only Plus account and thus unable to implement this hack.

However, here is a workaround along the lines of your request:

1. For your blog, go to Design tab>Content
2. Insert Module=Monthly Archives (under Modules list)
3. Save Changes (button at bottom of page)
4. View Weblog (link upper right corner)
5. Find Monthly Archives module, and copy URL for "More..." link (right-click>copy)
6. Still logged into TypePad, go to TypeLists tab>Create a new TypeList
7. Link Type=Notes; name as desired (e.g. Archive List)
8. For Label, leave blank; for Note, enter "(a href="[paste URL you copied step 5 above, should end /archives.html]" target="_blank")Archives(/a) [replacing parentheses with carrots as appropriate]
9. Save, Configure, Publish
10. View Weblog (I'd refresh the cache to force new page version)

Delete original Monthly Archives Module as desired.

Not as clever as drop menus, but good enough for this non-Pro TypePad user: Mr Ulster