Thêm một style tuyệt đẹp của widget Popular Post cho Blogspot
/ lúc / 27 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é.

BÌNH LUẬN VỀ BÀI VIẾT (27)

avatar
🔰☣ Lê Thanh Phong☣🔰⚜️

Hay quá anh /=he

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn em <3

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

hú giờ mới có :v

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Star Cường IT ­

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Ngô Văn Tuấn

đẹp đấy :v

TRẢ LỜI
avatar
Trường Nguyễn

(y) /=clap

TRẢ LỜI
avatar
Huy Rocket

tuyệt vời a

TRẢ LỜI
avatar
Trường Nguyễn

(y) (y)

TRẢ LỜI
avatar
Tính Getter

Fantastic ! :V

TRẢ LỜI
avatar
Trường Nguyễn

:D :))

TRẢ LỜI
avatar
z0mbie win

toẹt vời

TRẢ LỜI
avatar
Trường Nguyễn

(y)

TRẢ LỜI
avatar
Trường Nguyễn

123456

TRẢ LỜI
avatar
Trịnh Đăng An

123455

TRẢ LỜI
avatar
Trường Nguyễn

Test

TRẢ LỜI
avatar
Trường Nguyễn

Test t

TRẢ LỜI
avatar
Trường Nguyễn

14125125125

TRẢ LỜI
avatar
Trường Nguyễn

451 56QT1 251 231Q5 TRA3TCSG W

TRẢ LỜI
avatar
Trường Nguyễn

Test !!~

TRẢ LỜI
avatar
Trường Nguyễn

Repppp

TRẢ LỜI
avatar
Trường Nguyễn

1123434

TRẢ LỜI
avatar
Trường Nguyễn

replyyyy

TRẢ LỜI
avatar
Trường Nguyễn

https://i.imgur.com/swCY95P.jpg

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.