のコードを
Cara Membuat Template Blogger Jadi Responsive dan Lebih SEO - Komunikasi Praktis
https://www.komunikasipraktis.com/2017/11/cara-membuat-template-blog-responsive-seo.html
ベースにアップデートさせたものになります
まずは画像が無い時に表示させるNo Imageの画像を用意します
YouTubeのサムネ限界480x360で作成(前に書いた通り)
良いフォントが見付かったのでとりあえず白黒でwebpでサイズを抑えてあります
コード
<!-- Auto Read More start -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<div class='Image thumb'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 999, )'/></div></a>
<b:else/>
<a expr:href='data:post.url'>
<div class='Image thumb'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/a/AVvXsEiQ1RbOXykMbz1Li5TDFYrdD-5ab8T2mnTeGOp8sn1fRkLWdq2bIZHIPV6d_SfpZtpRstzKImwsh_A41QhCKdVOYRpFOev6jb78S8GeT09lBXzQn4Z4KYUud2koWdNB8PV5YunwZu5a92fQdnAqmZ8BrYXSH7hrLOILPcsIPB7yHrh4Eq--JyGZj8Ae?name=no-image.webp'/></div></a>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<!-- Auto Read More end -->
拡張子のパラメーターはおまじない的に付けてみました






0 comments:
スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。
注: コメントを投稿できるのは、このブログのメンバーだけです。