blockquotes in TypePad and MovableType

Over the past few days, a few people have been posting in a thread on the TypePad User Group, trying to figure out why every so often, using the blockquote tag would suddenly cause display issues in a finished post.

One of the wonderful little things about a weblogging system such as [TypePad][1] or [MovableType][2] (and many others, of course) is that there are a lot of nice little usability touches that make it so much easier than having to work with all the HTML code yourself. Rather than mucking around with `

` tags and the like, you just type away, and when you hit “Post”, all those niggling little details are taken care of for you.

[1]: http://www.typepad.com/ “TypePad”
[2]: http://www.movabletype.org/ “MovableType”

Every so often, though, something doesn’t quite work the way you’d expect it to. Over the past few days, a few people have been posting in [a thread on the TypePad User Group][3], trying to figure out why every so often, using the `

` tag would suddenly cause display issues in a finished post.

[3]: http://blog.liquidvolt.com/typepad/viewtopic.php?t=333 “Blockquotes”

Since I’d had to battle with this in the past, I ended up writing [a small book][4] attempting to explain just what was going on. My full post (in my usual overly long-winded style) follows.

[4]: http://blog.liquidvolt.com/typepad/viewtopic.php?p=3044#3044 “After reading through this thread…”

After reading through this thread, I believe I’ve seen a couple different things going on when dealing with blockquote elements. I’ll see if I can clearly (if not terribly concisely) toss some useable answers out. ;)

I’ll start with an easier one to explain. I saw [this from BJ][5]:

[5]: http://blog.liquidvolt.com/typepad/viewtopic.php?p=2046#2046 “I just ran into this problem…”

> It seems the problem occurs when the blockquote is within a paragraph:
>
> `

blah blah

quoted stuff

More Stuff

`

There are a few types of tags in HTML. In this case, we need to know about two types: **inline** tags and **block level** tags.

**Block level** tags define a chunk of HTML code or text that is a self-contained block (I hate using a word to define itself, but that’s all I’m coming up with right now). A paragraph is a good example of this type of tag. **Inline** tags define a chunk of code or text that is contained _within_ a block level tag — for instance, bold or italic text inside a paragraph.

The simplest way to visualize this is simply visualizing how a paragraph is structured: you can have bold and italic words inside a paragraph, but you can’t have paragraphs within bold and italic words, nor can you have a paragraph within a paragraph. In other words, this is a valid structure:

Well, isn’t that just absolutely nifty!

But this isn’t:

I’m not sure what to use here

as an example

, so I’ll make something up.

Now, as long as all that made sense, all you need to realize is that a blockquote, as implied by its name, is a block level element, and therefore cannot be used within a paragraph. A properly formatted blockquote should look something like this:

I found this interesting little bit of information today:

A really interesting bit of information.

See? Pretty cool, huh?

If you want to correctly code an inline quote, as in BJ’s example, you should use the `` HTML tag, like so:

blah blah quoted stuff More Stuff

Okay, done. And that was the simpler of the two situations!

The second (and probably the one that’s biting the most people in the butt) is the bizarre linespacing issues that crop up at times when using the blockquote element. Sometimes blockquotes work fine, sometimes they’ll go tweaky within the blockquote, and sometimes they’ll affect things after the blockquote is closed.

I struggled with this for a while myself, but I eventually figured out that the culprit is actually one of the things that TypePad (and MovableType, for that matter) does to help us out: the automatic wrapping of paragraphs in paragraph tags (the “convert line breaks” option in the ‘Text Formatting’ menu).

TP/MT determines where to place paragraph and linebreak tags by looking at the text of the post: a single carriage return becomes a linebreak (`
`); blocks of text surrounded by two carriage returns (blank lines) get surrounded with paragraph tags (`

`…`

`). Simple enough on its own, but TP/MT also scans for certain other tags, and when it encounters those, it _does not_ insert paragraph or linebreak tags. I don’t know all of the tags that will trigger this, but I know that list tags and blockquote tags are definitely in the list.

Now, when a blockquote is only a single paragraph, that’s not a problem at all. For instance, given the following text entered into a post:

I found this interesting little bit of information today:

A really interesting bit of information.

See? Pretty cool, huh?

TP/MT would output the HTML as follows:

I found this interesting little bit of information today:

A really interesting bit of information.

See? Pretty cool, huh?

Where things get tweaky is when a blockquote contains multiple paragraphs. The first paragraph of the blockquote will be ignored as it should, but then the second paragraph of the blockquote gets an opening paragraph tag — and suddenly you run into a situation where two block level tags are fighting with each other. Then, when the blockquote ends, you have an opening paragraph tag, a closing blockquote tag, and then a closing paragraph tag — more confusion.

For example, given the following text put into a post:

I found this interesting little bit of information today:

A really interesting bit of information.

Some more information that’s also interesting.

See? Pretty cool, huh?

TP/MT will wrap the first line in paragraph tags. Because the second line begins with a blockquote tag, it will ignore that line. As the third line begins with normal text, TP/MT will wrap that entire line in paragraph tags, which is where the weirdness creeps in. Here’s how the output would look:

I found this interesting little bit of information today:

