Popular Post Widget (Tiện Ích Bài Đăng Phổ Biến) là một widget được đa số các blogger sử dụng với công dụng liệt kê ra các bài viết được mọi người chú ý nhất trên blog. Cũng có khá nhiều blogger từng hướng dẫn tùy biến tiện ích này theo nhiều kiểu nhưng vẫn chưa có blogger nào hướng dẫn chi tiết để mọi người tự tùy biến tiện ích này nhằm tạo ra nét riêng của mình. Phạm vi bài viết này sẽ cho bạn hiểu hơn về cách làm việc cũng như tùy biến popular post widget này.



Phần 1: Nói về Popular Post Widget của blogger.
1. Làm sao để có tiện ích này?
Bạn vào mục "Bố cục" → Thêm tiện ích → Ở đây bạn sẽ tìm thấy tiện ích "Popular Post" (Bài Đăng Phổ Biến) Chỉ việc cho nó vào blogger là xong.
2. Widget này dùng để làm gì?

Popular post widget liệt kê ra các bài viết được xem nhiều nhất trên blog của bạn theo từng thời điểm (toàn thời gian, 30 ngày, 7 ngày...)
3. Giao diện và cách làm việc của tiện ích này.
Giao diện mình đã cung cấp ở trên. Nhìn vào thì thấy khá đơn giản mình cũng không nói nhiều. Đi vào code của tiện ích này mình sẽ nói chi tiết hơn.
Phần 2: Cách làm việc của Popular Post Widget
Sau khi đã thêm Popular Post Widget vào blog. Khi vào template ở chế độ "KHÔNG mở rộng mẫu tiện ích" bạn sẽ thấy 1 đoạn code tương tự như sau:
<b:widget id='PopularPosts1' locked='false' title='Bài đăng phổ biếntype='PopularPosts'/>
Dòng mình tô đỏ sẽ khác nhau tùy blog nhưng dòng type='PopularPosts' thì giống nhau với tất cả blog (mỗi type là 1 loại widget khác nhau) 
Đoạn code trên khá đơn giản chẳng có gì để nói. Bây giờ tick vào "Mở rộng mẫu tiện ích" bạn sẽ thấy đoạn code bung ra có dạng như sau:
<b:widget id='PopularPosts1' locked='false' title='Bài đăng phổ biến' 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 == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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 == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <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>
            <div style='clear: both;'/>
          <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>
Trong đoạn code trên mình đánh dấu cách đoạn code màu đỏ vào màu xanh khác nhau.
Các đoạn code đỏ là các thẻ, lệnh làm việc của tiện ích này.
<data:title/>
Xuất ra tên của tiện ích.
<a expr:href='data:post.href'><data:post.title/></a>
Xuất ra tên bài viết có gắng liên kết đến bài viết.
<data:post.snippet/> 
Xuất ra đoạn trích dẫn của bài viết
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
Xuất ra ảnh thumbnail của bài viết.
<b:include name='quickedit'/>
Xuất ra biểu tượng chỉnh sửa (hình cái cờ lê)
Các đoạn code màu xanh dương là các class chứa các thành phần trên
Các class này dùng cho việc thay đổi các code css theo ý thích của mình. Thường thì mình qui định css cho các class này để làm nổi bật widget lên.
Chú ý: toàn bộ đoạn code trên đều nằm trong id PopularPosts1 mình đã nêu ban đầu. Nên để gán thuộc tính css cho những thành phần này bạn cần thêm #PopularPost1 ở trước các class. 
item-title : Class chứa tên bài viết
item-snippet : Class chứa đoạn trích dẫn.
item-thumbnail : Class chứa ảnh thumbnail.
Chú ý:
nếu muốn edit css của link thì thêm " a" phía sau class
nếu muốn edit css của ảnh thì thêm " img" phía sau class
Ví dụ:
Mình muốn màu của tiêu đề bài viết (tiêu đề bài viết có chứa liên kết) là màu #666666 thì mình có đoạn code sau:

#PopularPosts1 .item-title a{color:#666666}
Muốn ảnh thumnail của bài viết cao 50px rộng 50px thì có đoạn code sau:
#Bloglist1 .item-thumbnail img{width:50px; height:50px}
Muốn cỡ chữ của đoạn trích dẫn là 12px thì mình có đoạn code sau:
#Bloglist1 .item-snippet {font-size:12px}
Chèn những đoạn code trên phía trên thẻ ]]></b:skin> là xong.
Nếu chưa biết về các thẻ css thì bạn xem bài viết css căn bản
Cơ bản về tiện ích này chỉ có bao nhiêu đó thôi.

Phần 3: Tùy Biến Popular Post Widget.
Về việc tùy biến tiện ích này thì có 2 phần mình có thể can thiệp vào tiện ích này.
1. Can thiệp vào css: Tức là thay đổi các code css để làm nổi bật tiện ích này lên (mình đã nêu chi tiết ở phần 2)
2. Kết hợp với 1 số file javascript tạo các hiệu ứng để tùy biến tiện ích này. (Cái này đòi hỏi bạn phải hiểu về javascript) Có thể biến tiện ích này thành một dạng slider nào đó bằng cách gán id popularposts1 vào file javascript của slider để tạo hiệu ứng trượt, ẩn hiện...
Cơ bản bài viết này đến đây là kết thúc. Nếu bạn có ý tưởng gì hay hay có tahức mắc gì thì để lại comments bên dứoi mình sẽ trả lời trong thời gian sớm nhất có thể.

Facebook Google twitter
Từ khóa:
Cùng Chuyên Mục
Blogger Comments
Facebook Comments

Tin Tức Online
Xem Thêm Tất Cả »
Góc Chia Sẻ
Xem Thêm Tất Cả »
Game - Ứng Dụng Hay Tháng 8
Xem Thêm Tất Cả »
Góc Thư Giản
Xem Thêm Tất Cả »
Bài Viết Ngẫu Nhiên
Copyright © 2016 - All Rights Reserved
Template by Bùi Đạt - Powered by Blogger | SiteMap