aaaaaaaa: Popular Posts đẹp cho blogspot

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 trang này đượ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://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/AVvXsEgRN1IEDlBq68BQeTnMngUAgkCqIFmgUJ3FBvEEZxhVqI8xqTERUFbqhTEoqGVbFKEdu1yG_2Q96pDndkQ-ESlO_ISFrbekf8-_2W5VujVOAhszI96PhKaQbzeaN6uXzj6KyOQt5ACoMGrg/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}

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