Detective Conan

Notice the layout of posts with thumbnails when you click on my homepage URL? Nice, isn't it? This layout of post summaries with thumbnails is achieved automatically with some changes of the html code of the blogger template. For those posts without picture, no thumbnail will be shown and the post summary will automatically shift to the left hand side of the page.

Here's how it is done.

Log in to your blogger account. Click on the Layout tab, followed by Edit HTML tab and then click on the square beside Expand Widget Templates.

Search for this code:

</head>

and replace it with :

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 240;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js'
type='text/javascript'/>
</head>

Next, look for this code:

<data:post.body/>

And copy the following code in its place:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<div expr:id='&quot;summary&quot; + data:post.id'>

<data:post.body/>

</div>

<script type='text/javascript'>

createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<div style='clear: both;'/>

<span style='padding-top:5px;;float:right;text-align:right;'>
<a expr:href='data:post.url'
rel='bookmark'><b>Read more >></b></a></span>

</b:if>

Save it and you will have the post summaries with thumbnails appear automatically in your homepage,label pages, archive and search results.

You can also make further customization to the first part of the code.

1. thumbnail_mode var = “float”; - Thumbnail will appear above post summary
2. summary_noimg = 240; - No of characters to be shown in summary when there is no picture.
3. summary_img = 150;  - No of characters to be shown in the summaries with pictures
4. img_thumb_height = 100; - Post thumbnail height adjustment.
5. img_thumb_width = 100; - Post with thumbnail width adjustment.