Blogspot 文章間格排版 (網友提議試制版本)

我一直有改造"文章排版"的貼文, 而早日有網友出一種我沒有想過的排版方式,
有趣, 用了大半天的時間, 得出這個有點像樣子的結果. "文章間格排版"

要求是一行 3 格, code 方面需要修改後台 HTML (原Blogspot範本)

    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == "false"'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class="date-outer"&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
<b:if cond='data:blog.pageType == "item"'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class="date-posts"&gt;
        </b:if>
        <!-- <div class='post-outer'> -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
<!-- 更換的原本句子 <b:include data='post' name='post'/> -->
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<div style='float:left; padding:2px 2px 2px 2px; margin:2px; width:165px; height:300px; overflow-x:hidden; overflow-y:auto; border-style:groove;'>
<a expr:href='data:post.url'>
<script>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s140-c");// 設定圖片大小, e.g. S350
     document.write("<img src='"+ pic +"' style='display:block; margin:auto;'/>"); 
    })()
</script>
</a>
  <div class='post-title' style='margin-top:2px;'><a expr:href='data:post.url'><b><data:post.title/></b></a></div>
  <div style='margin-top:4px;'>  <data:post.snippet/></div>
<div class='jump-link' style='margin-top:2px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div></div>
</b:if></b:if>
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->
        <b:if cond='data:blog.pageType == "static_page"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <!-- </div> -->
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop><div style='clear:left;'/>

修改擇要...
原範本中由 <!-- posts --> 開始, 直到</b:loop>結束, 有多處修改.

第 02-04 行, "日期"顯示加入 if 語法, 它只會在單頁時列出
第 06 行, post-outer 會影響排版, 所以用 Remark 標記, 不以執行. 或刪除也可以
第 33 行, post-outer 的結束 </div>, 用 Remark 標記, 不以執行. 或刪除也可以
第 07-31 行, "間格排版"的主要語法
第 15 行, width:165px; height:300px; 因應不同的範本, 得以自行修正
第 20 行, 設定圖片大小, 同樣是因應不同的範本, 得以自行修正
第 35 行, 在原本</b:loop>之後加入<div style='clear:left;'/>, 清除"間格排版"格式