Popular Posts Blogspot giống ThaiAiTi.com đẹp và phong cách

Thủ thuật Code tạo Popular Posts cho Blogspot. Nhằm thống kê những bài viết trong toàn bộ Web đưọc xem nhiều nhất.

- Popular posts giống ThaiAiTi.com được hiển thị 10 bài, Và có phân rõ 3 bài Top được xem nhiều nhất

Demo: Tại đây

- Tìm trong Template từ khóa  <b:widget id='PopularPosts1'

- Thay thế đoạn Code có sẵn bằng đoạn code sau:

            <b:widget id='PopularPosts1' locked='false' title='Hot in Week' type='PopularPosts'>

              <b:includable id='main'>

<div class='tieudeboxbenphai'><a href='http://www.thaiaiti.com/2013/11/thiet-ke-banner-flash-ong-slideshow-anh.html'>Xem nhiều</a></div>

   <div class='widget-content popular-posts'>

    <ul>

     <b:loop values='data:posts' var='post'>

      <li>

       <b:if cond='data:showThumbnails == &quot;false&quot;'>

        <b:if cond='data:showSnippets == &quot;false&quot;'>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

        <b:else/>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

        </b:if>

       <b:else/>

        <b:if cond='data:showSnippets == &quot;false&quot;'>

         <b:if cond='data:post.thumbnail'>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'> 

  <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:title='data:post.title'/></a>

         <b:else/>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>

  

  <img alt='no image' class='item-thumbnail' expr:alt='data:post.title' expr:title='data:post.title' src='http://bit.ly/hGWr7r'/></a>

         </b:if>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

         <div class='clear'/>

        <b:else/>

         <b:if cond='data:post.thumbnail'>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:title='data:post.title'/></a>

         <b:else/>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' class='item-thumbnail' expr:alt='data:post.title' expr:title='data:post.title' src='http://bit.ly/hGWr7r'/></a>

         </b:if>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

         <div class='clear'/>

        </b:if>

       </b:if>

      </li>

     </b:loop>

    </ul>

   </div>

<b:include name='quickedit'/>

  </b:includable>

            </b:widget>

- Chèn đoạn CSS sau trên  ]]></b:skin>

#PopularPosts1 {float: left;margin-bottom: 15px;}
#PopularPosts1 .tieudeboxbenphai a {background:#2882bc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYad_7QR8EDB9Sj7JLttIiVP__lqH7U29668X45wTLGedkqiqLmMv7CRwpxMb-wbey2p36eGr_L3ifZHZAtRabr1K9qiomAolzpMUpRtCKCx-QsdbXq08RMpYEc3Ilp5ZpcZyWqtlMi_f/s23/likeok.PNG) left no-repeat;background-position: 80px 6px;}
#PopularPosts1 ul{list-style-type:none;float: left;width: 100%;padding: 0;margin: 0;}
#PopularPosts1 ul li{position:relative;padding:10px;float: left;height: 25px;overflow: hidden;width: 290px;}
#PopularPosts1 ul li:first-child{background:#fff;padding: 10px 30px;height: 65px;}
#PopularPosts1 ul li:first-child a {float: left;margin-left: 0 !important;padding: 0 !important;width: 110px;color: #B1320D;}
#PopularPosts1 ul li:first-child:after{content:"1";color: #fff !important;border: 1px solid #e74c3c;background:#e74c3c}
#PopularPosts1 ul li:first-child + li {background:#efefef}
#PopularPosts1 ul li:first-child + li:after{content:"2";color: #fff !important;border: 1px solid #2882bc;background:#2882bc}
#PopularPosts1 ul li:first-child + li + li {background:#fff}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";color: #fff !important;border: 1px solid #f39c12;background:#f39c12}
#PopularPosts1 ul li:first-child + li + li + li {background:#efefef}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li {background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li {background:#efefef}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li {background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#efefef}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li {background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li {background:#efefef}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:10px;left:0px;border-radius: 100px;width:20px;height:20px;padding:5px;
line-height:1em;text-align:center;font:bold 16px arial;color:#333}
#PopularPosts1 ul li:first-child + li img,#PopularPosts1 ul li:first-child + li + li img,#PopularPosts1 ul li:first-child + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li img,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li img {display: none;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;margin-left: 10px;background:transparent;padding:0;width:65px;height:65px;border: 1px solid #eee;}
#PopularPosts1 ul li a{font:bold 12px arial;color:#555;text-decoration:none;float: left;margin-left:30px;overflow: hidden;}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

- ThaiAiTi.com chúc bạn thành công