News of the Day

How it's done (Parte the seconde)

Posted on October 2, 2003 at 11:31 AM in Meta Data | Permalink

Carrying on from the previous post, this time we'll have a look at the Blog Archive & Eternal Links pages.

Both pages are created as new index templates in the template manager in TypePad. The Blog Archive page is just constructed from the Archive template, slightly modified, while the External Links page is just the TypeLists & the Quick Links category list is done using the template shown at the end of the previous post.

First, the Blog Archive template. The surrounding layout is the same as the home page, the code for the Category list is as follows:

<div id="content">
<h2>Archive by Category</h2>
<MTCategories>
<a href="#<$MTCategoryLabel dirify="1"$>"><$MTCategoryLabel$></a> 
</MTCategories>

<MTCategories>
<a id="<$MTCategoryLabel dirify="1"$>"></a>
<h3><$MTCategoryLabel$></h3>
<ul>
<MTEntries> <li><a href="<$MTEntryPermalink$>" title="<$MTEntryExcerpt remove_html="1"$>"><$MTEntryTitle$></a> <span class="posted"><$MTEntryDate format="%B %e, %Y"$> at <$MTEntryDate format="%I:%M %p"$></span></li>
</MTEntries>
</ul>
</MTCategories>
</div>

The first section of <MTCategories> creates the menu up the top, then the second section creates a list of all the posts grouped by category sorted by reverse date order (latest first).

The External Links page just as simple. It doesn't include the sidebar for reasons of space, but the main content area is just made up of the include tag for the Quick Links template, and the two TypeLists, formatted using the new TypeList Tags:

<div class="links" id="quicklinks">
<h2>Quick Links</h2>
<!--#include virtual="/quick_links/categories.inc"-->
</div>
<div class="links">
<h2>Links</h2>
<ul>
<MTList name="Links">
<li><a href="<$MTListItem field="htmlurl"$>" title="<$MTListItem field="notes" remove_html="1"$>"> <$MTListItem field="site_name"$></a></li>
</MTList >
</ul>
</div>
<div class="links">
<h2>Pundit Blogs</h2>
<ul>
<MTList name="Pundit Blogs">
<li><a href="<$MTListItem field="url"$>" title="<$MTListItem field="notes" remove_html="1"$>"><$MTListItem field="title"$></a></li>
</MTList >
</ul>
</div>

The <div> tags are for layout and formatting control in the style sheet.

This could have just as easily been done with the include tags instead of using the TypeList Tags, but I want the flexibility of formatting it exactly how I want it.

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

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

Comments

thanks for the explination Glenn! If I end up using something that looks similar to your "Archives" I'll give you credit. I still have one question though. How where you able to use the mini notepad icon in your side-blog? I've seen several sites using "mini icons" attached to hyperlinks but havent been able to find how to do this. Thanks.

# Posted by: Joel (68.97.178.141) at Oct 3, 2003 1:28:49 AM

The mini icons are cool, wish I could claim the idea, but I got it from Simple Bits, which is a very cool design site. CSS, is there anything it can't do? :)

# Posted by: Glenn Slaven (203.51.84.186) at Oct 3, 2003 9:10:06 AM

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