Auto readmore với thumbnail 2 cột không scripts cho blogspot style 2

Bình thường khi xem bài viết ở các trang như trang chủ, trang nhãn, trang lưu trữ blog (gọi chung là kiểu trang index) các bài viết sẽ hiển thị không theo một quy cũ nào hết. Chúng hiển thị theo cách viết của bạn khi đăng bài. Bài viết này namkna sẽ hướng dẫn các bạn cách tóm tắt bài viết ở trang chủ một cách tự động thành 2 cột song song (hay còn họi là Auto readmore width thumbnail 2 colum) không sử dụng javarscripts (được namkna cải tiến từ style 1).

¤ Một số ưu điểm.

» Không ảnh hưởng đến tốc độ lòa của blog vì không dùng javarscrips (xét theo khía cạnh nào đó còn giúp tăng tốc blog vì nó thu nhỏ ảnh thumbnail và tóm tắt lại nội dung bài viết ở trang chủ của bạn.

» Bố cục gồm 2 cột bài viết xép thẳng hàng.

» Ảnh thumbnail và tiêu đề bài viết + mô tả nằm trên cùng một hàng. Ảnh thumbnail có kích thước tối đa 72x72 nếu muốn rộng hơn hãy xem Auto readmore resize thumbnail.

» Phần mô tả hiển thị bằng mã CSS do vậy không bô đen được.

VIEW DEMO

¤ Bắt đầu thủ thuật

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)

4. Tìm thẻ ]]></b:skin> (Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này.)
- Dán code bên dưới sau thẻ ]]></b:skin> vửa tìm được.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-body{border-top:2px solid #ddd;padding-top:10px;font:normal 14px &#39;Arial&#39;, serif;margin:1.0em 0 .75em;line-height:1.3em;}
.post-snippet:before{content:attr(data-snippet);}
h3.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0}
h3.date-header,.post-timestamp,.post-footer,.feed-links {display:none}
.post {float:left;margin:10px 5px 0;overflow:hidden;padding:7px 7px 5px;positon:relative;width:45.8%;height:95px;}
.post h1,.post h2{line-height:1em;margin:0 0 4px;padding:0;font:bold 12px Tahoma}
.post-body{font:12px arial;border-top:none;padding-top:0px;background:none;margin:0;text-align:left}
.post h1,.post h2{font:24px Oswald;line-height:1.2em;color:#444;margin:.0em 0 0;padding:4px 0}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#444;}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#0a2e56}
.post-thumbnails{float:right;margin-left:20px;}
</style>
</b:if></b:if>

5. Tìm dòng code:

<data:post.body/>

- Thay thế thành code bên dưới.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div class='post-snippet' expr:data-snippet='data:post.snippet'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
</b:if>

6- Tìm đoạn code như bên dưới (nằm ngay trên đoạn ở bước 5)

      <h3 class='post-title entry-title'>
     <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>
      </h3>

- Thay thế nó thành:

<!-- anh thumbnail trang chu -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnails' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
   <b:else/>
    <img alt='no image' class='post-thumbnails' height='72px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDcQdc1qnWZo_4P4VyvmGbmTRQSsvq2fhO1ByISXjBit4ZqyKzs3HUmOtyhGvHDP6T20HVzWvJOp2OdiLut66PmyrqCxM3UYX99r6l4cIURcueBA2ZG6pMPjcsEzxJUqTZgBbedKBgssob/' width='72px'/>
   </b:if>
   </b:if> 
</b:if>

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <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>
      </h2>
</b:if>
<b:else/>
      <h1 class='post-title entry-title'>
     <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>
      </h1>
</b:if>

7- Lưu mẫu lại và xem kết quả nha.

¤ Cài đặt số bài hiển thị.

- Bạn vào cài đặt => bài dăng và nhận xét.

- Tại mục hiển thị tối đa bạn chỉnh số bài cần hiển thị lại cho phù hợp.

- Lưu ý bạn nên để số bài là số chẵn vì tiện ích có 2 cột nếu để số lẻ sẽ bị hụt nha.