Tạo widget popular post theo style grid cho blogspot

Chào các bạn hôm nay mình sẽ hướng dẫn các bạn tạo widget bài đăng phổ biến (popular post) cho blogspot.

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Vào trang Bố cục của blog -> Thêm tiện ích -> Bài đăng phổ biến -> Trong mục Hiển thị tích chọn Hình ảnh thu nhỏ và nhấn Lưu
Bước 2: Trở lại trang Chỉnh sửa HTML và tìm thẻ ]]></b:skin> rồi thêm css bên dưới lên trên nó

/* Popular post */
.popular-posts .widget-content ul li{padding:0}
.popular-posts .item-thumbnail{float:left;margin:0;width:100%;box-sizing:border-box}
.popular-posts li{width:50%;float:left;padding:6px}
.popular-posts .item-content{width:99%;overflow:hidden;float:left;padding:6px;box-sizing:border-box}
.popular-posts .item-thumbnail img{float:left;width:100%;height:95px;object-fit:cover;box-sizing:border-box;border-radius:3px;margin:0;padding:0}
.popular-posts .item-snippet{display:none}
.popular-posts .item-title a{margin-top:10px;line-height:20px;font-weight:600;color:#5b5b5b;font-size:13px;padding-bottom:.2em;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-line-clamp:2;overflow:hidden;-webkit-box-orient:vertical}
.popular-posts .ty-meta span.item-date{color:#999;font-size:9px;line-height:12px;text-transform:uppercase;margin:3px 0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

Lưu ý:

• Nhớ xóa css trước đó để tránh tình trạng hiển thị k giống như bản share
• Tìm đến <b:with value='data:post.featuredImage.isResizable và thay các giá trị trong nó để cho hình ảnh hiện thị rõ hơn nhé

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