« | Main | Rubbery legs and progress »

Kottke mode (integrated lists & posts) 2004

Ever since Jason Kottke first moved his sidebar content into the main flow of his blog posts, I've been wanting to find a way to do that in Typepad. Today I woke up with the answer: abuse one of the other available fields and the conditional tagging possibilities of Movable Type.

Below this post [when it is viewed in the Month Archive view] is a little movie review of Rat. Notice how it's a small amount of content consisting of a pointer to something else online and a very short comment. In the past, I've had this sort of thing in the sidebar of the site, but that has the problem of introducing very recent content into my archive pages and distracting from the topic or time the page is supposed to focus on. It also plays merry hell with search engine results since words from these little mini-posts appear on the same page as the words in the archived posts and are assumed to be part of the same context when, in fact, they aren't.

So, how did I do it? I appropriated the "Extended" post field and it's conditional tags, made use of the Movable Type tag <MTElse> and applied some special styling.

Note: this approach requires use of Advanced Templates in Typepad.

For example, in my main index template, I now have:


<a id="a<$MTEntryID pad="1"$>"></a>


<div class="extended"><$MTEntryMore></div><div style="clear: both;"></div>


<MTWeblogPostIfShow field="date_header">
<h2><$MTEntryDate format_weblog_date="1"$></h2>

<MTWeblogPostIfShow field="post_title">
<h3><$MTEntryTitle$> <span class="fadeout"><$MTEntryDate format="%Y"$></span></h3>


<p class="posted">
Posted on <$MTEntryDate format="%B %e, %Y"$> at <$MTEntryDate format="%I:%M %p"$> <MTEntryIfCategories> in <MTEntryCategories glue=", "><MTBlogIfArchives archive_type="Category"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a><MTElse><$MTCategoryLabel$></MTElse></MTBlogIfArchives></MTEntryCategories></MTEntryIfCategories> | <a href="<$MTEntryPermalink$>">Permalink</a>
| <a href="<$MTEntryPermalink$>#comments">Comments (<$MTEntryCommentCount$>)</a>
| <a href="<$MTEntryPermalink$>#trackback">TrackBack (<$MTEntryTrackbackCount$>)</a>




and I've added these entries to my style sheet (some, admittedly, more in confused attempts to fix problems with the image floating out the bottom of the box than in answer to a specific design intent):

.extended {
border: 1px dotted red;
width: 75%;
margin-left: auto;
margin-right: auto;
padding: 3px;

.extended p {
text-align: left;

.extended img {
float: left;
margin: 2px;

I made similar changes to those in my main index template to my archive pages, but decided in those contexts I want the "posted..." line to appear so that people have access to commenting, trackbacks and permalinks. Visit the Memetic archive to see this.

Now I just need to make sure I didn't ever use that extended post format for an actual continuation of a post. Let me know if you ever spot something in this indented, dotted border style that isn't a little link or short media review, won't you? Ta.

I should also say thanks to Nikolai Nolan for assistance with using the CSS clear:both trick to make sure an image floated in one of these little mini-posts doesn't extend down beside the title for the next post. Unfortunately, I subsequently broke something. Anyone got an idea what I'm doing wrong with that image?(Oh and why won't CSS let me tell the image "don't impinge on anyone else's personal territory" instead of having to tell everybody else not to let the image bug them? Weird mental model, sez I, and fervently hope I've missed something along the way and it isn't that wacky.)

p.s. Note that since the Typelists only display the date and not exact time of entry creation, all these former Typelist items I'm migrating into the new format (i.e. all prior to today) have made up times.

Posted on May 8, 2004 at 02:57 PM in Weblogs | Permalink


« | Main | Rubbery legs and progress »

Blog (noun) A weblog or similar brief journal usually containing links and commentary thereon. Term coined by Peter Merholz.

Visit Typepad or Blogger to start your own. (I began with hand coding, then switched to Blogger when it first became available, then to Movable Type when I wanted more control over my weblog and to have it hosted at a place of my choosing (Hurricane Electric). Since 06/2003 I've used Typepad, a hosted service built by the same folks who made Movable Type, which I love because I don't have to maintain the underlying system).

You may write to Dinah @ this domain.

Except where otherwise noted all content is copyright 1965-2018 Dinah Sanders. Please do not repost my writing or other creations elsewhere. Instead, copy a tiny bit and link to the rest. Thanks! Images are copyright of their original creators. MetaGrrrl logo and photos by Dinah are copyright 1965-2018 Dinah Sanders. Inkspot Books and the Inkspot logo have been Service Marks of Dinah Sanders since 1993.