[Blogspot] Popular Posts tự đánh số đẹp cho blog

Popular Posts là widget hiển thị bài đăng phổ biến trong 1 thời gian nhất định cho blog của bạn. Từ đó người đọc có thể dễ dàng xem và lựa chọn những bài đăng có giá trị. Điều này vừa phục vụ cho họ, cũng vừa tăng thêm lượt view cho những bài đó.

Hôm nay mình xin chia sẻ cho các bạn một mẫu Popular Posts mới tự động đánh số thứ tự và có hiệu ứng hover cực đẹp.

Popular Posts Widget hiệu ứng đánh số cho blog

Xem thêm: Popular Posts đẹp #1

Cách thực hiện:

Bước 1: Truy cập quản trị Blogspot - Bố cục - Chỉnh các thông số tiện ích Popular Posts như sau:

Thiết lập thông số tiện ích Popular Posts

Lưu ý: Bạn cũng có thể bỏ tùy chọn hiện chú thích (nếu không muốn khi rê chuột vào nó hiện đoạn hiển thị ngắn của bài viết đó). Ngoài ra, tăng hay giảm số bài viết tối đa là tùy bạn, miễn sao thấy đẹp và hợp ý.

Bước 2: Chủ đề - Chỉnh sửa HTML - Dán đoạn CSS dưới lên trước thẻ ]]></b:skin>

/* CSS Popular Post */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:'Oswald',Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0;     border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear;    font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear;    border-radius: 10%;font-size: 18px;    padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab;    border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear;    font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}

Hãy xóa hết tất cả CSS về Popular Posts cũ đi nhé để tránh xung đột.

Bước 3: Lưu template lại và kiểm tra kết quả.

Vậy là mình vừa giới thiệu xong cho các bạn thêm 1 mẫu Popular Posts đẹp cho blog rồi đó. 

Chúc các bạn thành công nhé!

Code: msdesignbd.com

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!