Trước kia mình đã giới thiệu cho các bạn 1 thủ thuật để hiển thị bài viết có nhiều comment nhất trong blog. Đó là thủ thuật dùng pipe của yahoo để lấy dữ liệu. Và hiện tại cái pipe ở thủ thuật đó đã die (hoặc cũng có thể do người tạo xóa). Vì thế hôm nay mình sẽ giới thiệu cho các bạn 1 cách khác để tạo widget này mà không cần đến pipe của yahoo.
Việc dùng pipe trong yahoo là rất hay, nhưng cũng khá khó, hiện tại mình cũng mù tịt về cái này. Mình tính thử mày mò đề áp dụng cho blogspot, nhưng chắc cũng còn lâu. Ở thủ thuật cũ, dùng pipe của người khác tạo, ta có khá nhiều điều bất lợi như : không chắc là pipe đó sẽ die khi nào, muốn tùy chỉnh hiển thị hơi phức tạp (ví dụ như đổi lại thành hiển thị các bài có nhiều comment nhất cho 1 bài viết), không có ảnh thumbnail, …
Và hôm nay với thủ thuật khác quen từ tiện ích recent posts, mình sẽ tạo ra widget “Bài viết có nhiều comment nhất”.

* Và sau đây là các bước thực thủ thuật :
1. Vào bố cục
2. Vào phần tử trang
3. Tạo widget HTML/javascript ở nơi muốn hiển thị rồi dán code bên dưới vào:

<style type="text/css">
             #top-posts-tab {
              width:260px;
              }

              #top-posts-tab h3 {
              background:url(http://data.fandung.com/blog/demo/tooltip-recentposts/img-bg-rd.png) no-repeat top left;
              padding:3px 5px 14px 5px;
              font-size:13px;margin:0;
              color:#fff;
              }
             #top-posts ul {padding:0; margin:0;}
             #top-posts a {text-decoration:none;}
             #top-posts a:hover {text-decoration:underline;}
             #top-posts img {width:45px;height:45px;float:left;padding:1px; border:1px solid #ccc; margin-right:3px;}
             #top-post ul, li {list-style:none;}
             li.tp0 {background:#f4f4f4;padding:3px;height:49px; }
             li.tp1 {background:#fff;padding:3px;height:49px;}
             li.tp0:hover, li.tp1:hover {border:1px solid #f1cbbf}
</style>

                <script type="text/javascript">
                  home_page = "http://www.fandung.com/";
                  label = "Thu%20Thuat%20Blog";
                  numposts = 7;
                  cmtext = "Comments";
                  cmcolor = "#777";
                  sumTitle = 84;
                  mode = "label";
                 </script>

 <div id="top-posts-tab"><h3>Top Posts </h3>
                <div id="top-posts-loading">
                  <img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/>
               </div>
                 <script type="text/javascript" src="http://data.fandung.com/blog/demo/top-posts/top-posts.js"></script>
              </div>

- ở đây có 1 biến mới , đó là mode , nếu bạn muốn hiển thị bài viết của 1 nhãn thì giá trị mode sẽ là label, còn nếu muốn hiển thị cho cả blog thì giá trị mode sẽ là blog
- với biến sumTitle dùng để giới hạn lại tiêu đề cho bài viết, trong trường hợp tiêu đề bài viết quá dài, có thể tràn khung. để khỏi phải mất công tùy chỉnh lại độ rộng của thẻ li. Và giá trị này sẽ thích hợp với độ rộng như trong demo, nếu độ rộng của tab được điều chỉnh lại thì các bạn có thể điều chỉnh lại giá trị này để cho hợp lý nhất.
- Và khi tràn khung nó sẽ trông như thế này
4. Save widget.
- Một điều lưu ý nhỏ, tốc độ load của tiện ích phụ thuộc vào việc blog (nhãn) có nhiều hay ít bài viết. Nếu bạn không muốn nó ảnh hưởng đến tốc độ load của blog thì nên đặt tiện ích ở footer.
- Một điều lưu ý thứ 2 là tiện ích chỉ đúng với 500 bài viết mới nhất, do trang feed chỉ hiển thị tối đa được 500 bài.
Chúc các bạn thành công.