Vừa có người vào Hien.Mobi

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!

5
4
3
2
1

Không có nhận xét nào:

Đăng nhận xét

Đếm ngược thời gian đến tết Kỷ Hợi 2019