Popular Posts Blogspot giống Fphn.blogspot.com đẹp và phong cách mầu đỏ

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 Fphn.blogspot.com được hiển thị 10 bài, Và có phân rõ 3 bài Top được xem nhiều nhất

- 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://fphn.blogspot.com/'>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 .tieudeboxbenphai a{background:#c50202 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22_YsSzYcA2jFFw56msZePXmYuDJ02Cal5iPSvsRn_CRqz6_tGDfs9BNH7CwJ26FDZRp_wV7cWdIjwzvmQR8Q30_xbx1EnmUWZgBYUpxIqJVV2KVbp0lC9XD9rc3Yjao2D1sybCK8L_P-/s23/likeok.PNG) left no-repeat;background-position:110px 5px}#PopularPosts1 ul{list-style-type:none;float:left;width:100%}#PopularPosts1 ul li{position:relative;padding:10px;float:left;height:25px;overflow:hidden;width:100%}#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:40%;color:#B1320D;height:100%;}#PopularPosts1 ul li:first-child:after{content:"1";color:#fff !important;border:1px solid #e74c3c;background:#e74c3c}#PopularPosts1 ul li:first-child + li{background:#}#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:#}#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:#}#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:#}#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:#}#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:0;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:128px;height:72px}#PopularPosts1 ul li .item-thumbnail img{width:128px;height:72px}#PopularPosts1 ul li a{font:bold 12px arial;color:#2882bc;text-decoration:none;float:left;margin-left:30px;width:85%;height:32px;overflow:hidden}#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

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