This article was translated from this one.

With new blogger template, you can do a lot of things, including display your post with thumbnails, it's better than traditional blog layout if you have lot of photo in your posts.

Next is a step-by-step tutorial for peoples that are not quite familiar with blogger template "programming". The basic ideas of this method is quite simple, if you know something about template codes, you may quickly understand it. And it's easy to extend this method to suit your needs if you have some css / javascript skills.

First your have to understand that as a Template the blogger template is very powerful than other templates. But it's not powerful enough to create thumbnails for you, so you have to make them yourself. Or you can use one of images in your post as thumbnail image.

After you created the thumb image, upload it to a place, you can upload it in the post, you also can put it somewhere else. All we need here is its URL.

Now edit your post, if you don't see a link input box under the title box, you have to go to blogger setting to make it there. Here is an article in blogger help about how to open the link field. copy your thumbnail image url into the link box. Then choose a label name to identify posts that you want to display as thumbnails. for example you choose "Photo" as the label. Now add the label "Photo" to the post, save it.

OK, the data is ready, next we edit the template to make it work. Go to template setting, open HTML edit box.

Search for the next line:
<b:widget id='Blog1' locked='true' title='Blog posts' type='Blog'/>

When you find it, replace it with next code:

<b:widget id='Blog1' locked='true' title='Blog posts' 
    type='Blog'>
  <b:includable id='main' var='thisdata'>
    <b:if cond='data:blog.pageType != "item"'>
      <div style='margin:0px;padding:3px;'>
      <center>
        <b:loop values='data:posts' var='post'>
          <b:loop values='data:post.labels' var='lb'>
            <b:if cond='data:lb.name == "Photo"'>
              <a expr:href='data:post.url'>
                <img expr:alt='data:post.timestamp' 
                  expr:src='data:post.link'
                  expr:title='data:post.title' 
                  height='100'/>
              </a>
            </b:if>
          </b:loop>
        </b:loop>
        </center>
      </div>
    </b:if>
  </b:includable>
</b:widget>

then find this code:

     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>

Delete bolded codes.

Now we are done.
Save the template and check the results.

For advanced readers, here's some explain of the template code above:

first I loop for every post
in one post, I loop for every label the post has
if label.name == "Photo"
draw the img, use post.link as img.src, use post.title as img.title, use the post.url as the link on img.

The basic is that simple.