Popular pots có có số đếm và title trích dẫn

PopularPosts là 1 widget được rất nhiều người dùng Blogger sử dụng, đây là widget cho biết những bài đăng phổ biến được nhiều người đọc trên blog của bạn. Ngoài 3 dạng thống kê: 7 ngày qua, 30 ngày qua và mọi lúc nó có 4 kiểu hiển thị là: chỉ mình tiêu đề bài đăng, tiêu đề bài đăng và đoạn trích dẫn, tiêu đề bài đăng và hình ảnh, tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Thủ thuật sau đây sẽ hiển thị PopularPosts bao gồm số đếm (count), ảnh minh họa (thumbnail), và tiêu đề bài viết (post). Về cơ bản style này tương tự với style Cool Popular Posts mà mình từng giới thiệu đến các bạn.

Các bạn có thể xem 2 Demo mình thực hiện trên 2 blog khác nhau để xem hiệu quả nha:

DEMO 1     DEMO 2

☼ Có gì mới?

1- Hiển thị số đếm dựa trên một scip tương đối nhẹ, do vậy không ảnh hưởng nhiều tới tốc độ load của blog bạn.

2- Thêm ảnh no thumbnail chung cho những bài viết không có ảnh minh họa để giúp style đẹp hơn và không bị phá vỡ bố cục (Xem ở hình minh họa hoặc blog demo 1).

Để làm được vậy chúng ta quan tâm tới đoạn mã của kiểu hiển thị thứ 3 <!-- (3) Show only thumbnails --> và thứ 4 <!-- (4) Show snippets and thumbnails --> (mình sẽ đánh dấu màu xanh để các bạn dễ dàng theo dõi ở phần sau).
3- Có đoạn tittle mô tả khi dê chuột vào tiêu đề bài viết. Bạn có thể xem ở blog Demo hoặc hình dưới.

Lưu ý: Bạn nên sau lưu template để tránh những sai lầm có thể sảy ra trong quá trình chỉnh sửa. Nên tiến hành chỉnh sửa template được tải về (bạn có thể chỉnh trực tiếp trên Blogger nhưng sẽ dễ dàng hơn nếu dùng một trình text editor chuyên nghiệp, ngoài ra thì việc chỉnh trên Blogger sẽ gây lỗi font với blog Tiếng Việt).

☼ Bước 1: Thêm tiện ích bài đăng phổ biến (Popular pots):

- Hãy chắc chắn trên blog của bạn đã có widget PopularPosts này: Nếu chưa có thì hãy thêm vào blog và cài đặt như bước 1.5.

1.1- Đăng nhập vào Blog
1.2- Vào mẫu (Template)
1.3- Chọn Thêm Tiện ích (Add Widget)
1.4. Bấm chọn mục bài đăng phổ Biến (Popularposst) sau đó lưu lại:

1.5. Bấm vào chỉnh sửa (Edit) tiện ích Bài Đăng Phổ Biến (Popularposst) bạn vừa tạo để xác định Id của tiện tích popular post và cài đặt các thông số: đánh dấu vào lựa chọn kèm theo hình ảnh thu nhỏ và trích đoạn. Kiểu thống kê thì tùy bạn chọn 1 trong 3 kiểu: 7 ngày qua, 30 ngày qua hay mọi lúc. Lưu thiết lập và tiến hành bước tiếp theo.

- Bạn nên để số bài hiển thị tối đa là 10 bài.

☼ Bước 2: Chỉnh sửa style Popular pots :

   2.1- Đăng nhập vào Blog
   2.2- Vào Mẫu (Template)
   2.3- Chọn Chỉnh sửa HTML (Edit HTML)
   2.4- Thêm đoạn code sau vào trước thẻ ]]></b:skin> :

