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

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/AVvXsEhJdzimlPo8pnBiFaev0Ia9QLap-vZsjjziaAnWPcaXpevbJaC0qxNRRBDMzuTEEvzregnSYhJH_mFyE9qH4-H-X1M9pkITmXgL0_MQ2TBDM7oetVA_48V4acKx5XnmRD6UCSJ_4Bm_bUk1/s25/1.png) no-repeat  left}
.top2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJoRrL2CkgQLSf3CAVN1lvYY8BE4l91Yrq41S6rotiqJM4taugVDlESewVzFMr6GVb1nRNvT5_Qm9U0ucEBrugMw0of4Z-aVWllNn88faSmAbkStv-PoaNUHLu7A_P2YxjB0pCFwCg2N2/s25/2.png) no-repeat  left}
.top3 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipYZU7ark1MZmfUx6GJF_tv4E_9NIoX-YiJhN-In2rjxQ8EBWi7GKm_l8gF3-Tl7GN_aa0wOVWHLW1JFkaUwk4LE3IM7yF0LJ-MQISuHOffJnae2K3-4VE7O9NoioHaJXvdT1NVKsat39I/s25/3.png) no-repeat  left}
.top4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimSWHGlOCPweSYdmGay6wH6EjeMltXSMxmU14vog1YK_BEEG2mnYp5vssZ_oJgtXbOi45w8zbAptJkRIbrj8sDOgHMZcK_meiyMkou6ug1vDPr6EthllNccnZO9AYpATZkf1YuJt8o9_Fb/s25/4.png) no-repeat  left}
.top5 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gEVJrEO2XpQkP5TJrskoy7b0HbiUASF5GY-5GnegOgAoO-nuADdXFb3rXel43xgA4GiGInQ8p0cp0WZyjrU5ps_fctoFp4OX0GzrcQ3Uktwe7SjDSEru-YHUDIAJBfcKRt_qd2Nq-Tq4/s25/5.png) no-repeat  left}
.top6 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIisjqVI2JyZ9ydDrlntv3cP06mBr4YDnkPt1cuWt7MEQXAsBr70I0sq3sft3rEu8yTBWptuo9AwzXIYpjnc8EFGGuAPy4TZUuNR6-GUKbpKnpwAoi5KQ7RRc0S_XWtpInDZpfUHqSJfS6/s25/6.png) no-repeat  left}
.top7 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ye1nuG8_MwfdkUBS-i8n8knHlcQ8ZsXjbItZVbfzZ49cwIJrza8NjDfCIVdbeX8RVbdC15aSNeA1pZMsX5C1P3sbSI246igqPVB77K9CE26kuQ6AyJQScsLYke92euvUU7R542diB3rA/s25/7.png) no-repeat  left}
.top8 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVjFT1kx8iV3e6ra5FkQHEK_dcI2ARNjIUQbBJg_ZF9Q5YHS8DPHl-c96CtXQhxOYGDNcy9Tq4-31h54hd86GeUxCXpksxrH38TaRTQ7AuCIzlPnV9NIlLVAF5bKexJZeRHq_ETr7QlRRC/s25/8.png) no-repeat  left}
.top9 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi323gvygtPkPrPjAQd6_gQIH05xRtbJ2_Dp_1Y3_jm1trKvAMmbDPtJ8AJFjUV0OtepJUn4kHnSowV1XNVuZJDJGSSE8TUBJl3hpORI48oGkUXMyH3NDtvWKeO3gvyCnjjqMIvwErDqhEH/s25/9.png) no-repeat  left}
.top10 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUYADcZcVGnXxSzJkqMMrQJPovuUxJuJ8ijbPAuRpj-8DlNRoR_jxkWCuQ0Zn2O17-vdY0zipaoZFDJoUyiWB8ExiI6Hh_IbjPrLmKHIxkTZWNicmbSGc-M2nZY3vJDOUuntyzMFOIIQOI/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}
.popular-posts ul{list-style-type:none;padding:0px;margin:0px;}
.popular-posts ul li{  background-image: url("https://lh5.googleusercontent.com/-EjtpHG_pew8/T2t0Yo4PNwI/AAAAAAAAAAs/FNi7rdsmLy4/s50/1332.png");
background-position: 0 0px;
background-repeat: no-repeat;
border-bottom: 1px dotted #CCCCCC;
margin: 0 4px;
}
.popular-posts ul li a {color:#333333;padding:25px 10px 25px 40px;text-align:left;font: bold 13px Tahoma; margin-left:10px;}
.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;}