Cách Thêm Popular Posts (bài đăng phổ biến) với hiệu ứng Đẹp Và Chuyên Nghiệp cho blogspot

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ cách thêm tiện ích Popular Posts (bài đăng phổ biến) với hiệu ứng đẹp và chuyên nghiệp cho blogspot.

Cách Tạo Hiệu Ứng Popular Posts

CÁCH THỰC HIỆN

Bước 1: Vào Blog - Bố cục - Thêm tiện ích - Bài đăng phổ biến

Các bạn chọn 10 bài và đặt tên cho tiện ích xong lưu
Bước 2: Chèn đoạn CSS bên dưới trước thẻ ]]></b:skin>

/* CSS PopularPosts */
.left{float:left;text-align:left}
.right{float:right;text-align:right}
.center{text-align:center}
#PopularPosts1 ul{padding:0;margin-top:10px;counter-reset:popcount}
#PopularPosts1 ul li{position: relative; height: 60px; padding-left: 45px; line-height: 20px;}
#PopularPosts1 ul li:last-child{height:44px}
span.title-top{margin-top:-3px;font-size:15px;line-height:20px;float:left;max-height:40px;overflow:hidden}
#PopularPosts1 ul li:before{content:counter(popcount,decimal);counter-increment:popcount;text-align:center;list-style-type:none;position:absolute;display:inline-block;font-weight:600;top:0;left:0;border-width:1px;width:34px;height:34px;line-height:40px;font-size:16px;background:#f1f1f1}
#PopularPosts1 ul li:after{content:"";position:absolute;top:34px;left:0;width:0;height:0;border-style:solid;border-width:10px 17px 0;border-color:#f1f1f1 transparent transparent}
#PopularPosts1 ul li:nth-child(1):before{background:#f34444;color:#fff}
#PopularPosts1 ul li:nth-child(1):after{border-color:#f34444 transparent transparent}
#PopularPosts1 ul li:nth-child(2):before{background:#58a59e;color:#fff}
#PopularPosts1 ul li:nth-child(2):after{border-color:#58a59e transparent transparent}
#PopularPosts1 ul li:nth-child(3):before{background:#7577a9;color:#fff}
#PopularPosts1 ul li:nth-child(3):after{border-color:#7577a9 transparent transparent}
#pp-show{
display:block
}
#pp-hide{
display:none
}
#pp-hide,#pp-show{
text-align: center;
padding: 10px;
margin: 0;
cursor: pointer;
color: #888;
background: #fff;
border-top: 1px solid #eee;
}

Bước 3: Vào HTML - Chuyển đến tiện ích - PopularPosts1

Các bạn sẽ thấy một đoạn code

<b:widget id='PopularPosts1' locked='false' title='Xem nhiều trong tuần' type='PopularPosts' version='1'>...</b:widget>

mở rộng tiện ích PopularPosts1 ra, các bạn tìm đến thẻ </b:includable> và chèn đoạn code bên dưới trước nó

<a id='pp-show' title='Xem thêm PopularPosts'>Xem thêm <i class='fa fa-angle-down' style='margin-left:5px'/></a>
<a id='pp-hide' title='Ẩn bớt PopularPosts'>Rút gọn <i class='fa fa-angle-up' style='margin-left:5px'/></a>

Bước 4: Chèn đoạn code bên dưới trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
$("#pp-show").click(function()
{
$("body").append('<style id="pp1">#pp-show{display:none!important}.PopularPosts ul li:nth-child(1n+6),#pp-hide{display:block!important}</style>');
$("#pp2").remove()
}
);
$("#pp-hide").click(function()
{
$("body").append('<style id="pp2">.PopularPosts ul li:nth-child(1n+6),#pp-hide{display:none!important}#pp-show{display:block!important}</style>');
$("#pp1").remove()
}
);
//]]>
</script>

Lưu HTML và xem kết quả

Code: BacSiWindows