Hiển thị bài viết trong blogspot dạng thumbnail (Trích ngang có hình ảnh)

Các bước thực thiện:
1 Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn Chỉnh sửa HTML (Edit HTML) - Tiếp tục
Để hiển thị bài viết theo kiểu trích ngang bạn phải thêm class post-thumbnail để hiển thị các hình ảnh
Có các kiểu hiển thị hình ảnh như sau: 

.Hình ảnh hiển thị bên trái:

Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin>:

.post-thumbnail{float:left;margin-right:20px}

. Hình ảnh hiển thị bên phải:
Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin>:

.post-thumbnail{float:right;margin-left:20px}

4. Các kiểu hiển thị bài biết trong blogspot:

.Hiển thị trích ngang và hình ảnh cho bài viết

          Thay thế <data:post.body/> bằng đoạn mã dưới đây:
--------------------------------------------------------

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <div>    <b:if cond='data:post.thumbnailUrl'> <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>    </b:if>    <data:post.snippet/>   </div>   <div class='jump-link'>    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>   </div>  <b:else/>   <data:post.body/>  </b:if> <b:else/>  <data:post.body/> </b:if>

   .Hiển thị trích ngang và hình ảnh mặc định cho bài viết không có ảnh

   Thay thế <data:post.body/> bằng đoạn mã dưới đây:

   <b:if cond='data:blog.pageType != &quot;item&quot;'>  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <b:if cond='data:blog.url == data:blog.homepageUrl'>    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>     <data:post.body/>      <b:if cond='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/>     <div>      <b:if cond='data:post.thumbnailUrl'>       <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>      </b:if>      <data:post.snippet/>     </div>     <div class='jump-link'>      <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>     </div>    </b:if>   <b:else/>    <div>     <b:if cond='data:post.thumbnailUrl'>      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>     </b:if>     <data:post.snippet/>    </div>    <div class='jump-link'>     <a expr:href='data:post.url' 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>

    .Không hiển thị trích ngang với bài viết mới nhất

     Thay thế <data:post.body/> bằng đoạn mã dưới đây:

 <b:if cond='data:blog.pageType != &quot;item&quot;'>  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <b:if cond='data:blog.url == data:blog.homepageUrl'>    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>     <data:post.body/>      <b:if cond='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/>     <div>      <b:if cond='data:post.thumbnailUrl'>       <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>      </b:if>      <data:post.snippet/>     </div>     <div class='jump-link'>      <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>     </div>    </b:if>   <b:else/>    <div>     <b:if cond='data:post.thumbnailUrl'>      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>     </b:if>     <data:post.snippet/>    </div>    <div class='jump-link'>     <a expr:href='data:post.url' 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>

    
    Hhiển thị ảnh mặc định cho bài viết không có ảnh,

    không hiển thị trích ngang với bài viết mới nhất:

    Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <b:if cond='data:blog.url == data:blog.homepageUrl'>    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>     <data:post.body/>      <b:if cond='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/>     <div>      <b:if cond='data:post.thumbnailUrl'>       <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>      <b:else/>       <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_QO9CamXng4xptLYsazMLkvVIGcnVk4i_BOIEUCljHDL2nVZU7ZyEk0-4HFVDvJng4jjoJ7_LFyhnCilMQRcVqSRWyBYLwLZv3aoLKBswu84VzU3tmwcb1Y5CS_3NaSnzZkA4BBJ-eMm/' width='72px' height='72px'/>      </b:if>      <data:post.snippet/>     </div>     <div class='jump-link'>      <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>     </div>    </b:if>   <b:else/>    <div>     <b:if cond='data:post.thumbnailUrl'>      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>     <b:else/>      <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_QO9CamXng4xptLYsazMLkvVIGcnVk4i_BOIEUCljHDL2nVZU7ZyEk0-4HFVDvJng4jjoJ7_LFyhnCilMQRcVqSRWyBYLwLZv3aoLKBswu84VzU3tmwcb1Y5CS_3NaSnzZkA4BBJ-eMm/' width='72px' height='72px'/>     </b:if>     <data:post.snippet/>    </div>    <div class='jump-link'>     <a expr:href='data:post.url' 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>