Creating a Clickable Header in Movable Type

A question that comes up every so often on the Movable Type message boards is how to create a clickable banner that links back to the blog homepage. The answer depends very much on how the banner has been added to the page. One way is an img link in the HTML, this can be wrapped in an anchor tag the same way as any other link. Below is a sample Banner Header template that does just that.

<div id="header">
<div id="header-inner">
<div id="header-content">
<mt:Ignore><!-- Use h1 and h2 html tags on the main index of the blog as the title, use divs on all other pages where there are page titles. --></mt:Ignore>
<a href="<$mt:BlogURL$>" accesskey="1"><img src="<$mt:BlogURL$>header.jpg" alt="<$mt:BlogName encode_html='1'" height="150" width="900"/></a>
<mt:If name="main_index">
<h1 id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></h1>
<h2 id="header-description"><$mt:BlogDescription$></h2>
<mt:Else>
<div id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></div>
<div id="header-description"><$mt:BlogDescription$></div>
</mt:If>
</div>
</div>
</div>

A lot of the default templates that come with Movable Type use CSS to place a header image on the page. If this is the case you will need to use a little piece of JavaScript to achive the same effect. Below is a modified Banner Header template.

 <div id="header" onClick="window.location='<$mt:BlogURL$>'">
 <div id="header-inner">
 <div id="header-content">
 <mt:Ignore><!-- Use h1 and h2 html tags on the main index of the blog as the title, use divs on all other pages where there are page titles. --></mt:Ignore>
 <mt:If name="main_index">
 <h1 id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></h1>
 <h2 id="header-description"><$mt:BlogDescription$></h2>
 <mt:Else>
 <div id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></div>
 <div id="header-description"><$mt:BlogDescription$></div>
 </mt:If>
 </div>
 </div>
 </div>

All we have done is add an onClick event to the header. Users that click in the header will then trigger the JavaScript which mimics clicking on a link.