Tiện ích Popular Posts cho Blog

TyniSoft    1/25/2013    Popular Posts , Thủ thuật blog    Comments   

Bài viết phổ biến (Popular Posts) cho blog là một phần không thể thiếu cho blog của bạn, nó hiển thị những bài đăng được quan tâm và xem nhiều nhất trong 7 ngày hay trong vòng 1 tháng. Trên Blog của google có Popular Posts mặc định nhưng về độ thẳm mĩ không cao nếu bài viết chúng ta ko có ảnh (Thumb) thì nó sẽ không hiển thị được và như thế sẽ mất đi sự thu hút Blog của bạn. Tuy có thể tùy chỉnh chế độ hiện hay không hiện ảnh (Thumb). Nhằm khắc phụ lỗi như trên và tăng độ thẳm mĩ cho blog các bạn mình xin giới thiệu một tiện ích Popular Posts mới vừa đẹp và khắc phụ được lỗi trên.







Sau đây là các bước thực hiện.
"Điều đầu tiên trước khi cài đặt Blog bạn hãy Sao Lưu Mẫu lại nhằm bảo đãm an toàn cho Blog."
Bước 1: Bạn vào Blog chọn Bố Cục -> Chọn Thêm tiện ích (bất kỳ bạn muốn nó hiện) -> Chọn tiếp như trong hình.

Nếu Blog bạn đã có tiện ích này rồi bạn thì bỏ qua bước 1

Bước 2 : Tùy chỉnh.

Bước 3: Bạn chọn Mẫu -> Chỉnh sửa HTML -> Bấm Ctrl + F nhập vào tìm đoạn bên dưới. 

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

Bước 4: Thay thế đoạn code trên bằng đoạn bên dưới.

<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"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <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"'>
            <!-- (3) Show only thumbnails -->
            <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/AVvXsEhPUU5en0UdKFxS4n4hHilx-iPB_W6qPTzxYZUmBZaWVw0ZVuaeHkNdkyfVb7gZZYlGXMvLrqhMPT1BssTzbNX5hbzj9tPxNP8JhEP4cwDtI9f4tRyMFP70yLaYHD9H4Kh00bGzRX65pJ0/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>         
             </div>
            <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <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 5: Bạn nhập tìm đến thẻ ]]></b:skin> và dán đoạn code phía dưới vào ngay trước thể Skin 

.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}

 Bước 6: Lưu lại. thế là Xong.