Bloggerの非レスポンシブ公式テンプレート等で投稿を要約とサムネイル表示にする

Simple, Picture Window, Awesome Inc., Watermark, Ethereal, Travel 等が対象
要約表示にして、自動で サムネイル と 続きを読む にする方法です。

Blogger Buster のコードがJavaScriptも使わなくて良いので、こちらをアップデートさせたものになります

Blogger Buster: Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!
http://www.bloggerbuster.com/2011/03/easy-post-summaries-and-thumbnails-for.html
httpなのでリンクは省略

まずはテンプレートから <data:post.body/> を検索
2箇所ありますが、下の <data:post.body/> を以下のコードに置換します

                  <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType in {&quot;index&quot;,&quot;archive&quot;}'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='resizeImage(data:post.firstImageUrl, 1600, )'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

キモはここですね
<img expr:src='resizeImage(data:post.firstImageUrl, 1600, )'/>
data:post.thumbnailUrl ではYouTubeの画像は小さいのしか取ってこれないので、data:post.firstImageUrl にして、リサイズの値を決めて72ピクセル以上のサムネイルを利用できる様にします

関連:

• Bloggerのぼやけたサムネイルを修正できるかもしれない方法

とは言っても、YouTubeのサムネイルは最大 480x360 のサムネイルしか利用出来ませんが
私も検証してみましたが、ここにも書いてある通り
data:posts[i].firstImageUrl (Blog) - Blogger Data Documentation - Blogger Code PE
https://bloggercode-blogconnexion.blogspot.com/1973/09/Blog-data-posts-firstImageUrl.html

あとはCSSを追加して

/* サムネイル */
.thumb img {
  float: none;
  margin: 0 10px 10px 0;
width:480px;height:auto;
}

float を left にして width を 240px とかにしても良いですね
サンプルはこんな感じになります > https://mbt-thumb.blogspot.com/