Popular Post đẹp cho Blogger 2(Grid Layout)

Đặt vấn đề

Trong bài trước (Popular Post đẹp cho Blogger), tôi đã giới thiệu với bạn cách tạo Popular Post đẹp cho Blogger. Trong bài này, tôi sẽ giới thiệu với bạn một thủ thuật cũng tương tự. Nhưng khác ở chỗ cách thể hiện mà thôi.

Trông nó thế nào?

Ở ĐÂU?

Tiện ích này tôi tham khảo từ http://www.bloggerplugins.org. Thực sự với người yêu thích sự mới mẻ, sáng tạo thì đây là một trong những khám phá tuyệt nhất. Và đây là nguyên văn lời của tác giả:

A few days back, I published the JavaScript version of the Recent Posts widget, and I loved the Grid Layout of the Widget. One of the most popular Widgets used by Bloggers is Blogger’s Official Popular Post Widget. So I decided to edit the gadget, and give it the Grid Style.

Thật tuyệt khi khám phá ra điều gì đó phải không bạn. Tôi cũng yêu thích sự sáng tạo và phát triển dựa trên nền tàng cơ bản. Hiện tại, tôi chưa làm được điều đó. Tôi tin, một ngày không xa, chính tôi cũng sẽ làm chủ một Widget do chính mình sáng tạo ra.

Còn bây giờ, ta bắt đầu với việc làm thế nào thêm tiện ích này vào Blog của bạn nhé.

Thực hiện

Bước 1: Vào Phần tử trang -> Add Popular Post (Bài đăng phổ biến). Bạn chú ý Click chọn như sau:

Bước 2: Bạn vào Bảng điều khiển -> Chỉnh sửa HTML -> Ctrl +F -> Tìm đoạn Code sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

Thay thế đoạn mã đó bằng đoạn Code:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPhCTjQfg15kEIDY9fBVKuVeJODp0B60NVnMYxybqtLSmuLlG9AypLcaaBnVnGjozDsLslmg2k1ub8ze-swKu9YsMRv5jUob5-Sx3UqsmeSLP534bLmEoTXxPq2CLPpidDo92oCvxVsB8/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>         
             </div>
            <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Bước 3: Lưu mẫu
Bước 4: Thêm CSS

Vào Bảng điều khiển -> Chọn Mẫu -> Chọn Nâng cao -> Thêm đoạn CSS này vào