Thêm một style tuyệt đẹp của widget Popular Post cho Blogspot
/ lúc / 26 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Chào các bạn, lâu rồi chưa có bài viết thủ thuật blogspot mới. Hôm nay vô tình lục lại template cũ thì thấy có cái widget popular posts này khá đẹp nên rảnh thì chia sẻ luôn cho tăng tương tác!
Widget được thiết kế bằng CSS3 bởi Bác Sĩ Windows.
Với hình ảnh kích thước tỉ lệ 16:9 cùng hiệu ứng hover tuyệt đẹp, widget bài đăng phổ biến này rất phù hợp với những blog cá nhân, blog chia sẻ ảnh,...
Cùng xem và thực hiện nhé, rất đơn giản.

Các bước thực hiện

Bước 1. Vào Bố cục, cài đặt widget Popular Post như sau:
Bước 2. Thêm CSS vào trước ]]></b:skin>
.PopularPosts ul{list-style:none;margin:0;padding:0;overflow:hidden}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{display: block; margin: 0 7px 0 0; width: 100%!important; opacity: 1; height: 150px!important; object-fit: cover; z-index: 9; overflow: hidden; float: left; position: absolute; left: 0; border-radius: 0;transition:.5s}
.PopularPosts ul li{position: relative; margin: 0 0 15px 0; padding: 0!important; height: 145px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-title{padding: 10px 0; margin: 0; position: absolute; bottom: -5px; width: 100%; height: 130px; display: table; left: 0; z-index: 99; background: 0;opacity:.6;transition:.35s}
.PopularPosts ul li:hover .item-title{opacity:.9}
.PopularPosts ul li:hover .item-title a{color:#fff!important}
.PopularPosts ul li:hover img{filter:grayscale(100%)}
.PopularPosts ul li:hover .item-title {background:rgba(0,0,0,.3)}
#PopularPosts1 ul li a{color: #fff; float: none; font: 300 18px Roboto; padding:0 15px; display: table-cell; vertical-align: middle; text-align: center}
.PopularPosts ul li .item-title a {opacity:0;transform:scale(1.3)}
.PopularPosts ul li:hover .item-title a {opacity:1;transform:scale(1)}
Bước 3. Lưu.

Tổng kết

Chả biết viết gì nữa, vậy là đã hoàn thành widget popular post thiết kế lại với phong cách tuyêt đẹp cho blogspot.
Lưu ý: Phải xóa hết CSS của popular  post trước đó (nếu có) trước khi áp dụng thủ thuật này nhé, nếu không sẽ bị xung đột đấy.
Hết, djssme copy nhớ ghi nguồn https://www.bacsiwindows.com nhé.

26 nhận xét:

🔰☣ Lê Thanh Phong☣🔰⚜️ nói...

Hay quá anh /=he

Trọng Khanh Nguyễn nói...

ko có demo sao ko chèn cái youtube đó vào a

Trường Nguyễn nói...

Là sao em? Có link xem demo đó.

Trường Nguyễn nói...

Cảm ơn em <3

Trọng Khanh Nguyễn nói...

hú giờ mới có :v

Trường Nguyễn nói...

Nhìn không kĩ à. Lúc đầu đã có rồi /=l

Star Cường IT ­ nói...

Sao không chèn trực tiếp cái video vô luôn?

Trường Nguyễn nói...

Lúc đầu có nhưng lát sau xoá. Muốn đày người ta click đấy.

Ngô Văn Tuấn nói...

đẹp đấy :v

Trường Nguyễn nói...

(y) /=clap

Huy Rocket nói...

tuyệt vời a

Trường Nguyễn nói...

(y) (y)

Tính Getter nói...

Fantastic ! :V

Trường Nguyễn nói...

:D :))

z0mbie win nói...

toẹt vời

Trường Nguyễn nói...

(y)

Nguyễn Lương Duy nói...

1 câu phải gọi là Truất :))

Trường Nguyễn nói...

(y) /=clap /=clap

Star Sơn IT nói...

Cái temp dạng trang cá nhân facebook trong demo nhiêu anh!

Quốc Hiếu nói...

Lông time <3

Star Cường IT ­ nói...

Nói mới để ý :v cũng chất phết

Trường Nguyễn nói...

Only 100k

Trường Nguyễn nói...

Lông time?? :­D ??

Star Dũng Blog nói...

đặt ảnh giúp em với
[img] https://i.imgur.com/Xqo330X.jpg [/img]

Trường Nguyễn nói...

Rồi nhé em.

Star Dũng Blog nói...

Ok cảm ơn anh :)

Đăng nhận xét