WIP

Just been farting around with my template again over at my TaoTest blog. After seeing the cute and excellent site design over at OrderedList I decided to take mine to a "low tech, single post" level.

In order to do this effectively I would have to limit the size of the inital view of the latest posting to a few lines and then introduce a "Read More" item at the bottom for people to load the full thing up.

I did a search for Blogger Hacks and found this posting by Nerdier than thou! on how to create such a thing.

The only issue I can see with this is that you have to insert some CSS code into your post to get it to work correctly - which I don't want to do. I just want to make a posting and have the first portion of it displayed automatically.

So… Off to JavaScript land I went and came up with something that actually works!

Here's the code bit i stuck in my template:

<mainorarchivepage>

<script type="text/javascript">

var str_length=400;

str = '<$BlogItemBody$>';
last_dot = str.indexOf('.',str_length);
document.write(str.substring(0,last_dot + 1));
</script>

<br><a href="<$BlogItemPermalinkURL$>">Read more!</a>
</mainorarchivepage>

<itempage>
<$BlogItemBody$>
</itempage>

The blog post is written into the variable str and then the post is scanned for the next full stop after the number of characters specified in the str_length variable. To show more content, increase the value of str_length.

The post is then re-written using the document.write command as far as that full stop character to allow for proper sentences to be displayed rather than being cut off in mid flow.

The JavaScript is between the <mainorarchivepage> tags to allow it to be shown on the front page.

A normal <$BlogItemBody$> tag is shown between the <itempage> tags to allow it to be displayed in full when you click the "Read More!" link.

This is still a Work In Progress - so please don't take it as gospel - but I think it works ok. Not sure how it will work with pictures though.

Rather than messing with CSS code, I was thinking of putting some keywords into the text such as !start! and !end! to signify the start and end of the posting you want to be displayed before the "Read More!" link. That should be pretty easy for JavaScript to sense and strip them out, and alot easier than going into the HTML code when posting.