Popular Post có số đếm thứ tự

™» CGC Blog «™ Xin chào các bạn , hôm nay Cenz tôi xin giới thiệu cho chúng ta một thủ thuật mới được áp dụng trên Popular Post của blogger. Thủ thuật này sử dụng 1 tý về js và css , xin các bạn chú ý lưu template lại trước khi ứng dụng.

1.Thêm js : 

 Tìm thẻ </head> và thêm vào phía trước nó

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

2.Thêm css : Tìm thẻ ]]></b:skin> và thêm ngay trước nó

.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/AVvXsEg-KJTxGX71o5gf-Pknb7tfTZwutYo_g3kXmOgRo1h5RR_6irrCJNJxhRkoa7XcgbKI911VtW7cptexh1jv54SHlJRr-GMgH7T48GlGY9Z4l_AKZMA_eh8QoYaNnVR-_ZYQJjxcvdkmhJFK/s25/1.png) no-repeat  left}
.top2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5GgXOe5G7-8giRR1oFvoFNHBzvqX8yzuUVYrRBReTDHwFjZf9KWeNo-S9UeLaBai302GPduTLiFZ_BABGB9V-E-G8n4ytICofDyCfmiqyQHwReML1KXE6Zf2is4Ie4oug31m5ZQ1rZCq9/s25/2.png) no-repeat  left}
.top3 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisvPbPgkl0qlsiXVXnqHYR-q3tP6Wy0GGkL3yklToEdzcruQpgusR2FL_1QAT7Bgb6y_miXdnn_QPxPHHbHU3Lng8tMJqpDbDL4JN1HBv6_njaltotZImhddzLOKrGgG2L9Z9gtmm8cFpN/s25/3.png) no-repeat  left}
.top4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj83iRyFavKIlDZYVXkxxafaEm1o5GCIzNtykVpISjPKQsbiNvESjLCUpJDUh9FoFkR-r3GkndpxwpbbQd4R6mzIUA3mlg-VGcoapMb0sZx9wNSRr_EvRi2nNYg8-jgoOGPxZhChVt5quA3/s25/4.png) no-repeat  left}
.top5 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJUWASFds4irMxuQ9_vu5cQAT3Z_6FxGaGTK06JLCqVsv5D1T8X8bIu1v6O5lyvVHpA8DAQIm7MMzdypaMDfedfVXJq7t5BaXA6Jsmsiq7uJyoEc2h89PDhoO63w5tH85PoGThurNrBYVN/s25/5.png) no-repeat  left}
.top6 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZoKckN78cIvbkb6bLGT9Fc9IZAnbpADmpr-QNmBN_iun-3xj1WJKLGUCMMiRXXerqowzYeefnWyh4xewlBeryARWu_8h9EhrOYyUQCHy02YC3kp7ImtA5FZ817m3oJM0i69Pp2CKEX3q/s25/6.png) no-repeat  left}
.top7 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjxVur_1kSJvoU1Eg491du60_jd3j4jt_DS4JFUPSwHIoOknmfRCb_1ki7qeuYm70f2Z4CeJqMbaAwoby_h8VhYQ3x6jec-i4-42eCzhKPVJ0NXgVautFrC9PthA5d-XsFP0ubKEBR-UWX/s25/7.png) no-repeat  left}
.top8 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHvRIZFaeD1-BynjBihhIc76MT1Ze1IFKTGtTRjtzBEN0IaxaCVbgt-gjtaiMKth-p9E67XDY_9MMeubSlrKFQGhr1rGa70pVFd_TS5h2X7uHWNpaQVFBMxRObqk_tgCtZFR8XYKcpU9Mj/s25/8.png) no-repeat  left}
.top9 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVjHCr5GONbNNQKDzLTvMA0Ufa9ell9qAQHlmfTn9Mj5NYtCPQLIwED1fWDBNLLlU4T4oacezEDxgm84fHPo4gSHPW5CX4wfh_O66bcxF_BWnCrTzq88lN4G4lKPrALs7cPogLOcVJ7StB/s25/9.png) no-repeat  left}
.top10 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEDt7hCEvzR1OSMcs_nWuthqGEqnz1KbeEv2q-Wqv63lt4_DPVB-LDZHA4RxwWe3xOhDL-Bd3Szbt_mhHZ-2aTuBgM2w_Wf2Q4HV3sTy87tZ1z6mbQVMwOfw6mHCaKHXjDkG0lS0nu9GY/s25/10.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;}

Tìm đoạn code của popular posts có sẵn

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

Thay nó thành:

<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'>
              <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>
    </ol>
    <b:include name='quickedit'/>
  </div>
</b:includable>

Nguồn : vngreenzone.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!