Friday, July 4, 2008

Excuse Our Mess

I've been editing this blog's template today so things have been broken for a while. I wanted to fix some things that have been annoying me about Blogger. Since some of the posts can be quite lengthy, clicking on the labels generates huge pages that are too difficult to read. You'll notice many posts now will have a "... read more »" link, with only one or two paragraphs shown. Click the link to read the full post.

This is based on the Blogger hack for expandable posts, but that one lies by placing the "read more" on every post whether it is expandable or not. It seems to me that lying to your readers is generally not a good idea, such as telling them there's more to read when there isn't. I don't understand why the correct functionality isn't simply included in the Blogger platform, as I spent the day reading up on javascript programming and templates to get this to work right. This fix works by checking each post for a "fullpost" span and then only showing the link if one exists.

If you want to do this yourself, first implement the instructions on the Blogger Help in your template. When you're done, go to where you put the "Read More" link - we are going to replace it with another class and some code, like so:


    <span class='readmore' style='float:right'>
( <a expr:href='data:post.url'>read more</a> )
</span>
<script type='text/javascript'>
var body=document.getElementById("<data:post.url/>");
var spans=body.getElementsByTagName('span');
for (var i=0; i<spans.length; i++) {
if (spans[i].className == "fullpost") break;
if (spans[i].className == "readmore")
spans[i].style.display='none';
}
</script>


For the script to work, we just need to uniquely tag each post body with its url. Find the 'post-body' div, and add the post.url id to the end, like so:


   <div class='post-body' expr:id='data:post.url'>


That's all there is to it. I think Blogger should be ashamed for leaving this as an "exercise for the reader". Your readers that are looking for help are typically bloggers, not programmers, and it's only one extra step from those described in the help page to tag the bodies.

On to the other blog changes, which include new gallery quick links on the left, so people looking for a specific kit don't need to dig around. Labels and archives have moved to an additional column for site navigation. I've been testing the layout with FF3 and IE7, which I've found measure things quite differently but seems to be working now on both. *headache* If you notice any layout issues with your preferred browser, please let me know.

Finally, I know there are a lot of references to this blog from images.google.com which has crawled it recently and it's awful. Practically every image I've posted is linked to every keyword (even from RSS feed titles) having nothing to do with the image itself. My apologies if you've stumbled on this blog from there and can't find what you're looking for.

No comments:

Gallery Links

Pinky Rin Archer Schpeltor Mikuru Asahina Angel Rebirth Moyashimon Satsuki Ikaruga Yuki Nagato Pinky:St Saber Mina Tsukishiro Haruhi Suzumiya

About This Blog

My photo
Sunnyvale, California, United States

A blog of my hobbies and a place to show progress and finished models. Galleries are embedded as slideshows to reduce page load time, but you can open any album by clicking on its label.

dannychoo.com

figure.fm

Akiba-Station

Through the Looking Glass