Popular Posts thêm 1 mẫu bài viết xem nhiều cho blogspot

Popular Posts Cho blogspot thì trên mạng đã có khá nhiều tut chia sẻ và rất nhiều mẫu khác nhau, để tô thêm vè phong phú đó, Mình chia sẻ thêm cho các bạn 1 mẫu Popular Posts - bài viết xem nhiều cho Blogspot. Mẫu này thì khá là đơn giản nhưng trông cũng không kém phần thú vị đâu.

- Cách thực hiện như sau:
- Trước tiên, bạn tìm trong Temp của mình đoạn code sau sau bằng cách gõ từ khóa  PopularPosts1 nhé bạn.

<b:widget id='PopularPosts1' locked='false' title='Xem nhiều' type='PopularPosts'>
<b:includable id='main'>
......
......
</b:includable>
</b:widget>

- Tiếp theo, thay đoạn code trên bằng đoạn code sau:

  <b:widget id='PopularPosts1' locked='false' title='Xem nhiều' 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 == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXD7QXNDVgEJ9Yl3pU73tN4D2sMVO9eLuSIfJeC-YjotUgWts9OijUJY4xTHq5y6iPIeTKNBB_3lRzjAgY2VSAkumqqFkOMjCK4db-wEnwEjPBrHCtnl5J-KhV68CdicZGloAlxi2oBg3Y/'/>
         </b:if>
         <a 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'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXD7QXNDVgEJ9Yl3pU73tN4D2sMVO9eLuSIfJeC-YjotUgWts9OijUJY4xTHq5y6iPIeTKNBB_3lRzjAgY2VSAkumqqFkOMjCK4db-wEnwEjPBrHCtnl5J-KhV68CdicZGloAlxi2oBg3Y/'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
  </b:widget>

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

#PopularPosts1 h2 {font:bold 15px arial;text-transform: none;color:#333;line-height:1.2em;letter-spacing: .01em;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsgenN_g7O07Rmwfyyw69fyb6gOjD6WNizFJQ0nQGM0msWCN26utr2pgoAbujO2pyK3aaqu-Qrp3O_o6RB1akkBMZbhbUSwh5KzXwHToOc4HoqRAknqMFhqsq4uWt39iDh2rffCBkChXb3/s50/te_bk.gif);margin:0 auto;border-bottom: 1px solid #ddd;padding: 4px 0 4px 0px;text-align: center;float: left;width:190px;border-top-left-radius: 5px;border-top-right-radius: 5px;overflow: hidden;}
#PopularPosts1 ul{margin:0;list-style-type:none;float: left;width: 100%;height: 251px;overflow: hidden;}
#PopularPosts1 ul li{position:relative;padding:10px;float: left;height: 31px;overflow: hidden;width: 170px;}
#PopularPosts1 ul li:first-child{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN7DhNNQNjXziQNs9MWpexyGzuOIutaWB_MndH1O1_OkCRYtqnf7XKyuIedDB5XoWt8Q1Cuvl6HGlKKlMCbXLV40As5gHQXDtKvexxFWAvYWcUAGJiRrkidlWdj8Cj-630UGTZR4bjhLsA/s0/home_bxh_result_li.png)}
#PopularPosts1 ul li:first-child:after{content:"1";color: #1cc108 !important;}
#PopularPosts1 ul li:first-child + li {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN7DhNNQNjXziQNs9MWpexyGzuOIutaWB_MndH1O1_OkCRYtqnf7XKyuIedDB5XoWt8Q1Cuvl6HGlKKlMCbXLV40As5gHQXDtKvexxFWAvYWcUAGJiRrkidlWdj8Cj-630UGTZR4bjhLsA/s0/home_bxh_result_li.png)}
#PopularPosts1 ul li:first-child + li:after{content:"2";color: #ee580c !important;}
#PopularPosts1 ul li:first-child + li + li {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN7DhNNQNjXziQNs9MWpexyGzuOIutaWB_MndH1O1_OkCRYtqnf7XKyuIedDB5XoWt8Q1Cuvl6HGlKKlMCbXLV40As5gHQXDtKvexxFWAvYWcUAGJiRrkidlWdj8Cj-630UGTZR4bjhLsA/s0/home_bxh_result_li.png)}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";color: #f49543 !important;}
#PopularPosts1 ul li:first-child + li + li + li {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN7DhNNQNjXziQNs9MWpexyGzuOIutaWB_MndH1O1_OkCRYtqnf7XKyuIedDB5XoWt8Q1Cuvl6HGlKKlMCbXLV40As5gHQXDtKvexxFWAvYWcUAGJiRrkidlWdj8Cj-630UGTZR4bjhLsA/s0/home_bxh_result_li.png)}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";color: #b1b2b6 !important;}
#PopularPosts1 ul li:first-child + li + li + li + li {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN7DhNNQNjXziQNs9MWpexyGzuOIutaWB_MndH1O1_OkCRYtqnf7XKyuIedDB5XoWt8Q1Cuvl6HGlKKlMCbXLV40As5gHQXDtKvexxFWAvYWcUAGJiRrkidlWdj8Cj-630UGTZR4bjhLsA/s0/home_bxh_result_li.png)}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";color: #b1b2b6 !important;}
#PopularPosts1 ul li:first-child: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:after{position:absolute;top:8px;left:0px;border-radius:50%;width:20px;height:20px;line-height:1em;text-align:center;font:bold 28px arial;color:#333}
#PopularPosts1 ul li .item-thumbnail{display: none;float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font:12px arial;color:#444;text-decoration:none;float: left;margin-left: 10px;width: 170px;height: 30px;overflow: hidden;}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

- Bạn đang xem TUT hướng dẫn tại Website ThaiAiTi.com - Chúc bạn thực hiện thành công!