A really interesting bit of information.

Some more information that’s also interesting.

See? Pretty cool, huh?

Once you factor in CSS declarations into all of this, which might have differing settings for blockquotes and for paragraphs, you can see why things end up getting more than a little wonky as your browser tries to work its way through the tag soup and figure out how to format everything.

(ADDED: By the way, I should clarify that while both paragraph tags and blockquote tags are block level elements, different rules apply to them: while you cannot have a blockquote contained within a paragraph, you _can_ have a paragraph [or multiple paragraphs] contained within a blockquote. While this may seem a little confusing from a “but they’re both block level elements!” standpoint, from a logical and English usage standpoint, it does make sense. I just can’t explain it any better than that. ;) )

There are two ways to get around this, neither of which are incredibly complex — but neither of which are incredibly easy, either.

The first is simply to switch the ‘Text Formatting’ option to “none” and type in all the paragraph tags yourself so that TP/MT doesn’t have to do it automatically. It works, but it also takes away from some of the ease of use of TP/MT.

The second option (and the one I use) is to keep in mind how TP/MT will interpret what you give it, and do a little bit of manual work to get around the issue. You’ll still be doing some manual work with tags here, but not quite as much as you might in option one. When I’m entering a two (or more) paragraph blockquote into one of my posts, I simply take into account the extra tags that TP/MT will add, add a couple of my own, and then ‘push’ a couple lines together so that the resulting code will output correctly after it passes through TP/MTs routines.

This is a bit easier to show than to describe, so — starting with the above example again, here’s the starting point:

I found this interesting little bit of information today:

A really interesting bit of information.

Some more information that’s also interesting.

See? Pretty cool, huh?

Now, to prevent TP/MT from munging things up, I would put that example into one of my posts like this:

I found this interesting little bit of information today:

A really interesting bit of information.

Some more information that’s also interesting.

See? Pretty cool, huh?

Now TP/MT has only three lines to work through. As before, the first line gets wrapped in paragraph tags. Because the second line begins with a blockquote tag, it gets ignored, but as I’ve manually added paragraph tags, that’s fine. The third line, like the first, gets wrapped in paragraph tags because it starts with simple text, but because I put in the requisite paragraph tags on either side of the blockquote tag, all the tags in the resulting code balance out, like so:

I found this interesting little bit of information today:

A really interesting bit of information.

Some more information that’s also interesting.

See? Pretty cool, huh?

And (finally), that’s that! I realize that it’s probably fairly daunting at first, but after playing with it a bit, I think it should start to make sense. Maybe. ;)

Anyway, those are the two major issues with blockquote elements that are probably causing frustration for people.

And that’s _far_ more than enough babble from me on all this. Hopefully some of this helped some of you — as always, if I just managed to make things _more_ confusing, feel free to post followup questions, and I’ll do what I can to clarify!

Getting in Google's good graces

I use a number of techniques on my weblog, both in the code and how I create entries, that help Google get the most useful information out of my pages.

One of the constant topics that many webmasters and webloggers are concerned with these days is [Google][1], how to increase your site’s standing in Google’s eyes, and therefore drive more traffic to your site. I use a number of techniques on my weblog, both in the code and how I create entries, that help Google get the most useful information out of my pages.

[1]: http://www.google.com/ “Google”

While I’ve [mentioned some in the past][2], the subject recently came up in [a thread on the TypePad User Group][3], and I shared some of my methods [in that thread][4]. At the request of both [Liza][5] and [Richard][6], who have also been posting about this topic, I’m re-posting my post (post-haste, though not post-mortem, and definitely not postpartum) here…

[2]: http://www.michaelhanscom.com/eclecticism/2003/07/help_search_eng.html “Help search engines index your site”

[3]: http://blog.liquidvolt.com/typepad/viewtopic.php?t=411&postdays=0&postorder=asc&start=0 “Increasing Blog/Site Traffic”

[4]: http://blog.liquidvolt.com/typepad/viewtopic.php?p=2506#2506 “A little bit of both, probably.”

[5]: http://www.typepadistas.com/typepadistas/2003/12/reach_out_and_p.html “Getting Traffic to your site”

[6]: http://www.richardsilverstein.com/tikun_olam/2003/11/improve_your_bl.html “Improve Your Blog’s Visibility on the Web”

> Still, I’m amazed to read that you had 1,000 per day BEFORE MS made you a web celeb (boo! to them). Do you think those hits came from your blogging subject or from special tactics you engaged in to increase your site traffic.

A little bit of both, probably.

First off, it’s not so much my subject, as my _lack_ of subject. ;) Because I’ve never really focused on any specific topic for my blog, and just randomly babble about whatever crosses my mind, that gives Google a _lot_ of potential keywords to pick up on.

Also, I’ve been at this for about three years now, so I’ve got a fairly large archive section, which also increases the probability of any given keyword turning up in a search.

As far as special tactics, there’s a few techniques I’ve picked up on over the years that seem to help (some of which you covered in your post).

1. **Descriptive headlines as a page title.** The title of a webpage scores very highly in Google’s ranking scheme, so I generally try to make sure that my post titles are descriptive of what I’m posting about (“Lord of the Rings Trailer” rather than “This is cool!”), and I make sure that the post title is included in the page title.

