<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.

A little research showed that there were two main sites offering tools to enable this; AddThis and ShareThis. Both have JavaScript that can be added to a page to include a sharing button, both allow some customisation and both can provide user stats. In the end I went with ShareThis for one simple reason, this site was up.

The original plan was to test one tool on each site, leave them running for a month or so and compare results. I had registered with both sites earlier in the week as I had wanted to look at the JavaScript and the options available. When I went to AddThis there was no indication on the home page that they were performing maintenance, nothing in the blog and they hadn't emailed me. You just get a simple unstyled page telling you to come back later when you go to your account.

To add the button was easy

• Register on ShareThis
• Get button code
• Create a Module template called ShareThis
• Copy code into template and save

• Go to the Entry template and include the ShareThis module where you need it

  <$mt:include module="ShareThis"$>

• Do the same with the Entry Summary template

• Rebuild site

The code below is a replacement for the recent entries widget code, Included on the front page it will show the previous 10 entries following the last entry on your index page. While on your archive pages it functions as a 'normal' recent entry widget.

<mt:If name="main_index">
<mt:SetVarBlock name="entryOffset"><mt:EntriesCount></mt:SetVarBlock>
<mt:else>
<mt:SetVarBlock name="entryOffset">auto</mt:SetVarBlock>
</mt:If>
<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="10" offset="$entryOffset">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header">Recent Entries</h3>
    <div class="widget-content">
        <ul class="widget-list">
        </mt:EntriesHeader>
            <li class="widget-list-item">
                <h4><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></h4>
                <p><mt:EntryBody words="25" convert_breaks="0" />...</p>
            </li>
        <mt:EntriesFooter>
        </ul>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>

As Anil's post shows, it is very easy for Movable Type to generate any document type that you know the specification, so lets give it a go with another ubiquitous file format; Rich Text Format, the full specification can be downloaded from Microsoft

Below is a simple template which outputs a Rich Text Formatted file showing the last 5 entries from your blog.

{\rtf
{\b <MTBlogName>}
\par
<MTEntries lastn="1">
Author: <MTEntryAuthorNickname encode_xml="1">
\par
Modified: <MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ">
\par
</MTEntries>
\par
\par    
<MTEntries lastn="5">
{\b <MTEntryTitle>}
\par
<MTEntryBody  convert_breaks="0" remove_html="1">
\par
\par
</MTEntries>
}

you need to create a new custom index template and paste the above code in. Set the output file to recent.rtf. When this template is published it generates a rich text format file at your blog root that contains the last 5 entries in your blog.

This technique can be used for a number of different formats; OOXML, LaTex or OpenDocument for example. It can also be expanded to include a list of recent comments or limit the report to specific tags, categories or keywords.

If you want people to be able to vote, you need to add a button to your page, Yahoo has a list of button code, but to make the system really fly you can add extra post information that will get submitted. This is easy to do in Movable Type, first we need to create a new module template called Yahoo Buzz and past the following code into it.

<script type="text/javascript">
yahooBuzzArticleHeadline = "<mt:EntryTitle>";
yahooBuzzArticleSummary = "<mt:EntryBody words="15">";
yahooBuzzArticleCategory = "<mt:EntryCategory>";
<mt:EntryIfTagged tag="@text">
    yahooBuzzArticleType = "text";
</mt:EntryIfTagged>
<mt:EntryIfTagged tag="@image">
    yahooBuzzArticleType = "image";
</mt:EntryIfTagged>
<mt:EntryIfTagged tag="@video">
    yahooBuzzArticleType = "video";
</mt:EntryIfTagged>
    yahooBuzzArticleId = window.location.href;
</script>

<script type="text/javascript"
    src="http://d.yimg.com/ds/badge2.js"
    badgetype="large-votes">      
</script>

save this and then open the entry template, scroll down until you find

 </mt:EntryIfTagged>

and after that add

 <mt:Include module="Yahoo Buzz">

rebuild your site and each entry should now have a Buzz button at the end, just before any comments.

You set the category as you would normally do in Movable Type and you set the Article Type through the use of private tags (@text, @image, @video).

This is a first draft template and a little rough as stories can only have one category. Ways to improve / change this would be to have custom fields to store Category and Article Type.

Got an error: Error opening file '/mt-config.cgi': No such file or directory

This was easily solved by editing lib/bootstrap.pm

sub BEGIN {
    $ENV{'MT_HOME'} = '/home/username/public_html/mt';
    my ($dir, $orig_dir);
    require File::Spec;
    if (!($dir = $ENV{MT_HOME})) {

Line 2 was added with the full path to Movable Type and the system started working

Recently I went to configure Microsoft Live Writer and during the configuration process I got the error again. A quick check showed that the web site was functioning correctly, so why not Live Writer?

The answer, it turns out, is very simple. Live Writer communicates with Movable Type through mt-xmlrpc.cgi, this does not use bootstrap.pm so the code needs to added to mt-xmlrpc.cgi as well

sub BEGIN {
    $ENV{'MT_HOME'} = '/home/username/public_html/mt';
    require File::Spec;
    if (!($dir = $ENV{MT_HOME})) {

Once this has been done the Live Writer is able to link up and you can post to your blog

1. Go to to http://www.flickr.com/badge.gne (you will need to be signed into flickr).
2. Follow the on screen instructions and at the end you will be given a snippet of code to paste into a page below is some sample code for the flash based badge.

<!-- Start of Flickr Badge -->
<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner { color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = 'ffffff';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=????????zg_tag_mode=any';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"><\/iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge.gne"   style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">What is this?<\/a><\/div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
<script type="text/javascript">zg_insert_badge();</script>
<div id="zg_whatdiv">This is a Flickr badge showing public items from <a href="http://www.flickr.com/photos/????????">Your Name Here</a>. Make your own badge <a href="http://www.flickr.com/badge.gne">here</a>.</div>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>
<!-- End of Flickr Badge -->

3. Log into Vox, at the bottom of your sidebar you should see a link called Dress up your sidebar.
4. Click on the link.
5. Give the widget a Name, e,g. My Pictures
6. Paste the code into the Widget Code box and click OK.

.zg_div {margin: auto; width:117px;}

Now we need to get some height on the div that contains the flickr badge

<div class="zg_div" height="300"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>  

Now your Flickr badge should be sitting nicely in the middle of the sidebar full height. Take a look at my Vox page to see the final results.

site:http://forums.sixapart.com <search>

site:http://forums.sixapart.com 403