News of the Day

How it's done (Parte the firste)

Posted on October 1, 2003 at 02:44 PM in Meta Data | Permalink

Since people asked so nicely, and gave me such effusive flattery, I'm going to put up details on how this redesign was done. Seeing as this is done with advanced templates on TypePad you probably won't be able to use much of it unless you have pro access. I really don't mind if you swipe any of the ideas here (although if I find a site that looks exactly the same I may be a wee bit annoyed), but if you use a large bit, an attributing link would be appreciated.

Before we start, please check out the site colophon, which will give you a very brief rundown of what the site is running on. As mentioned in the colophon, the site is constructed with XHTML & CSS, so if you aren't familiar with both you're not going to get very far I'm afraid. If you want to know about them, check out w3schools. It's an excellent, free collection of tutorials on using all the technologies set out as standards by the W3C.

First up we'll have a look at the Quick Links section.

The Quick Links, as was noted by liza in her glowing review (btw, the check's in the mail liza), are constructed using a separate, non-public blog. In this blog I created a template that I then include using SSI on the relevant pages. This template is saved as a file named qlinclude.inc. This is similar to the system that Paul Watson uses on Crikey!, but I can't stand frames, so I just included the template into the page. The template itself is fairly simple:

<a href="<$MTBlogURL$>index-full.rss" title="Syndicate Quick Links (RSS 2.0)"><img id="qlrss" src="https://glenn.typepad.com/news/images/icons/rsssyndicate.png" alt="Syndicate Quick Links (RSS 2.0)" /></a>
<h2>Quick Links</h2>
<MTEntries lastn="15">
<$MTEntryTrackbackData$>
<a class="link" href="<$MTEntryMore encode_html="1"$>" title="<$MTEntryTitle encode_html="1"$>"><$MTEntryTitle remove_html="1"$></a>
<p><$MTEntryBody$><span class="posted"> | <$MTEntryDate format="%d %b %Y"$></span> <a onclick="OpenComments(this.href); return false" href="<$MTEntryPermalink$>" title="Comments & Trackbacks for <$MTEntryTitle remove_html="1"$>">Comm/TB</a><span class="posted"> | </span><MTEntryCategories glue=", "><a href="/news/links.html#<$MTCategoryLabel dirify="1"$>"><$MTCategoryLabel$></a></MTEntryCategories></p>
</MTEntries>

The template is then included on the pages I want it on with <!--#include virtual="/quick_links/qlinclude.inc"-->, which is then wrapped in a <div> tag for formatting. All of which just creates a list of the last 15 Quick Links posts as shown on the main page of this blog.

The only real thing to note here is that the href attribute of the entry's <a> tag is set to <$MTEntryMore encode_html="1"$>. This is the one hack that I've used for this. The extended entry of the post is where I put the URL that is being linked to. I've done this because, well, I needed to put the URL somewhere and the description that goes with the link is only ever a couple of lines & so I never use the extended entry.

The Comm/TB link uses the javascript code that Movable Type used to open up the Comments/Trackback window. For those of you who've used MT you will remember that when you clicked on the Comments or Trackback link on an index page it opened a new window rather than just going to the individual archive page as TypePad does. The page that it opens up here is just the individual archive for the Quick Links blog, with the body text of the post removed so it just leaves the comments & trackback info. So you can comment on Quick Links & you can ping them. This also enabled me to have an RSS feed for the Quick Links which you can syndicate if so inclined.

On the Eternal Links page there is an archive of all the Quick Links by category, this is done using the same process as above, just with a slightly different template:

<MTCategories>
<a id="<$MTCategoryLabel dirify="1"$>"></a>
<h3><$MTCategoryLabel$></h3>
<ul>
<MTEntries>
<li><a href="<$MTEntryMore$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li></MTEntries>
</ul>
</MTCategories>

That's basically it as far as the Quick Links go. I'll try and put up a description of the basic structure of the site next if people are still interested.

TrackBack - https://www.typepad.com/services/trackback/6a00d8341f134553ef00e5503bc2c88834

Listed below are links to weblogs that reference How it's done (Parte the firste):

» Trackback, what it is & why you should use it from Unofficial TypePad Resources
Trackback, great feature of MovableType/TypePad that it is, is oft misunderstood & not used enough. There seems to be quite a bit of confusion about how it works. Trackback is a system of letting a blog owner know that you [Read More]

Tracked on Oct 20, 2003 4:53:48 PM

» Further tweaking from andrĂ©sgentry :: water
Another design change and I think this one is pretty neat. I've spent the last few days wondering how to get a collection of quick links onto my blog. This is partly a consequence of a general feeling of pointlessness [Read More]

Tracked on Jan 13, 2004 10:47:10 AM

Comments

thanks for the explination! I'm still curious as to how you were able to set up your archives and links pages.

# Posted by: Joel (68.97.178.141) at Oct 2, 2003 12:20:07 AM

Arrgh! I am such a dolt. I can't stand frames either (even though IFrames are pretty harmeless compared to the real thing) but could not think of how to get two blogs on one page any other workable way. Then you just step in and use an include. And I call myself a back-end web-developer, pffff.

Thanks mate, definitely going to be re-writing my blog to use this method.

p.s. Laughed myself sick at the Men at work quote above. An Aussie friend of mine is always raving on about vegemite. Beer dregs indeed (vegemite, not Aussies ;) ).

# Posted by: Paul Watson (209.203.25.206) at Oct 3, 2003 8:23:19 AM

I wonder if you can explain this further but dumb it down for us cut-and-pasters about 40%.

# Posted by: Madison (198.83.125.251) at Oct 15, 2003 9:51:30 AM

Hey, I'm thinking about this, and wondering, ok, using a pro account, how are you able to modify the TypePad code to get the XHTML and CSS up on the page? I can use Macromedia DreamweaverMX and Contribute, but have yet to get into the typepad site to modify those pages AT ALL! Can you suggest how a dummy like me can do this?

# Posted by: Phillip Swindall (199.174.135.145) at Oct 19, 2003 8:47:28 AM

I suppose if you're not comfortable editing code you could use Dreamweaver then copy it into the templates in Typepad. However you need to use the Movable Type Tags, it's not just editing HTML. This is a basic starter on how they work & this is the tag manual.

It's probably a good idea to get your head around the tags before you try & start modifying the templates in Pro. If you have questions, you can ask them on the Template section of the TypePad User Group and I'm sure there's plenty of us who will be willing to help :)

# Posted by: Glenn Slaven (203.51.81.175) at Oct 20, 2003 8:46:41 AM

Thank you for the explanation - that's good information and I'll get around to trying it at one point or another.

Glenn, I have a question if you don't mind my asking: how are you getting the underlined "acronym expander" tool tips? I seem to recall a macro being available for use with a Javascript in MT, but I have no idea how this would be done in Typepad.

Cheers,
Rick Cogley

# Posted by: Rick Cogley (165.76.107.242) at Dec 3, 2003 8:51:32 AM

Rick:

You just wrap the abbreviation/acronym in <abbr></abbr> tags (or <acronym></acronym> with a title attribute for the full text too tip.
eg.

<acronym title="Cascading Style Sheets">CSS</acronym>

# Posted by: Glenn Slaven (203.51.89.213) at Dec 11, 2003 10:31:25 AM

"I wish the real world would just stop hassling me" - Rob Thomas