I believe that TypePad is set to include post titles in page titles for individual archives by default, but some weblog tools (including MovableType in its early stages, I believe, though I could be wrong) only include the site name for every page title, so instead of a site containing 1000+ differently named pages, you’d end up with a site containing 1000+ pages all named “My Weblog”, which doesn’t give Google nearly as much to work with.

2. **Setting a consistent structure for the code on each page.** As HTML was designed to emulate (though not visually replicate) the structure of a printed document, it includes various structural elements such as various levels of heading. As Google pays attention to these when it scans a document, it often helps to use them correctly.

In the past, rather than using the `

`, `

`, etc. elements for headlines, division markers, and so on, many sites would use `` tags to give their subdivision headings the look they wanted. Now that the `` tag has been deprecated and we can use CSS to style every element on a page the way we want, it’s good to return to using structurally correct markup. In addition to making a site much easier to code, it also assists Google in determining the structure, topic, and relevance of any given page.

For each individual archive page on my site, I’ve structured it as follows:

1. ``: website name > post title</p> <p> 2. `</p> <h1>`: website name</p> <p> 3. `</p> <h2>`: website ‘tagline’</p> <p> 4. `</p> <h3>`: post title</p> <p> 5. `</p> <p>`: post body</p> <p> 6. `</p> <h3>`: trackback</p> <p> 7. `</p> <h4>`: trackback source</p> <p> 8. `</p> <p>`: trackback body</p> <p> 9. `</p> <h3>`: comments</p> <p> 10. `</p> <h4>`: comment author</p> <p> 11. `<p&>`: comment body</p> <p> 12. `</p> <h3>`: comment posting form</p> <p> This gives each page a clearly delineated, easy to read structure that tells both the reader and Google which parts of the page are the most important and the most relevant to the topic of the page.</p> <p>3. **Link descriptively.** Simply, this involves using natural language for your links so that the link is descriptive to what it points to. For instance, saying “The new [Lord of the Rings trailer][7] is out!” instead of “You’ve gotta see [this][7]!” gives Google more information about what you’re linking to.</p> <p> This carries a double benefit, in that not only does it give Google better information about what you’re referencing, it also lets Google know more about what you’re linking to, which helps out whoever is on the target end of your link.</p> <p>4. **Alt text on all images.** This is important for a few reasons. First off, it lets Google know what each image is so that Google can include it more reliably in their image search feature. Secondly, though, and more importantly, it greatly improves the readability of your site for people with disabilities using specialized browsers to read the web.</p> <p> Blind users can use a “screen reader” to read websites — this is a specialized browser which translates the text to audio, and reads the page to them. Without alt text, all that screen reader can do is give them the name of the graphic, and might end up telling them something like “Image named funnypicture.jpg”. With alt text, they’ll instead hear something like “Image named Gimli falls off his horse”.</p> <p>5. **Use the excerpt field to create useable descriptions.** While keywords are no longer recognized by Google, another `<meta>` tag in the `<head>` section of your document still is (I think), which helps Google determine the topic of the page, and that’s the ‘description’ tag. What I’ve done is put this code into the `<head>` of each individual archive:</p> <p> `<meta title="description" content="<$MTEntryExcerpt>” />`</p> <p> I then make sure to take a moment to create an excerpt for each entry as I’m making it that relates to the topic of the post, rather than just relying on TypePad’s auto-generated excerpt (which generally just grabs the first _n_ words of each post).</p> <p>[7]: http://www.apple.com/trailers/newline/returnoftheking/ “The Return of the King trailer”</p> <p>Anyway, there’s a few of the things I do which seem to help my site visibility. Mostly, though, I think a lot of it just boils down to the fact that after three years of babbling, I give Google a lot to work with. ;)</p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="byline"><span class="author vcard"><img alt='' src='https://secure.gravatar.com/avatar/9a076924469560ca18a153003fc750ea?s=49&d=mm&r=pg' srcset='https://secure.gravatar.com/avatar/9a076924469560ca18a153003fc750ea?s=98&d=mm&r=pg 2x' class='avatar avatar-49 photo' height='49' width='49' /><span class="screen-reader-text">Author </span> <a class="url fn n" href="https://www.michaelhanscom.com/eclecticism/author/djwudi/">djwudi</a></span></span><span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://www.michaelhanscom.com/eclecticism/2003/12/02/getting-in-googles-good-graces/" rel="bookmark"><time class="entry-date published" datetime="2003-12-02T00:12:12+00:00">December 2, 2003</time><time class="updated" datetime="2016-11-25T14:55:46+00:00">November 25, 2016</time></a></span><span class="tags-links"><span class="screen-reader-text">Tags </span><a href="https://www.michaelhanscom.com/eclecticism/tag/google/" rel="tag">google</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/html/" rel="tag">html</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/movable-type/" rel="tag">movable type</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/movabletype/" rel="tag">MovableType</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/search-engine-optimization/" rel="tag">search engine optimization</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/seo/" rel="tag">seo</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/technology/" rel="tag">Technology</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/traffic/" rel="tag">traffic</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/typepad/" rel="tag">typepad</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/weblogs/" rel="tag">weblogs</a></span><span class="comments-link"><a href="https://www.michaelhanscom.com/eclecticism/2003/12/02/getting-in-googles-good-graces/#comments">2 Comments<span class="screen-reader-text"> on Getting in Google's good graces</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <article id="post-1537" class="post-1537 post type-post status-publish format-standard hentry category-uncategorized tag-html tag-technology tag-title tag-tutorial tag-website"> <header class="entry-header"> <h2 class="entry-title"><a href="https://www.michaelhanscom.com/eclecticism/2003/07/30/our-friend-the-humble-title-attribute/" rel="bookmark">Our friend, the humble 'title' attribute</a></h2> </header><!-- .entry-header --> <div class="entry-summary"> <p>Earlier this evening, I got an e-mail from Pops asking me how I created the little tooltip-style comment text that appears when you hover over links in my posts. I figured that it was information worth posting here, on the off chance it might help someone else out.</p> </div><!-- .entry-summary --> <div class="entry-content"> <p>Earlier this evening, I got an e-mail from [Pops][1] asking me how I created the little tooltip-style comment text that appears when you hover over links in my posts. I ended up giving him what was probably far more information than he was expecting, but I also figured that it was information worth posting here, on the off chance it might help someone else out.</p> <p>[1]: http://2hrlunch.typepad.com/ “Three martinis and a cloud of dust”</p> <p>It’s actually a really easy trick, though not one built into TypePad. Simply add a `title` declaration to the link itself. For instance, if I wanted the text “Three martinis and a cloud of dust” to appear when someone hovered over a link to Pops’ site, I’d code it like this:</p> <p> <a href="http://2hrlunch.typepad.com/" title="Three martinis and a cloud of dust">Two Hour Lunch</a></p> <p>The end result looks like this (hover over the link to see the title attribute in action):</p> <p>> [Two Hour Lunch][1]</p> <p>That little title attribute comes in wonderfully handy, too, as it can be applied to just about any HTML tag there is.</p> <p>For instance, good HTML coding includes `alt` text for all images, so that if someone has image loading turned off in their browser, or if the image fails to load for any other reason, there will be some descriptive text to tell them what gorgeous vistas they are missing. However, in most browsers the only time that text shows is if the image doesn’t load. Using the `title` attribute in addition to the `alt` attribute when adding images, we can create that same style of comment when someone hovers over the image. For example:</p> <p> <img src="lalala.gif" width="360" height="252" alt="NOTICE: I'm not listening!" title="La la la la la la!" /></p> <p>That way, when displayed in the browser, if the image didn’t load, the text ‘NOTICE: I’m not listening!’ would show instead. In addition, the text ‘La la la la la la!’ will appear if someone lets their cursor pass over the image. Not a necessary thing, but it can be fun for quick, pithy little comments. Here’s the example:</p> <p>> <img alt="NOTICE: I'm not listening!" title="La la la la la la!" src="https://i0.wp.com/www.michaelhanscom.com/eclecticism/graphics/2003/07/graphics/lalalala.gif?resize=360%2C252" data-recalc-dims="1" /></p> <p>Another place I use title tags fairly regularly is when I make changes to a post after it’s first posted. HTML includes two tags (`<ins>` and `<del>`, for insert and delete, respectively) for marking up changes to text. When I go back in to edit a post after it first appears on my site, I use those tags with a title attribute to indicate when the change was made.</p> <p>For example, suppose I posted the following:</p> <p>> Pops is a screaming loony, who shouldn’t be allowed within twenty yards of anyone who isn’t equipped with body armor and a machete.</p> <p>Later, coming to my senses, I could change that like this:</p> <p> Pops is a <del title="7/30/03 10pm: I think I was on drugs when I wrote this.">screaming loony, who shouldn’t be allowed within twenty yards of anyone who isn’t equipped with body armor and a machete</del> <ins title="Here's what I meant to say...">great guy, whose website has pointed me to some fascinating tidbits on a regular basis</ins>.</p> <p>(I hope Pops doesn’t mind the sample text here.) ;)</p> <p>On screen, after the update, the deleted text would display as struck through, and the inserted text would display underlined (standard editing notation), with the comments displaying on a cursor hover, like this:</p> <p>> Pops is a <del title="7/30/03 10pm: I think I was on drugs when I wrote this.">screaming loony, who shouldn’t be allowed within twenty yards of anyone who isn’t equipped with body armor and a machete</del> <ins title="Here's what I meant to say...">great guy, whose website has pointed me to some fascinating tidbits on a regular basis</ins>.</p> <p>So there ya go — more information on the humble little ‘title’ attribute than you probably ever wanted or needed to know. I hope it helps!</p> <p><ins title="Another Example! Neat!">Update:</ins> (See? There’s a title attribute right there!) As of this writing, the title attribute is barely supported in Apple’s new web browser, Safari. Titles on links will appear in the status bar at the bottom of the window if the status bar is turned on, but that’s it. No other title text will be visible. I’m hoping that this is fixed in a later update to Safari, but for the moment, that’s what we have to work with.</p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="byline"><span class="author vcard"><img alt='' src='https://secure.gravatar.com/avatar/9a076924469560ca18a153003fc750ea?s=49&d=mm&r=pg' srcset='https://secure.gravatar.com/avatar/9a076924469560ca18a153003fc750ea?s=98&d=mm&r=pg 2x' class='avatar avatar-49 photo' height='49' width='49' /><span class="screen-reader-text">Author </span> <a class="url fn n" href="https://www.michaelhanscom.com/eclecticism/author/djwudi/">djwudi</a></span></span><span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://www.michaelhanscom.com/eclecticism/2003/07/30/our-friend-the-humble-title-attribute/" rel="bookmark"><time class="entry-date published" datetime="2003-07-30T22:18:47+00:00">July 30, 2003</time><time class="updated" datetime="2016-11-25T14:21:28+00:00">November 25, 2016</time></a></span><span class="tags-links"><span class="screen-reader-text">Tags </span><a href="https://www.michaelhanscom.com/eclecticism/tag/html/" rel="tag">html</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/technology/" rel="tag">Technology</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/title/" rel="tag">title</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/tutorial/" rel="tag">tutorial</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/website/" rel="tag">website</a></span><span class="comments-link"><a href="https://www.michaelhanscom.com/eclecticism/2003/07/30/our-friend-the-humble-title-attribute/#comments">4 Comments<span class="screen-reader-text"> on Our friend, the humble 'title' attribute</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <article id="post-1424" class="post-1424 post type-post status-publish format-standard hentry category-uncategorized tag-design tag-html tag-typepad tag-typepad-beta"> <header class="entry-header"> <h2 class="entry-title"><a href="https://www.michaelhanscom.com/eclecticism/2003/07/13/tweaking-typepad-templates/" rel="bookmark">Tweaking TypePad Templates</a></h2> </header><!-- .entry-header --> <div class="entry-summary"> <p>Up until now, all the various design tweaks I’ve made on this site have been conducted from within the TypePad interface, without my mucking about with any of the code. That’s starting to change, however, as I start to tweak the templates to my liking.</p> </div><!-- .entry-summary --> <div class="entry-content"> <p>Up until now, all the various design tweaks I’ve made on this site have been conducted from within the TypePad interface, without my mucking about with any of the code. That’s starting to change, however, as I start to incorporate some of the conventions I’ve gotten used to with my templates at [The Long Letter][1] into the site here. I’m taking things a little slowly to make sure I don’t break anything (permanently), but work has begun.</p> <p>[1]: http://www.djwudi.com/longletter/ “The Long Letter”</p> <p>Some details and thoughts on my changes follow.</p> <p>(The following notes will be updated as I work my way through the various templates and make my changes.)</p> <p>####All templates####</p> <p>Two minor changes have been made to all the templates.</p> <p>The first is purely cosmetic, in that I’ve adjusted the indenting of all the HTML code so that it’s easier for me to track through. As a side benefit, it should be a bit easier for other people if they go poking around in my source code.</p> <p>Secondly, and important for usability, I’ve noticed that in the default templates, _none_ of the hyperlinks have the `title` attribute set (the text that shows as a tooltip in most browsers, or before the URL in the status bar in Safari). I was somewhat surprised by that, but it’s a fairly simple fix for most of the tags.</p> <p>####Archive Templates (category and monthly)####</p> <p>The default templates for archives display every post in its entirety in reverse chronological order (exactly which posts are displayed depends on the archive type — all posts in a single category for category archives, all posts in a month for monthly archives, etc.). That may work well if you create short posts, or don’t post terribly often, but for me, it’s a nightmare. I tend to babble and create (ridiculously) long posts, and while this site is new, if I do end up adopting TypePad for my permanent home once it’s open for business, then I’m going to want to import all two years plus of my archives. Obviously, with the default templates, this could make for _extremely_ long archive pages.</p> <p>So, to combat that, I set up my archive templates to create essentially a ‘table of contents’ for each archive page. Each archive page now displays the title of each individual post, linked to the post’s individual entry page. After that comes the post excerpt, then a brief listing of the post’s metadata (post time and whether any comments have been added — were I creating a multi-author weblog, post author would be included also).</p> <p>With this setup, while each archive page will still grow over time, it will be _substantially_ smaller than it would be if it were displaying the entirety of each post. By including the post’s excerpt, it allows for a little more contextual indication of what each post is about, so it should still be relatively easy to find individual posts.</p> <p>Currently (as of 8:20pm, July 13th) I’ve only altered the category templates to reflect this scheme, but monthly archives should be updated shortly.</p> <p><ins>7/13 8:54pm: Monthly archive pages have also been updated.</ins></p> <p>####Archive templates (individual)####</p> <p>Not too terribly many changes here, aside from the aforementioned HTML re-formatting and adding `title` attributes to the hyperlinks. I did tweak the post metadata line so that the permalink is attached to the timestamp on the post rather than a single word that just says ‘Permalink’, and then added permalinks to individual comments with the same style. Other than that, it’s primarily the same.</p> <p>I would eventually like to see if the live comment preview I have working on my individual pages on The Long Letter will work in this layout, but I’ll probably save that for another night, just in case it turns into more of a battle than I think it will.</p> <p>####Main index template####</p> <p>Again, like the individual archives, not too many changes — primarily just the formatting of the metadata line, with permalinks moved to the post time. Not that exciting, overall.</p> <p>####Main archives template####</p> <p>The default main archive template is functional, but nothing more than that. A simple list of links to the monthly archives, with links to category archives (if you’re using categories) below that. Not bad, of course, but I wanted to do better.</p> <p>The monthly archive links I’ve kept more or less the same, with the exception that rather than listing out one on top of the other (and using up a large amount of vertical space for very little information), they list out horizontally. Of course, you can’t really tell that now, but when we roll around to August it’ll be more obvious.</p> <p>For the category archives, I’ve included the post titles to the last ten posts in each category beneath the category title. The title itself links to the full category archive page, while the post titles link to their respective individual pages. It’s not _much_ more information that what was available before, but it does give a little bit more, and can make searching for a recent post a little quicker than digging through each archive page if you don’t quite remember what category it got tossed into.</p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="byline"><span class="author vcard"><img alt='' src='https://secure.gravatar.com/avatar/9a076924469560ca18a153003fc750ea?s=49&d=mm&r=pg' srcset='https://secure.gravatar.com/avatar/9a076924469560ca18a153003fc750ea?s=98&d=mm&r=pg 2x' class='avatar avatar-49 photo' height='49' width='49' /><span class="screen-reader-text">Author </span> <a class="url fn n" href="https://www.michaelhanscom.com/eclecticism/author/djwudi/">djwudi</a></span></span><span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://www.michaelhanscom.com/eclecticism/2003/07/13/tweaking-typepad-templates/" rel="bookmark"><time class="entry-date published" datetime="2003-07-13T20:25:22+00:00">July 13, 2003</time><time class="updated" datetime="2016-11-25T14:22:06+00:00">November 25, 2016</time></a></span><span class="tags-links"><span class="screen-reader-text">Tags </span><a href="https://www.michaelhanscom.com/eclecticism/tag/design/" rel="tag">design</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/html/" rel="tag">html</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/typepad/" rel="tag">typepad</a>, <a href="https://www.michaelhanscom.com/eclecticism/tag/typepad-beta/" rel="tag">typepad beta</a></span><span class="comments-link"><a href="https://www.michaelhanscom.com/eclecticism/2003/07/13/tweaking-typepad-templates/#comments">10 Comments<span class="screen-reader-text"> on Tweaking TypePad Templates</span></a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> </main><!-- .site-main --> </div><!-- .content-area --> <aside id="secondary" class="sidebar widget-area" role="complementary"> <section id="search-3" class="widget widget_search"> <form role="search" method="get" class="search-form" action="https://www.michaelhanscom.com/eclecticism/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" /> </label> <button type="submit" class="search-submit"><span class="screen-reader-text">Search</span></button> </form> </section><section id="archives-4" class="widget widget_archive"><h2 class="widget-title">Archives</h2> <label class="screen-reader-text" for="archives-dropdown-4">Archives</label> <select id="archives-dropdown-4" name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value="">Select Month</option> <option value='https://www.michaelhanscom.com/eclecticism/2016/12/'> December 2016 </option> <option value='https://www.michaelhanscom.com/eclecticism/2016/11/'> November 2016 </option> <option value='https://www.michaelhanscom.com/eclecticism/2016/03/'> March 2016 </option> <option value='https://www.michaelhanscom.com/eclecticism/2015/12/'> December 2015 </option> <option value='https://www.michaelhanscom.com/eclecticism/2015/11/'> November 2015 </option> <option value='https://www.michaelhanscom.com/eclecticism/2015/07/'> July 2015 </option> <option value='https://www.michaelhanscom.com/eclecticism/2015/06/'> June 2015 </option> <option value='https://www.michaelhanscom.com/eclecticism/2015/04/'> April 2015 </option> <option value='https://www.michaelhanscom.com/eclecticism/2015/03/'> March 2015 </option> <option value='https://www.michaelhanscom.com/eclecticism/2015/02/'> February 2015 </option> <option value='https://www.michaelhanscom.com/eclecticism/2015/01/'> January 2015 </option> <option value='https://www.michaelhanscom.com/eclecticism/2014/12/'> December 2014 </option> <option value='https://www.michaelhanscom.com/eclecticism/2014/11/'> November 2014 </option> <option value='https://www.michaelhanscom.com/eclecticism/2013/10/'> October 2013 </option> <option value='https://www.michaelhanscom.com/eclecticism/2013/09/'> September 2013 </option> <option value='https://www.michaelhanscom.com/eclecticism/2013/07/'> July 2013 </option> <option value='https://www.michaelhanscom.com/eclecticism/2013/06/'> June 2013 </option> <option value='https://www.michaelhanscom.com/eclecticism/2013/02/'> February 2013 </option> <option value='https://www.michaelhanscom.com/eclecticism/2013/01/'> January 2013 </option> <option value='https://www.michaelhanscom.com/eclecticism/2012/12/'> December 2012 </option> <option value='https://www.michaelhanscom.com/eclecticism/2012/09/'> September 2012 </option> <option value='https://www.michaelhanscom.com/eclecticism/2012/07/'> July 2012 </option> <option value='https://www.michaelhanscom.com/eclecticism/2012/06/'> June 2012 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/12/'> December 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/11/'> November 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/10/'> October 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/09/'> September 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/07/'> July 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/06/'> June 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/05/'> May 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/04/'> April 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/03/'> March 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/02/'> February 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2011/01/'> January 2011 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/12/'> December 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/11/'> November 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/10/'> October 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/09/'> September 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/08/'> August 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/07/'> July 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/06/'> June 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/05/'> May 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/04/'> April 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/03/'> March 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/02/'> February 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2010/01/'> January 2010 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/12/'> December 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/11/'> November 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/10/'> October 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/09/'> September 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/08/'> August 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/07/'> July 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/06/'> June 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/05/'> May 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/04/'> April 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/03/'> March 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/02/'> February 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2009/01/'> January 2009 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/12/'> December 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/11/'> November 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/10/'> October 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/09/'> September 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/08/'> August 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/07/'> July 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/06/'> June 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/05/'> May 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/04/'> April 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/03/'> March 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/02/'> February 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2008/01/'> January 2008 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/12/'> December 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/11/'> November 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/10/'> October 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/09/'> September 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/08/'> August 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/07/'> July 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/06/'> June 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/05/'> May 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/04/'> April 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/03/'> March 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/02/'> February 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2007/01/'> January 2007 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/12/'> December 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/11/'> November 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/10/'> October 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/09/'> September 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/08/'> August 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/07/'> July 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/06/'> June 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/05/'> May 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/04/'> April 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/03/'> March 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/02/'> February 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2006/01/'> January 2006 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/12/'> December 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/11/'> November 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/10/'> October 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/09/'> September 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/08/'> August 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/07/'> July 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/06/'> June 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/05/'> May 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/04/'> April 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/03/'> March 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/02/'> February 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2005/01/'> January 2005 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/12/'> December 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/11/'> November 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/10/'> October 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/09/'> September 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/08/'> August 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/07/'> July 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/06/'> June 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/05/'> May 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/04/'> April 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/03/'> March 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/02/'> February 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2004/01/'> January 2004 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/12/'> December 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/11/'> November 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/10/'> October 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/09/'> September 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/08/'> August 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/07/'> July 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/06/'> June 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/05/'> May 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/04/'> April 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/03/'> March 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/02/'> February 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2003/01/'> January 2003 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/12/'> December 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/11/'> November 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/10/'> October 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/09/'> September 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/08/'> August 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/07/'> July 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/06/'> June 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/05/'> May 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/04/'> April 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/03/'> March 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/02/'> February 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2002/01/'> January 2002 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/12/'> December 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/11/'> November 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/10/'> October 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/09/'> September 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/08/'> August 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/07/'> July 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/06/'> June 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/05/'> May 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/04/'> April 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/03/'> March 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/02/'> February 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2001/01/'> January 2001 </option> <option value='https://www.michaelhanscom.com/eclecticism/2000/12/'> December 2000 </option> <option value='https://www.michaelhanscom.com/eclecticism/2000/11/'> November 2000 </option> <option value='https://www.michaelhanscom.com/eclecticism/1999/02/'> February 1999 </option> <option value='https://www.michaelhanscom.com/eclecticism/1999/01/'> January 1999 </option> <option value='https://www.michaelhanscom.com/eclecticism/1998/12/'> December 1998 </option> <option value='https://www.michaelhanscom.com/eclecticism/1998/08/'> August 1998 </option> <option value='https://www.michaelhanscom.com/eclecticism/1998/07/'> July 1998 </option> <option value='https://www.michaelhanscom.com/eclecticism/1998/06/'> June 1998 </option> <option value='https://www.michaelhanscom.com/eclecticism/1997/02/'> February 1997 </option> <option value='https://www.michaelhanscom.com/eclecticism/1997/01/'> January 1997 </option> <option value='https://www.michaelhanscom.com/eclecticism/1996/05/'> May 1996 </option> <option value='https://www.michaelhanscom.com/eclecticism/1996/04/'> April 1996 </option> <option value='https://www.michaelhanscom.com/eclecticism/1996/01/'> January 1996 </option> <option value='https://www.michaelhanscom.com/eclecticism/1995/12/'> December 1995 </option> <option value='https://www.michaelhanscom.com/eclecticism/1995/08/'> August 1995 </option> <option value='https://www.michaelhanscom.com/eclecticism/1995/04/'> April 1995 </option> <option value='https://www.michaelhanscom.com/eclecticism/1995/03/'> March 1995 </option> <option value='https://www.michaelhanscom.com/eclecticism/1995/02/'> February 1995 </option> <option value='https://www.michaelhanscom.com/eclecticism/1995/01/'> January 1995 </option> <option value='https://www.michaelhanscom.com/eclecticism/1994/12/'> December 1994 </option> <option value='https://www.michaelhanscom.com/eclecticism/1994/02/'> February 1994 </option> <option value='https://www.michaelhanscom.com/eclecticism/1994/01/'> January 1994 </option> <option value='https://www.michaelhanscom.com/eclecticism/1993/12/'> December 1993 </option> <option value='https://www.michaelhanscom.com/eclecticism/1991/11/'> November 1991 </option> <option value='https://www.michaelhanscom.com/eclecticism/1991/10/'> October 1991 </option> <option value='https://www.michaelhanscom.com/eclecticism/1990/01/'> January 1990 </option> </select> </section><section id="twitter_timeline-4" class="widget widget_twitter_timeline"><h2 class="widget-title">On Twitter…</h2><a class="twitter-timeline" data-height="1000" data-theme="light" data-link-color="#f96e5b" data-border-color="#e8e8e8" data-lang="EN" data-chrome="noheader nofooter" href="https://twitter.com/djwudi">My Tweets</a></section><section id="wpcom_social_media_icons_widget-3" class="widget widget_wpcom_social_media_icons_widget"><h2 class="widget-title">Elsewhere</h2><ul><li><a href="https://www.facebook.com/michael.hanscom/" class="genericon genericon-facebook" target="_blank"><span class="screen-reader-text">View michael.hanscom’s profile on Facebook</span></a></li><li><a href="https://twitter.com/djwudi/" class="genericon genericon-twitter" target="_blank"><span class="screen-reader-text">View djwudi’s profile on Twitter</span></a></li><li><a href="https://instagram.com/djwudi/" class="genericon genericon-instagram" target="_blank"><span class="screen-reader-text">View djwudi’s profile on Instagram</span></a></li><li><a href="https://www.linkedin.com/in/michaelhanscom/" class="genericon genericon-linkedin" target="_blank"><span class="screen-reader-text">View michaelhanscom’s profile on LinkedIn</span></a></li><li><a href="https://www.youtube.com/user/djwudi/" class="genericon genericon-youtube" target="_blank"><span class="screen-reader-text">View djwudi’s profile on YouTube</span></a></li><li><a href="https://vimeo.com/djwudi/" class="genericon genericon-vimeo" target="_blank"><span class="screen-reader-text">View djwudi’s profile on Vimeo</span></a></li><li><a href="https://plus.google.com/u/0/+michael.hanscom/" class="genericon genericon-googleplus" target="_blank"><span class="screen-reader-text">View michael.hanscom’s profile on Google+</span></a></li></ul></section> </aside><!-- .sidebar .widget-area --> </div><!-- .site-content --> <footer id="colophon" class="site-footer" role="contentinfo"> <nav class="main-navigation" role="navigation" aria-label="Footer Primary Menu"> <div class="menu-main-menu-container"><ul id="menu-main-menu-1" class="primary-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9883"><a href="https://www.michaelhanscom.com/eclecticism/about/">About the Author</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11650"><a href="https://www.michaelhanscom.com/eclecticism/worth-reading/">Worth Reading</a></li> </ul></div> </nav><!-- .main-navigation --> <div class="site-info"> <span class="site-title"><a href="https://www.michaelhanscom.com/eclecticism/" rel="home">Eclecticism</a></span> <a href="https://wordpress.org/">Proudly powered by WordPress</a> </div><!-- .site-info --> </footer><!-- .site-footer --> </div><!-- .site-inner --> </div><!-- .site --> <div style="display:none"> <div class="grofile-hash-map-9a076924469560ca18a153003fc750ea"> </div> </div> <script type='text/javascript' src='https://www.michaelhanscom.com/eclecticism/wp-content/plugins/jetpack/modules/photon/photon.js?ver=20130122'></script> <script type='text/javascript' src='https://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201649'></script> <script type='text/javascript' src='https://secure.gravatar.com/js/gprofiles.js?ver=2016Decaa'></script> <script type='text/javascript'> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script type='text/javascript' src='https://www.michaelhanscom.com/eclecticism/wp-content/plugins/jetpack/modules/wpgroho.js?ver=4.7'></script> <script type='text/javascript' src='https://www.michaelhanscom.com/eclecticism/wp-content/themes/twentysixteen/js/skip-link-focus-fix.js?ver=20160816'></script> <script type='text/javascript'> /* <![CDATA[ */ var screenReaderText = {"expand":"expand child menu","collapse":"collapse child menu"}; /* ]]> */ </script> <script type='text/javascript' src='https://www.michaelhanscom.com/eclecticism/wp-content/themes/twentysixteen/js/functions.js?ver=20160816'></script> <script type='text/javascript' src='https://www.michaelhanscom.com/eclecticism/wp-content/plugins/jetpack/_inc/twitter-timeline.js?ver=4.0.0'></script> <script type='text/javascript' src='https://www.michaelhanscom.com/eclecticism/wp-includes/js/wp-embed.min.js?ver=4.7'></script> <script type='text/javascript' src='https://stats.wp.com/e-201649.js' async defer></script> <script type='text/javascript'> _stq = window._stq || []; _stq.push([ 'view', {v:'ext',j:'1:4.4.2',blog:'20976999',post:'0',tz:'-8',srv:'www.michaelhanscom.com'} ]); _stq.push([ 'clickTrackerInit', '20976999', '0' ]); </script> </body> </html>