/*POPULAR POST http://namkna.blogspot.com/2011/01/cac-trang-web-lay-code-nhac-chen-vao.htm */
.top1, .top2, .top3, .top4, .top5, .top6, .top7, .top8, .top9, .top10 {border-bottom:1px dotted #ccc;padding-top:6px;font:bold 12px Tahoma;width:280px;margin-left:10px;font: bold 13px Tahoma;color:#FF6600}
.top1 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8X1Czkt__fqeNtxpvpEDtAtUQiLlJAS-ihrfezfkDU1TXtFdZANPQlctnDdXK1i4RFl04CtCC49IZvKdi8SjjyZQSrMwc82seKU4NNdqyy_RBt7VP4nCtlg5bblk9ZQnmZlss6VGeJqHR/h120/1-popular-namkna-blogspot-com.png) no-repeat  left}
.top2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIGVwG5vA49qxareAhDZQ9jugOUDFZraym_pyEJ21XpVl-8WnnRjUTZp928kmXth_YnNFlPWH1FlvagD70wHsewETtVYZFWPVS-Aq2GhAxLy6B9RMCrHMYa6VcW3Tavwd5fVD1Qm88lr9x/h120/2-popular-namkna-blogspot-com.png) no-repeat  left}
.top3 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOc_PI0vGF9IyduSlb2hcaSsklnWNK8WyK18ojkDryor1XmxdzOE6z06RRA1xltAJQW-BV4MXEuBeRrKrdbTdryRsGxnnyGxJaGQ1E5NfUKs1k6JM3cu7kZBep_v933EdBPhciUVfFSL41/h120/3-popular-namkna-blogspot-com.png) no-repeat  left}
.top4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGs7AM5cAah8e5STZRBI6HKLa91XTUp-022JwnvmXT8H1K5YYoGuSi8ZC7VFsIe6Am7fTioj365gUMitU6AGCp6qqZJ7TQKlgPXFPCh9MYO7uHIIhsuAuDYi1EvS3zkt5ZPx0P7GEk3s58/h120/4-popular-namkna-blogspot-com.png) no-repeat  left}
.top5 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyPSisKLn1hA4iC744NN_n3iTRLTEldUIqLAfuullNPu2zYAKeK2LQhiATk5fzHrTHYdJmFZLIlXDKKc2nGvC4bItZRuKKL1mAJFYecNZNhqaf2TtOjxty6LhuZHpJsPh2wMLavuzKyR_/h120/5-popular-namkna-blogspot-com.png) no-repeat  left}
.top6 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHGrYX6XShK__lGIr4nJLvFNapsk4b7zKFKAuZVxfXQxGFLUm3EpVGKotp-IVUEEOvw8ZyuSPoAd8iX0SFXKHpawUZ27yiODy1pkg6gJsmEFCs_GLs31npX7LL9pTsVUCsfNCSrJ1DazUG/h120/6-popular-namkna-blogspot-com.png) no-repeat  left}
.top7 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtZvugOAZWl6k27xS1YRc9zZNUvdt9SjZ1sslGKjX_fLR8-7NNuA08vt6l29BlLneVTMCqjgGFcOplpIL4oogpE0LfaUaNuFObKaGrEmt5t_S_qfDrFHpGnYhyMW79RA1MVRnblj8FpyPY/h120/7-popular-namkna-blogspot-com.png) no-repeat  left}
.top8 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuPai64X1KErF7FPzVt2tS7wVhFWH-IzCgjA2DT_jE71nj8zvdAxUAf1gbFouGSnUKr9tFv5m52hrTR1ai-2Hu7Ya7blzaNBjmaQ7kXrDZ9qFM_XQ22ubSGXkUJWljxh8aF_KgM3rfbil0/h120/8-popular-namkna-blogspot-com.png) no-repeat  left}
.top9 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPOcVlQtCKJiVWOuKCS2GMbzIkBWkPaqxWBQcKE-dIiZAiSsUkcDrfoeSDGVkVAq7y3e3X-bF9zMIIE9g7MbYkS8ABCA8ClBB9P8f2yGq2Zoyj2ZfNH692_E_rXox0_FqvbcHpJNvQ6rS/h120/9-popular-namkna-blogspot-com.png) no-repeat  left}
.top10 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUknjMYfYpxK_Yq_fhzSQShKKiZz6TUdyrIXngKgFOSLej-n4SAxLelZcrwK1W4gS_Y26QQClUgyywsBfhE3s7u06h9vG2yI32CCSqXliM2VyYJ8lL91IfbsOuPZgToQcwVvnr3F2E5U09/h120/10-popular-namkna-blogspot-com.png) no-repeat  left}
.widget-item-control {display:none}
.popular-posts ol{list-style-type:none;}
.popular-posts ol li a, .randoms ul li a {color:#333333}
.PopularPosts img { border: 1px solid #CCCCCC; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); height: 65px;
margin-left: 27px; padding: 2px; z-index: -1;width: 90px;z-index:10}

   2.5- Thêm đoạn code sau vào trước thẻ </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script>
 $(document).ready(function () {
  $(".popular-posts ol>li:eq(0)").addClass("top1");
  $(".popular-posts ol>li:eq(1)").addClass("top2");
  $(".popular-posts ol>li:eq(2)").addClass("top3");
  $(".popular-posts ol>li:eq(3)").addClass("top4");
  $(".popular-posts ol>li:eq(4)").addClass("top5");
  $(".popular-posts ol>li:eq(5)").addClass("top6");
  $(".popular-posts ol>li:eq(6)").addClass("top7");
  $(".popular-posts ol>li:eq(7)").addClass("top8");
  $(".popular-posts ol>li:eq(8)").addClass("top9");
  $(".popular-posts ol>li:eq(9)").addClass("top10");
 });
</script>

Lưu ý: Nếu blog của bạn đã có file Jquery rồi thì hãy xóa đoạncode màu vàng đi.

   2.6- Tiếp tục tìm đoạn code của tiện ích popular post như bên dưới:

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

Trong đó: PopularPosts1 là Id của tiện ích PopularPosts, tùy vào tiện ích bạn muốn áp dụng khác nhau thì có Id khác nhau như PopularPosts1, PopularPosts2, PopularPosts3,....

- Thay thành đoạn code sau:

<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'>
    <ol>
      <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'>
              <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:else/>
               <div class='item-thumbnail'>
                 <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/></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'>
                 <div class='item-title'>
                     <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:else/>
                        <div class='item-thumbnail'>
                           <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/></a>
                        </div>
                     </b:if>
                        <a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
                 </div>
             </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ol>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

- Nếu Id ở bước 2.6 khác thì hãy thay PopularPosts1 màu xanh ở trên thành id đó nha.
  7- Bấm Lưu Mẫu (save template) lại.

Cập nhật!

- Để dùng lâu dài bạn hãy tải 10 file ảnh về và Upload trực tiếp lên blog rồi thay vào code của thủ thuật để dùng lâu dài nha.

- Tiện ích lấy ảnh thumbnail từ album picasa, do vậy hãy tải ảnh trực tiếp lên blog hoặc album picasa.

- Nếu gặp bất kỳ vướng mắc nào trong quá trình áp dụng hãy comment ở dưới bài đăng này namkna sẽ trợ giúp.

Chúc thành công!