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

Dạng popular post này tương tự như Cool Popular Posts mà mình từng giới thiệu, tuy nhiên style khác so với giao diện đó.

Demo for Post

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào Thiết kế (Mẫu)

   3- Chọn Chỉnh sửa HTML

   4- Thêm đoạn code sau vào trước thẻ ]]></b:skin> :

/*POPULAR POST*/
.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/AVvXsEgmQuHFzguwHxqzwfNpPXWD8z4h7gI47Z7snbYbFNLRp5AeKCsUNTNchy8Xb4XIAezPRdJpbbvOtVn3JD925BQ0WJAqn5RWxZymDygMWQqpYFq9_IQt-Rpx9lRODKLXn-9d2u4UQR5ZlAQW/h120/1-popular-namkna-blogspot-com.png) no-repeat  left}
.top2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLoFXevPT2uA-B-xlY3rHr6qReywWHp5LXWuv6dRtIS9FPt-g6u6cRZpmilIALrTQzzXfKfwDwoVc8DkxCydoLvQS2uZPuAOYtGwF23T2RQVg96LaIyRNVzvQozEpmRpY1IfH2BoSU16cc/h120/2-popular-namkna-blogspot-com.png) no-repeat  left}
.top3 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSsSyGuzy6hVgrznCjJJNaUlBa9BUIs2rkCdJJAZZEytMJtty1w2roBerQJtyhcaIryjs9pWnF4xbJ3KcQwzqFx0mDfiX4tNR31fncJd3wf4Zhe3KqQGnghM0XR13itwlsLovrVXcD8vNY/h120/3-popular-namkna-blogspot-com.png) no-repeat  left}
.top4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUlaNvhwvh4silPstP8IqZ3aG7xb3vQSWjcHzejfLmftZIlPjdJLTod-OTCYMz05fOkzBlLQ_jwJqBX_aUTopeC2r1MaTIx5jE5oQjUhE1g4_uM-ErJfPZhPsxNXdn14iHGUP8V7IbO6eV/h120/4-popular-namkna-blogspot-com.png) no-repeat  left}
.top5 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5F9M6tz5TXcCwZmlXiQtrq5Of5i4PYhPR39eih8EcC_5eB-55935C-He8a67nW8shwj-_ZmeJsWlB7QzI1GoZbQqW1LQnLFbu_9E9-gUo1bz6uJkvN9xajcrtrr-DRqVWCQ3aHmku2mgN/h120/5-popular-namkna-blogspot-com.png) no-repeat  left}
.top6 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwXNVgrzoOsN6njplQqXpN53cALRFUhvx6EwpwpTKvprMUvy8GpRklHEyRTT_38ElrOoGUB-pjgXTjKiUrVDmZNIFvk5xgQdcQktInomJDUa_38Gm5oEbuuE3zUDSuunvzTUIDcmnFlXb7/h120/6-popular-namkna-blogspot-com.png) no-repeat  left}
.top7 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaCBBoRdydrhaaRk0SjVtf2Dv4tqfYq1noWtxjFzRSkvLJduQo16VErR_1Z_ASohtiDINaSyRCC0IL96BkxkBUUA3-d6cfuaF766gwSuQb9bd1KyAoLzPRt2xaU_Z1EkXLThv4tpVx4GqQ/h120/7-popular-namkna-blogspot-com.png) no-repeat  left}
.top8 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYfkpYLhS1Nznaxbexm09pwK6ZjqPXqNz_LYO_3Hpffx-aN6ZUo3knUvLYsBhlYXNLTj5Upcl0rdIUrh1MDtQ2qZh1geJzAOgw1v_0b2PxLukh_5JTTpOVq6Bf0C3pF_ZtUBwpiWPLg0bQ/h120/8-popular-namkna-blogspot-com.png) no-repeat  left}
.top9 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7UrgP8NwYcVJR-IaCYzrIOmDjCEGixt7wXS1feWSjuN6LKUZRHH7XszUBLKVup5c8s0lDaRXudBgcLOc9xrgf7EbF8XuSnzvlRRgPbB7bwjhXDGYFlH5gopsbjAhPFKkoPndNRO79Njzp/h120/9-popular-namkna-blogspot-com.png) no-repeat  left}
.top10 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgscwLF98s1gs8c6b0zR_53fggnHz_-RguD0dZXVuvfiffiTrIm7mVTHZZpbfJIWJsPrEvoaxv-j1o2fbR5TfsUEaP4La7v-noqJMudNFw-1cGrx-VBZs2URamUodFsjZYSuPmyiIrmQ6Gk/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;}

   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>

   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'>
<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'>
              <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>

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ế toàn bộ 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: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: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>

   5-  Bấm Lưu Mẫu  (save template) lại. 

Quay lại phần tử trang và cài đặt như hình:

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

Chúc thành công!