Popular Posts chuyên nghiệp cho Blogspot

Hôm nay Hồng Designer sẽ chia sẻ thêm cho các bạn một thủ thuật Blogspot cách tạo Popular Blogspot chuyên nghiệp cho Blogspot một kiểu bài viết xem nhiều rất đẹp. Các bạn có thể xem hình dưới.

Popular Posts chuyên nghiệp cho Blogspot

Bước 1 : tìm đến thẻ ]]></b:skin> trong template blog và chèn đoạn code sau trên nó.

#PopularPosts1 {float: left;margin-bottom: 15px;}
#PopularPosts1 .tieudeboxbenphai a {background:#2882bc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLQoH4Ld2dOMiqg8ob1RdKIOTSL2pGNSWx5GxVDJsaJEq4__KZVwDCcGoFp0MFOX0QJjmXBsc1GLUAnw2BjUtpa6G_jaiU3IT1gYejpAVtWxlUm6u-3EtYYUurYZ7sgQrD3zt6DeTOzxDH/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}

Bước 2 : tiếp tục tìm <b:widget id='PopularPosts1' trong template. Và thay thế đoạn code đó bằng đoạn code bên dưới.

<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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<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 == "false"'>
<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>