Chia cột bài viết - Thủ thuật chia danh sách bài viết 2 cột có ảnh cho Blogger

» 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.

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

1. Đăng nhập vào tài khoản Blogger / Blogspot

2. Vào phần Mẫu (Templates)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Tìm thẻ ]]></b:skin> .
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}
</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/AVvXsEgAMuxxlIJhUZPYWM9z5GFo7wPXLxr7PDsPu8rO_c6z3KlrYysP8cibAjQ2W1d8f_no-xE-l22lI1rCS2ege4mNYlj9mm4LUu9AD2IHAalPRO2dRxYT_AZfMNXnH8PagMZsx-Y4Pt-87HpG/' 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>
    </b:if>

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

8- Bạn vào cài đặt => bài dăng và nhận xét và 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.

Hướng dẫn khách hàng sử dụng dịch vụ

Để xem được các thủ thuật hay nhất quý khách hãy lick vào button bên dưới, xem xong quý khách thấy hài lòng hãy liên hệ nhanh với chúng tôi để sở hữu bộ code bản quyền ưng ý nhất!

ĐĂNG KÝ MUA CODE

Quý khách muốn đăng ký mua templates bản quyền thiết kê tinh xảo đẹp mắt hãy liên hệ nhanh với chúng tôi để đặt hàng Trân trọng cảm ơn quý khách đã sử dụng dịch vụ của chúng tôi!

ĐĂNG KÝ MUA TEMPLATE